HTML table with sparklines
forked from jhubley's block: html table with sparklines
license: mit |
HTML table with sparklines
forked from jhubley's block: html table with sparklines
[ | |
{ | |
"state":"Alabama", | |
"value":2, | |
"year":2003 | |
}, | |
{ | |
"state":"Alabama", | |
"value":0, | |
"year":2004 | |
}, | |
{ | |
"state":"Alabama", | |
"value":6, | |
"year":2005 | |
}, | |
{ | |
"state":"Alabama", | |
"value":2, | |
"year":2006 | |
}, | |
{ | |
"state":"Alabama", | |
"value":4, | |
"year":2007 | |
}, | |
{ | |
"state":"Alabama", | |
"value":4, | |
"year":2008 | |
}, | |
{ | |
"state":"Alaska", | |
"value":0, | |
"year":2003 | |
}, | |
{ | |
"state":"Alaska", | |
"value":2, | |
"year":2005 | |
}, | |
{ | |
"state":"Alaska", | |
"value":1, | |
"year":2006 | |
}, | |
{ | |
"state":"Alaska", | |
"value":2, | |
"year":2007 | |
}, | |
{ | |
"state":"Alaska", | |
"value":5, | |
"year":2008 | |
}, | |
{ | |
"state":"Arizona", | |
"value":5, | |
"year":2005 | |
}, | |
{ | |
"state":"Arizona", | |
"value":7, | |
"year":2006 | |
}, | |
{ | |
"state":"Arizona", | |
"value":3, | |
"year":2007 | |
}, | |
{ | |
"state":"Arizona", | |
"value":8, | |
"year":2008 | |
}, | |
{ | |
"state":"Arkansas", | |
"value":null, | |
"year":2003 | |
}, | |
{ | |
"state":"Arkansas", | |
"value":0, | |
"year":2004 | |
}, | |
{ | |
"state":"Arkansas", | |
"value":1, | |
"year":2005 | |
}, | |
{ | |
"state":"Arkansas", | |
"value":3, | |
"year":2006 | |
}, | |
{ | |
"state":"Arkansas", | |
"value":1, | |
"year":2007 | |
}, | |
{ | |
"state":"Arkansas", | |
"value":null, | |
"year":2008 | |
}, | |
{ | |
"state":"California", | |
"value":10, | |
"year":2003 | |
}, | |
{ | |
"state":"California", | |
"value":12, | |
"year":2004 | |
}, | |
{ | |
"state":"California", | |
"value":9, | |
"year":2005 | |
}, | |
{ | |
"state":"California", | |
"value":5, | |
"year":2006 | |
}, | |
{ | |
"state":"California", | |
"value":8, | |
"year":2007 | |
}, | |
{ | |
"state":"California", | |
"value":3, | |
"year":2008 | |
}, | |
{ | |
"state":"Colorado", | |
"value":2, | |
"year":2008 | |
}, | |
{ | |
"state":"Connecticut", | |
"value":0, | |
"year":2003 | |
}, | |
{ | |
"state":"Connecticut", | |
"value":5, | |
"year":2004 | |
}, | |
{ | |
"state":"Connecticut", | |
"value":4, | |
"year":2006 | |
}, | |
{ | |
"state":"Connecticut", | |
"value":3, | |
"year":2007 | |
}, | |
{ | |
"state":"Connecticut", | |
"value":5, | |
"year":2008 | |
}, | |
{ | |
"state":"Delaware", | |
"value":1, | |
"year":2003 | |
}, | |
{ | |
"state":"Delaware", | |
"value":1, | |
"year":2004 | |
}, | |
{ | |
"state":"Delaware", | |
"value":1, | |
"year":2005 | |
}, | |
{ | |
"state":"Delaware", | |
"value":5, | |
"year":2006 | |
} | |
] |
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
body{ | |
font-family:Arial, sans-serif; | |
font-size:14px; | |
} | |
table{ | |
border-spacing:0; | |
padding:0; | |
} | |
th{ | |
text-align:left; | |
font-weight:normal !important; | |
border-top:1px solid #ddd; | |
border-left:1px solid #ddd; | |
border-bottom:1px solid #ddd; | |
height:25px; | |
padding-left:5px; | |
width: 50px; | |
} | |
td{ | |
border:1px solid #ddd; | |
width:30px !important; | |
height:25px; | |
padding-left:5px; | |
} | |
tr.row-odd, | |
.row-odd{ | |
background: #eee; | |
} | |
</style> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="//code.jquery.com/jquery-1.10.2.js"></script> | |
</head> | |
<body> | |
<div id="indcontent"> | |
</div> | |
<script> | |
var data; | |
var line = d3.svg.line() | |
.x(function(d){return xScale(d.year);}) | |
.y(function(d){return yScale(d.value);}); | |
d3.json("data.json", function(json) { | |
jsonData = json; | |
json.forEach(function(d) { | |
d.value = Math.round((+d.value + 0.00001) * 1000) / 1000; | |
d.year = +d.year; | |
}); | |
// add years for select indicator | |
var nestyr = d3.nest() | |
.key(function(d) { return d.year; }) | |
.sortKeys(d3.ascending) | |
.map(json); | |
var yearstring = Object.keys(nestyr); | |
// ////////////////////////// | |
var width = 200, height = 25; | |
var minInd = d3.min(json, function(d) { return d.value;} ) | |
var maxInd = d3.max(json, function(d) { return d.value;} ) | |
xScale = d3.scale.linear().range([0, width - 10]).domain(d3.extent(json, function(d) { return d.year; })), | |
yScale = d3.scale.linear().range([height, 0]).domain([minInd,maxInd]), | |
xAxis = d3.svg.axis().scale(xScale).tickFormat(d3.format('0f')), | |
yAxis = d3.svg.axis().scale(yScale).orient("left"); | |
var type = d3.nest() | |
.key(function(d) { return d.state; }) | |
.sortKeys(d3.ascending) | |
.entries(json); | |
console.log("type:", type); | |
var tableData = [], | |
states = {}; | |
json.forEach(function (d) { | |
var state = states[d.state]; | |
if (!state) { | |
tableData.push(state = states[d.state] = {}); | |
} | |
state[d.year] = d.value, | |
states[d.state].State = d.state; | |
}); | |
console.log("tableData", tableData) | |
yearstring.unshift("State"); | |
yearstring.push("Sparkline"); | |
updateGraph(data); | |
// render the table(s) | |
tabulate(tableData, yearstring); | |
}); // close json | |
function updateGraph(data) { | |
// add years for select indicator | |
var nestyr = d3.nest() | |
.key(function(d) { return d.year; }) | |
.sortKeys(d3.ascending) | |
.map(jsonData); | |
var yearstring = Object.keys(nestyr); | |
minyear = d3.min(yearstring); | |
maxyear = d3.max(yearstring); | |
}; | |
function tabulate(newData, columns) { | |
var type = d3.nest() | |
.key(function(d) { return d.state; }) | |
.sortKeys(d3.ascending) | |
.entries(jsonData); | |
var table = d3.select('#indcontent').append('table') | |
var thead = table.append('thead') | |
var tbody = table.append('tbody'); | |
// append the header row | |
thead.append('tr') | |
.selectAll('th') | |
.data(columns).enter() | |
.append('th') | |
.text(function (column) { return column; }); | |
// create a row for each object in the data | |
var rows = tbody.selectAll('tr') | |
.data(newData) | |
.enter() | |
.append('tr'); | |
// add stripes to the table | |
rows.attr("class", function(d, i){ if (i++ % 2 === 0){return 'row-even'}else {return 'row-odd'}}); | |
// create a cell in each row for each column | |
var cells = rows.selectAll('td') | |
.data(function (row) { | |
return columns.map(function (column) { | |
return {column: column, value: row[column]}; | |
}); | |
}) | |
.enter() | |
.append('td') | |
.attr("class", function (d,i) { return columns[i]; }) | |
.html(function (d) { return d.value; }); | |
rows.selectAll("td.Sparkline") | |
.selectAll(".spark") | |
.data(function(d,i){ return [type[i]]; }) | |
.enter() | |
.append("svg") | |
.attr("class", "spark") | |
.attr("height", 25) | |
.attr("width", 200) | |
.append("path") | |
.attr("d", function(d,i){ d.line = this; return line(d.values); }) | |
.attr("stroke-width", 1) | |
.attr("stroke", "#c00000") | |
.attr("fill", "none"); | |
console.log("newData", newData); | |
return table; | |
}; | |
</script> | |
</body> | |
</html> |