Skip to content

Instantly share code, notes, and snippets.

@jarobertson

jarobertson/index.html

Forked from jasondavies/index.html
Created December 6, 2011 17:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save jarobertson/1439067 to your computer and use it in GitHub Desktop.
Save jarobertson/1439067 to your computer and use it in GitHub Desktop.
Download ZIP
filtering and nesting csv files
Raw
index.html
<!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>
Raw
mini.csv
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