add csv data files readding

Author: geekplux

data/data.csv

@@ -0,0 +1,8 @@
+label,value
+<5,2704659
+5-13,4499890
+14-17,2159981
+18-24,3853788
+25-44,14106543
+45-64,8819342
+>65,612463

example/index.js

@@ -1,18 +1,10 @@
+const fs = require('fs');
 const output = require('d3node-output');
+const d3 = require('d3-node')().d3;
 const d3nPie = require('../');
 
-const gen = n => {
-  const data = [];
-
-  for (let i = 0; i < n; ++i) {
-    data.push({
-      key: `item ${i}`,
-      value: Math.max(10, Math.floor(Math.random() * 1000)),
-    });
-  }
-
-  return data;
-};
+const csvString = fs.readFileSync('data/data.csv').toString();
+const data = d3.csvParse(csvString);
 
 // create output files
-output('./example/output', d3nPie({ data: gen(5) }));
+output('./example/output', d3nPie({ data: data }));

example/output.html

@@ -3,6 +3,6 @@ <h2>Pie Chart</h2>
       <div id="chart"><svg xmlns="http://www.w3.org/2000/svg" width="960" height="500"><defs><style type="text/css"><![CDATA[ 
     .arc text {font: 10px sans-serif; text-anchor: middle;}
     .arc path {stroke: #fff;}
-   ]]></style></defs><g transform="translate( 200 , 200 )"><g class="arc"><path d="M1.1634144591899855e-14,-190A190,190,0,0,1,132.76869047981882,-135.91348287890375L0,0Z" style="fill: #393b79;"></path><text transform="translate(60.363260835415275,-148.1765053620702)" dy=".35em">item 0</text></g><g class="arc"><path d="M132.76869047981882,-135.91348287890375A190,190,0,0,1,189.65389868050224,-11.462927867076063L0,0Z" style="fill: #5254a3;"></path><text transform="translate(145.51877838280103,-66.51530002922063)" dy=".35em">item 1</text></g><g class="arc"><path d="M189.65389868050224,-11.462927867076063A190,190,0,0,1,-121.65081356917744,145.94889365102168L0,0Z" style="fill: #6b6ecf;"></path><text transform="translate(72.19904912725167,142.78409331967165)" dy=".35em">item 2</text></g><g class="arc"><path d="M-121.65081356917744,145.94889365102168A190,190,0,0,1,-32.147568047028756,-187.26060415544336L0,0Z" style="fill: #9c9ede;"></path><text transform="translate(-154.5225937404604,-41.50624078040114)" dy=".35em">item 3</text></g><g class="arc"><path d="M-32.147568047028756,-187.26060415544336A190,190,0,0,1,-3.490243377569956e-14,-190L0,0Z" style="fill: #637939;"></path><text transform="translate(-13.584872935950507,-159.42224194670604)" dy=".35em">item 4</text></g></g></svg></div>
+   ]]></style></defs><g transform="translate( 200 , 200 )"><g class="arc"><path d="M1.1634144591899855e-14,-190A190,190,0,0,1,84.74735355689664,-170.05259793693938L0,0Z" style="fill: #393b79;"></path><text transform="translate(36.65821846585564,-155.74394055278555)" dy=".35em">&lt;5</text></g><g class="arc"><path d="M84.74735355689664,-170.05259793693938A190,190,0,0,1,179.1708225838209,-63.228287456145594L0,0Z" style="fill: #5254a3;"></path><text transform="translate(119.88118735480641,-105.96462106949565)" dy=".35em">5-13</text></g><g class="arc"><path d="M179.1708225838209,-63.228287456145594A190,190,0,0,1,189.91463948905843,5.694708749441913L0,0Z" style="fill: #6b6ecf;"></path><text transform="translate(158.09080190056423,-24.64342416216873)" dy=".35em">14-17</text></g><g class="arc"><path d="M189.91463948905843,5.694708749441913A190,190,0,0,1,146.6886213390588,120.75780873155253L0,0Z" style="fill: #9c9ede;"></path><text transform="translate(149.7795371502396,56.26802156696109)" dy=".35em">18-24</text></g><g class="arc"><path d="M146.6886213390588,120.75780873155253A190,190,0,0,1,-189.83659389354435,7.8783005082015025L0,0Z" style="fill: #637939;"></path><text transform="translate(-50.88213468284223,151.69379806082088)" dy=".35em">25-44</text></g><g class="arc"><path d="M-189.83659389354435,7.8783005082015025A190,190,0,0,1,-19.855624283330453,-188.95966284982416L0,0Z" style="fill: #8ca252;"></path><text transform="translate(-121.0963839891443,-104.57373372292736)" dy=".35em">45-64</text></g><g class="arc"><path d="M-19.855624283330453,-188.95966284982416A190,190,0,0,1,-2.0365633351872334e-13,-190L0,0Z" style="fill: #b5cf6b;"></path><text transform="translate(-8.371730476415376,-159.78083154380647)" dy=".35em">&gt;65</text></g></g></svg></div>
     </div>
   </body></html>

example/output.png

@@ -56,12 +56,12 @@ function pie ({
 
   g.append('path')
     .attr('d', arc)
-    .style('fill', (d) => color(d.data.key));
+    .style('fill', (d) => color(d.data.label));
 
   g.append('text')
     .attr('transform', (d) => `translate(${labelArc.centroid(d)})`)
     .attr('dy', '.35em')
-    .text((d) => d.data.key);
+    .text((d) => d.data.label);
 
   return d3n;
 }