-
-
Save jarobertson/1439067 to your computer and use it in GitHub Desktop.
filtering and nesting csv files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script> | |
| <style type="text/css"> | |
| .chart { | |
| display: block; | |
| margin: auto; | |
| margin-top: 40px; | |
| } | |
| body { text-align: left; } | |
| p.source { font-style: italic; } | |
| a { color: blue; } | |
| svg { | |
| display: block; | |
| margin: auto; | |
| } | |
| text { | |
| font-size: 8px; | |
| } | |
| rect { | |
| fill: none; | |
| stroke: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="body"> | |
| <p><h3> Attempt at csv filter and nesting...</h3> </p> | |
| <p> Eventually I want to allow users to: <ol> | |
| <li>Filter a csv file to obtain a sub selection of interest via dropdown select box.</li> | |
| <li>Choose from a variety of different nest options to create "flare.json" style format.</li> | |
| <li>Choose from a variety of different visualization options that use the "flare.json" style format.</li> | |
| <li>RENDER the visualisation.</li></ol> | |
| <p> Code below is based upon a messy mix of the standard treemap.js and <a href="http://bl.ocks.org/1319738">a gist</a> by <a href="https://github.com/jasondavies">Jason Davies</a>. Stuff in RED not implemented yet!!</p> | |
| CSV Filter 1 - This will filter by "sec" : <select id="sec"> | |
| <option value="990" >990</option> | |
| <option value="903">903</option> | |
| <option value="905" selected>905</option> | |
| <option value="907">907</option> | |
| <option value="950" >950</option> | |
| <option value="2000">2000</option> | |
| </select> <br> | |
| <font color="red"> | |
| CSV Filter 2 - This will filter by "fon" : <select id="fon" > | |
| <option value="xxx" >to do</option> | |
| <option value="yyy">still to be done</option> | |
| </select> <br> | |
| This will choose the nest type: <select id="nest type" onChange="nestchoose(this)"> | |
| <option value="xxx" >Nest by Fon</option> | |
| <option value="yyy">Nest by Sec</option> | |
| </select> <br> | |
| This will choose the type of visualisation to displayed: <select id="vistype" onChange="vischoose(this)"> | |
| <option value="xxx" >Treemap</option> | |
| <option value="yyy">Bar Chart</option> | |
| <option value="yyy">Sunburst</option> | |
| </select> <br> | |
| </h3> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var w = 400, | |
| h = 200, | |
| color = d3.scale.category20b(), | |
| root, | |
| node, | |
| data; | |
| var treemap = d3.layout.treemap() | |
| .round(false) | |
| .size([w, h]) | |
| .sticky(true) | |
| .children(function(d) { return d.values; }) | |
| .value(function(d) { return d.key; }); | |
| var svg = d3.select("#body").append("div") | |
| .attr("class", "chart") | |
| .style("width", w + "px") | |
| .style("height", h + "px") | |
| .append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .append("svg:g") | |
| .attr("transform", "translate(.5,.5)"); | |
| //load csv and copy to global variable | |
| d3.csv("mini.csv",function(csv) { | |
| data=csv; | |
| /*datanest(); | |
| datadraw(); */ | |
| datafilter();//filter csv | |
| datanest(); //nest filtered csv | |
| datadraw(); //render nested and filtered csv | |
| }); | |
| function datafilter(d){ | |
| var sector = document.getElementById("sec"); | |
| var sec = sector.options[sector.selectedIndex].value; | |
| data = data.filter(function(d) { return d.sec == sec;}); | |
| return data;} | |
| function datanest(d){ | |
| node = root = {values: d3.nest() | |
| .key(function(d) { return d.sec; }) | |
| .rollup(function(d) { | |
| return d.map(function(d) { | |
| return {key: d.bud}; | |
| }); | |
| }) | |
| .entries(data)}; | |
| return node; | |
| return root; | |
| } | |
| function datadraw(d){ | |
| var nodes = treemap.nodes(root) | |
| .filter(function(d) { return !d.values; }); | |
| var cell = svg.selectAll("g") | |
| .data(nodes) | |
| .enter().append("svg:g") | |
| .attr("class", "cell") | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
| cell.append("svg:rect") | |
| .attr("width", function(d) { return d.dx - 1; }) | |
| .attr("height", function(d) { return d.dy - 1; }) | |
| .style("fill", function(d) { return color(d.parent.key); }); | |
| cell.append("svg:text") | |
| .attr("x", function(d) { return d.dx / 2; }) | |
| .attr("y", function(d) { return d.dy / 2; }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "middle") | |
| .text(function(d) { return d.key; }) | |
| .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sec | fon | eco | bud | avr | jun | sep | dec | |
|---|---|---|---|---|---|---|---|---|
| 990 | 3-0-0-0131-000-0010-01-0 | 2-611-20 | 20 | 333152834 | ||||
| 990 | 3-0-0-0131-050-0010-01-0 | 3-628-10 | 33 | 0 | ||||
| 903 | 4-5-1-0912-030-6200-02-1 | 3-621-10 | 470 | 2000000 | ||||
| 903 | 4-5-1-0912-030-6200-02-1 | 5-231-10 | 400 | 4000000 | ||||
| 905 | 4-4-0-0912-050-0130-02-1 | 2-611-07 | 33 | 32626000 | ||||
| 905 | 4-4-0-0912-050-0130-02-1 | 2-611-22 | 100 | 43290000 | ||||
| 905 | 4-4-0-0912-050-0130-02-1 | 2-611-23 | 130 | 14380000 | ||||
| 907 | 6-4-0-0760-070-0250-01-1 | 2-611-00 | 170 | 5393000 | ||||
| 907 | 6-4-0-0760-070-0250-01-1 | 4-643-10 | 85 | 11381000 | ||||
| 907 | 6-4-0-1032-070-0200-02-1 | 2-611-00 | 333 | 15114000 | ||||
| 907 | 6-4-0-1032-070-0200-02-1 | 3-621-10 | 111 | 2573000 | ||||
| 950 | 7-6-0-0471-001-0010-03-0 | 7-629-09 | 199 | 17500000 | ||||
| 950 | 7-6-0-0471-001-0010-03-0 | 7-629-11 | 132 | 6000000 | ||||
| 970 | 7-6-0-0631-000-0020-02-0 | 7-625-10 | 5 | 1000000 | ||||
| 2000 | 7-6-0-0631-000-0020-02-0 | 7-626-10 | 33 | 500000 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment