Skip to content

Instantly share code, notes, and snippets.

@jhubley

jhubley/Readme.md

Last active August 10, 2021 17:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhubley/f266b86648c0ffb5d45e to your computer and use it in GitHub Desktop.
Save jhubley/f266b86648c0ffb5d45e to your computer and use it in GitHub Desktop.
Download ZIP
html table with sparklines
Raw
Readme.md

HTML table with sparklines

Raw
data.json
[
{
"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
}
]
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment