Re-organising d3.ez namespace.

Makefile

@@ -1,29 +1,31 @@
 # D3.EZ Makefile
 
 JS_FILES :=        src/js/header.js \
-                   src/js/base.js \
-                   src/js/discreteBarChart.js \
-                   src/js/groupedBarChart.js \
-                   src/js/radialBarChart.js \
-                   src/js/circularHeatChart.js \
-                   src/js/tabularHeatChart.js \
-                   src/js/donutChart.js \
-                   src/js/punchCard.js \
-                   src/js/multiSeriesLineChart.js \
-                   src/js/htmlTable.js \
-                   src/js/htmlList.js \
-                   src/js/reusableComponents.js
+                   src/js/chart.js \
+									 src/js/component.js \
+									 src/js/colors.js \
+                   src/js/chart/discreteBar.js \
+                   src/js/chart/groupedBar.js \
+                   src/js/chart/radialBar.js \
+                   src/js/chart/circularHeat.js \
+                   src/js/chart/tabularHeat.js \
+                   src/js/chart/donut.js \
+                   src/js/chart/punchCard.js \
+                   src/js/chart/multiSeriesLine.js \
+                   src/js/html/table.js \
+                   src/js/html/list.js
+
 
 CSS_FILES :=       src/css/global.css \
-                   src/css/groupedBarChart.css \
-                   src/css/radialBarChart.css \
-                   src/css/circularHeatChart.css \
-                   src/css/tabularHeatChart.css \
-                   src/css/donutChart.css \
-                   src/css/punchCard.css \
-                   src/css/multiSeriesLineChart.css \
-                   src/css/htmlList.css \
-                   src/css/htmlTable.css
+                   src/css/chart/groupedBar.css \
+                   src/css/chart/radialBar.css \
+                   src/css/chart/circularHeat.css \
+                   src/css/chart/tabularHeat.css \
+                   src/css/chart/donut.css \
+                   src/css/chart/punchCard.css \
+                   src/css/chart/multiSeriesLine.css \
+                   src/css/html/list.css \
+                   src/css/html/table.css
 
 GENERATED_FILES := d3.ez.js \
                    d3.ez.min.js \

README.md

@@ -2,6 +2,8 @@
 
 **D3.EZ** is a library of reusable graphs and charts which use [D3](http://www.d3js.org/). Inspired by Mike Bostock's tutorial [Towards Reusable Charts](http://bost.ocks.org/mike/chart/), the aim of the library is to harness the power of D3, whilst simplifying the process of creating graphs and charts making D3. **D3.EZ** makes it easier for people who are still learning JavaScript or D3 to quickly produce data visualizations with minimal code.
 
+Compatible with D3 v4.
+
 Gist (bl.ocks) Examples:
 * [Discrete Bar Chart](http://bl.ocks.org/jamesleesaunders/8ba1fb5657d6bc7286be)
 * [Stacked Bar Chart](http://bl.ocks.org/jamesleesaunders/ac5b6134ad7144e8327d)
@@ -32,3 +34,4 @@ For reference here are a few other alternative D3 chart libraries which also fol
 
 Credits:
 * Peter Cook http://animateddata.co.uk/ For giving permission to use his Radial Bar and Radial Heat Map charts.
+* Virgin Media http://www.virginmedia.co.uk/ For support in development of the Tabular Heat Map.

d3.ez.css

@@ -41,100 +41,104 @@
 
 
 /* === Bar Chart (Discrete & Grouped) Styles === */
-.discreteBarChart rect.bar, .groupedBarChart rect.bar {
+.chartDiscreteBar rect.bar, .chartGroupedBar rect.bar {
   stroke: #333333;
   stroke-width: 1px;
 }
-.discreteBarChart rect.bar:hover {
+.chartDiscreteBar rect.bar:hover {
   opacity: 0.7;
 }
-.groupedBarChart g.barGroup:hover {
+.chartDiscreteBar g.barGroup:hover {
   opacity: 0.7;
 }
 
 
 /* === Radial Bar Chart Styles === */
-.radialBarChart path {
+.chartRadialBar path {
   fill: none;
 }
-.radialBarChart path.segment {
+.chartRadialBar path.segment {
   fill: steelblue;
   stroke-width: 1px;
   stroke: #333333;
 }
-.radialBarChart path.segment:hover {
+.chartRadialBar path.segment:hover {
   opacity: 0.7;
 }
-.radialBarChart circle.outerCircle {
+.chartRadialBar circle.outerCircle {
   stroke: #aaa;
   stroke-dasharray: 4, 4;
 }
-.radialBarChart .tickCircles circle {
+.chartRadialBar .tickCircles circle {
   stroke: #ddd;
   stroke-dasharray: 2, 2;
 }
-.radialBarChart .spokes line {
+.chartRadialBar .spokes line {
   stroke: #666;
   stroke-width: 0.2;
 }
-.radialBarChart .labels text {
+.chartRadialBar .labels text {
   fill: #333;
   font-size: 10px;
   font-weight: bold;
 }
 
 
 /* === Circular Heat Chart Styles === */
-.circularHeatChart path.segment {
+.chartCircularHeat path.segment {
   stroke: #B6B6B6;
   stroke-width: 0.5px;
 }
-.circularHeatChart .labels {
+.chartCircularHeat .labels {
   fill: #000000;
   letter-spacing: -1px;
 }
-.circularHeatChart .segmentLabels text {
+.chartCircularHeat .segmentLabels text {
   font-size: 1.0em;
 }
-.circularHeatChart .radialLabels text {
+.chartCircularHeat .radialLabels text {
   font-size: 1.1em;
   font-weight: bold;
 }
 
 
 /* === Tabular Heat Chart Styles === */
-.tabularHeatChart rect.card {
+.chartTabularHeat rect.card {
   stroke: #b6b6b6;
   stroke-width: 0.5px;
 }
-.tabularHeatChart rect.card:hover {
+.chartTabularHeat rect.card:hover {
   opacity: 0.7;
   stroke: #b6b6b6;
   cursor: pointer;
 }
 
 
 /* === Donut Chart Styles === */
-.donutChart polyline.line {
+.chartDonut polyline.line {
   opacity: .3;
   stroke: black;
   stroke-width: 2px;
   fill: none;
 }
-.donutChart path.slice {
+.chartDonut path.slice {
   stroke: #333333;
   stroke-width: 1px;
 }
-.donutChart path.slice:hover {
+.chartDonut path.slice:hover {
   opacity: 0.7;
 }
 
 
 /* === Punch Card Styles === */
-.punchCard text.punchValue {
+.chartPunchCard text.punchValue {
   font-size: 20px;
   font-weight: bold;
 }
+.chartPunchCard text.label {
+  font-size: 12px;
+  font-weight: bold;
+}
 
 
 /* === Multi Series Line Chart Styles === */
@@ -146,7 +150,7 @@
         transform: scale(1.5);
     }
 }
-.multiSeriesLineChart circle:hover {
+.chartMultiSeriesLine circle:hover {
     animation-duration: 0.2s;
     animation-name: circleTransition;
     transform-origin: center center;