Add coloring by scales

d3-parliament.js

@@ -7,7 +7,8 @@ d3.parliament = function() {
     /* params */
     var width,
         height,
-        innerRadiusCoef = 0.4;
+        innerRadiusCoef = 0.4,
+        scale;
 
     /* animations */
     var enter = {
@@ -40,8 +41,7 @@ d3.parliament = function() {
             /* init the svg */
             var svg = d3.select(this);
 
-            /***
-             * compute number of seats and rows of the parliament */
+            /* compute number of seats and rows of the parliament */
             var nSeats = 0;
             d.forEach(function(p) { nSeats += (typeof p.seats === 'number') ? Math.floor(p.seats) : p.seats.length; });
 
@@ -114,7 +114,6 @@ d3.parliament = function() {
                 });
             })();
 
-
             /***
              * helpers to get value from seat data */
             var seatClasses = function(d) {
@@ -132,9 +131,14 @@ d3.parliament = function() {
                 return r;
             };
 
+            // if scale is present, use it:
+            if (scale) {
+              scale.domain(d.map(function(row) { return(row.legend) }));
+              var seatColor = function(d) { return scale(d.party.legend); }
+            }
+
 
-            /***
-             * fill svg with seats as circles */
+            /* fill svg with seats as circles */
             /* container of the parliament */
             var container = svg.select(".parliament");
             if (container.empty()) {
@@ -153,6 +157,11 @@ d3.parliament = function() {
             circlesEnter.attr("cx", enter.fromCenter ? 0 : seatX);
             circlesEnter.attr("cy", enter.fromCenter ? 0 : seatY);
             circlesEnter.attr("r", enter.smallToBig ? 0 : seatRadius);
+
+            if (scale) {
+              circlesEnter.attr("fill", seatColor);
+            }
+
             if (enter.fromCenter || enter.smallToBig) {
                 var t = circlesEnter.transition().duration(function() { return 1000 + Math.random()*800; });
                 if (enter.fromCenter) {
@@ -181,6 +190,10 @@ d3.parliament = function() {
                 .attr("cy", seatY)
                 .attr("r", seatRadius);
 
+              if (scale) {
+                circlesUpdate.attr("fill", seatColor);
+              }
+
             /* animation removing seats from the parliament */
             if (exit.toCenter || exit.bigToSmall) {
                 var t = circles.exit().transition().duration(function() { return 1000 + Math.random()*800; });
@@ -215,6 +228,12 @@ d3.parliament = function() {
         return parliament;
     };
 
+    parliament.scale = function(value) {
+      if (!arguments.length) return scale;
+      scale = value;
+      return parliament;
+    }
+
     parliament.enter = {
         smallToBig: function (value) {
             if (!arguments.length) return enter.smallToBig;

package.json

@@ -4,7 +4,9 @@
   "description": "A parliament chart based on d3",
   "main": "d3-parliament.js",
   "dependencies": {
-    "uglify-js": "^2.6.2"
+    "uglify-js": "^2.6.2",
+    "d3-scale" : "2.0.0",
+    "d3-scale-chromatic" : "1.2.0"
   },
   "devDependencies": {},
   "scripts": {
@@ -19,6 +21,7 @@
     "parliament"
   ],
   "author": "Geoffrey Brossard <[email protected]>",
+  "contributors": "Oğuzhan Öğreden <[email protected]> http://www.oguzhanogreden.com/",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/geoffreybr/d3-parliament/issues"