These work well when a small graph is needed in a small space. Includes minimal mouseover interaction.
Last active
January 2, 2016 04:09
-
-
Save krosenberg/8248442 to your computer and use it in GitHub Desktop.
Minimal Charts
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
<html> | |
<head> | |
<title>Minimal D3 area and line charts</title> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> | |
</head> | |
<style> | |
body { | |
font-family: 'proxima_nova_ltlight', sans-serif; | |
} | |
div { | |
margin: 30px; | |
} | |
text { | |
fill: #7f8c8c; | |
} | |
line { | |
stroke: #7f8c8c; | |
} | |
</style> | |
<body> | |
<div id="area"></div> | |
<div id="bar"></div> | |
<script type="text/javascript"> | |
function areaGraph() { | |
var data = [ | |
{"date":1389023949653,"value":45}, | |
{"date":1389024009653,"value":69}, | |
{"date":1389024069653,"value":21}, | |
{"date":1389024129653,"value":73}, | |
{"date":1389024189653,"value":14}, | |
{"date":1389024249653,"value":41}, | |
{"date":1389024309653,"value":35}, | |
{"date":1389024369653,"value":46}, | |
{"date":1389024429653,"value":75}, | |
{"date":1389024489653,"value":77}, | |
{"date":1389024549653,"value":4}, | |
{"date":1389024609653,"value":49}, | |
{"date":1389024669653,"value":25}, | |
{"date":1389024729653,"value":111}, | |
{"date":1389024789653,"value":41}, | |
{"date":1389024849653,"value":14}, | |
{"date":1389024909653,"value":52}, | |
{"date":1389024969653,"value":40}, | |
{"date":1389025029653,"value":66}, | |
{"date":1389025089653,"value":11}, | |
{"date":1389025149653,"value":30}, | |
{"date":1389025209653,"value":2}, | |
{"date":1389025269653,"value":2}, | |
{"date":1389025329653,"value":95}, | |
{"date":1389025389653,"value":102}, | |
{"date":1389025449653,"value":76}, | |
{"date":1389025509653,"value":97}, | |
{"date":1389025569653,"value":26}, | |
{"date":1389025629653,"value":28}, | |
{"date":1389025689653,"value":46}, | |
{"date":1389025749653,"value":71}, | |
{"date":1389025809653,"value":7}, | |
{"date":1389025869653,"value":79}, | |
{"date":1389025929653,"value":20}, | |
{"date":1389025989653,"value":77}, | |
{"date":1389026049653,"value":25}, | |
{"date":1389026109653,"value":2}, | |
{"date":1389026169653,"value":82}, | |
{"date":1389026229653,"value":14}, | |
{"date":1389026289653,"value":56}, | |
{"date":1389026349653,"value":33}, | |
{"date":1389026409653,"value":124}, | |
{"date":1389026469653,"value":30}, | |
{"date":1389026529653,"value":74}, | |
{"date":1389026589653,"value":2}, | |
{"date":1389026649653,"value":20}, | |
{"date":1389026709653,"value":42}, | |
{"date":1389026769653,"value":93}, | |
{"date":1389026829653,"value":0}, | |
{"date":1389026889653,"value":28}, | |
{"date":1389026949653,"value":24}, | |
{"date":1389027009653,"value":38}, | |
{"date":1389027069653,"value":48}, | |
{"date":1389027129653,"value":60}, | |
{"date":1389027189653,"value":3}, | |
{"date":1389027249653,"value":62}, | |
{"date":1389027309653,"value":6}, | |
{"date":1389027369653,"value":96}, | |
{"date":1389027429653,"value":16}, | |
{"date":1389027489653,"value":6} | |
] | |
var margin = {top: 0, right: 0, bottom: 15, left:0}, | |
width = 300, | |
height = 100, | |
mWidth = width - margin.left - margin.right, | |
mHeight = height - margin.top - margin.bottom, | |
format = d3.time.format("%m/%d %H:%M"); | |
var x = d3.time.scale().range([0, mWidth]); | |
var y = d3.scale.linear().range([height - margin.top - margin.bottom, 0]); | |
var area = d3.svg.area() | |
.x(function(d) { return x(d.date); }) | |
.y0(mHeight) | |
.y1(function(d) { return y(d.value); }) | |
.interpolate("linear"); | |
x.domain(d3.extent(data, function(d) { return d.date; })); | |
y.domain([0, d3.max(data, function(d) {return d.value})]); | |
var svg = d3.select('#area').append('svg') | |
.attr('class', 'chart') | |
.attr('width', width) | |
.attr('height', height) | |
.append('g') | |
.attr('transform', 'translate(' + 0 + ', ' + 4 + ')'); | |
var areaBlob = svg.append("path") | |
.datum(data) | |
.attr("class", "area") | |
.attr("d", area) | |
.attr("opacity", "1") | |
.attr("fill", "lightgray"); | |
//used to get mouseover values | |
var bars = svg.selectAll('.chart') | |
.data(data) | |
.enter().append('rect') | |
.attr('x', function(d) {return x(d.date)}) | |
.attr('y', 0) | |
.attr('width', mWidth/data.length+.5) | |
.attr('height', mHeight) | |
.attr('transform', 'translate('+(mWidth/data.length+0.5)/-2+',0)') | |
.attr('fill', 'transparent') | |
.attr('opacity', 0.5) | |
.on("mouseover", function(d) { | |
d3.select(this).attr('fill', 'white') | |
startDate.text(null); | |
endDate.text(format(new Date(d.date)) + ': '+d.value + '%'); | |
}) | |
.on("mouseout", function() { | |
d3.select(this).attr('fill', 'transparent') | |
startDate.text(format(new Date(data[0].date))); | |
endDate.text(format(new Date(data[data.length-1].date))); | |
}); | |
var startDate = svg.append('text') | |
.text(format(new Date(data[0].date))) | |
.attr('x', 0) | |
.attr('y', mHeight + 10) | |
.attr('font-size', 10); | |
var endDate = svg.append('text') | |
.text(format(new Date(data[data.length-1].date))) | |
.attr('x', mWidth) | |
.attr('y', mHeight + 10) | |
.attr('font-size', 10) | |
.attr('text-anchor', 'end'); | |
var xAxis = svg.append("line") | |
.attr("x1", 0) | |
.attr("x2", mWidth) | |
.attr("y1", mHeight+.5) | |
.attr("y2", mHeight+.5); | |
var yAxis = svg.append("line") | |
.attr("x1", 0.5) | |
.attr("x2", 0.5) | |
.attr("y1", mHeight) | |
.attr("y2", 0); | |
var maxStub = svg.append("line") | |
.attr("x1", 0) | |
.attr("x2", 5) | |
.attr("y1", 0.5) | |
.attr("y2", 0.5); | |
var maxStubText = svg.append('text') | |
.text(d3.max(data, function(d) {return d.value})+'%') | |
.attr('x', 8) | |
.attr('y', 4) | |
.attr('font-size', 9); | |
} | |
function barGraph() { | |
var data = [ | |
{"date":1389023949653,"value":45}, | |
{"date":1389024009653,"value":69}, | |
{"date":1389024069653,"value":21}, | |
{"date":1389024129653,"value":73}, | |
{"date":1389024189653,"value":14}, | |
{"date":1389024249653,"value":41}, | |
{"date":1389024309653,"value":35}, | |
{"date":1389024369653,"value":46}, | |
{"date":1389024429653,"value":75}, | |
{"date":1389024489653,"value":77}, | |
{"date":1389024549653,"value":4}, | |
{"date":1389024609653,"value":49}, | |
{"date":1389024669653,"value":25}, | |
{"date":1389024729653,"value":111}, | |
{"date":1389024789653,"value":41}, | |
{"date":1389024849653,"value":14}, | |
{"date":1389024909653,"value":52}, | |
{"date":1389024969653,"value":40}, | |
{"date":1389025029653,"value":66}, | |
{"date":1389025089653,"value":11}, | |
{"date":1389025149653,"value":30}, | |
{"date":1389025209653,"value":2}, | |
{"date":1389025269653,"value":2}, | |
{"date":1389025329653,"value":95}, | |
{"date":1389025389653,"value":102}, | |
{"date":1389025449653,"value":76}, | |
{"date":1389025509653,"value":97}, | |
{"date":1389025569653,"value":26}, | |
{"date":1389025629653,"value":28}, | |
{"date":1389025689653,"value":46}, | |
{"date":1389025749653,"value":71}, | |
{"date":1389025809653,"value":7}, | |
{"date":1389025869653,"value":79}, | |
{"date":1389025929653,"value":20}, | |
{"date":1389025989653,"value":77}, | |
{"date":1389026049653,"value":25}, | |
{"date":1389026109653,"value":2}, | |
{"date":1389026169653,"value":82}, | |
{"date":1389026229653,"value":14}, | |
{"date":1389026289653,"value":56}, | |
{"date":1389026349653,"value":33}, | |
{"date":1389026409653,"value":124}, | |
{"date":1389026469653,"value":30}, | |
{"date":1389026529653,"value":74}, | |
{"date":1389026589653,"value":2}, | |
{"date":1389026649653,"value":20}, | |
{"date":1389026709653,"value":42}, | |
{"date":1389026769653,"value":93}, | |
{"date":1389026829653,"value":0}, | |
{"date":1389026889653,"value":28}, | |
{"date":1389026949653,"value":24}, | |
{"date":1389027009653,"value":38}, | |
{"date":1389027069653,"value":48}, | |
{"date":1389027129653,"value":60}, | |
{"date":1389027189653,"value":3}, | |
{"date":1389027249653,"value":62}, | |
{"date":1389027309653,"value":6}, | |
{"date":1389027369653,"value":96}, | |
{"date":1389027429653,"value":16}, | |
{"date":1389027489653,"value":6} | |
] | |
var margin = {top: 0, right: 0, bottom: 15, left:0}, | |
width = 300, | |
height = 100, | |
mWidth = width - margin.left - margin.right, | |
mHeight = height - margin.top - margin.bottom, | |
format = d3.time.format("%m/%d %H:%M"); | |
var x = d3.time.scale().range([0, mWidth]); | |
var y = d3.scale.linear().range([height - margin.top - margin.bottom, 0]); | |
x.domain(d3.extent(data, function(d) { return d.date; })); | |
y.domain([0, d3.max(data, function(d) {return d.value})]); | |
var svg = d3.select('#bar').append('svg') | |
.attr('class', 'chart') | |
.attr('width', width) | |
.attr('height', height) | |
.append('g') | |
.attr('transform', 'translate(' + 0 + ', ' + 4 + ')'); | |
var chart = svg.selectAll('.chart') | |
.data(data) | |
.enter().append('rect') | |
.attr('class', 'bar') | |
.attr('fill', '#6fbe44') | |
.attr('x', function(d) { return x(d.date); }) | |
.attr('y', function(d) { return mHeight - (mHeight - y(d.value)) }) | |
.attr('width', mWidth/data.length - 15/data.length) | |
.attr('height', function(d) { return mHeight - y(d.value) }) | |
; | |
//used to get mouseover values | |
var bars = svg.selectAll('.chart') | |
.data(data) | |
.enter().append('rect') | |
.attr('x', function(d) {return x(d.date)}) | |
.attr('y', 0) | |
.attr('width', mWidth/data.length+.5) | |
.attr('height', mHeight) | |
.attr('fill', 'transparent') | |
.attr('opacity', 0.5) | |
.on("mouseover", function(d) { | |
d3.select(this).attr('fill', 'white') | |
startDate.text(null); | |
endDate.text(format(new Date(d.date)) + ': '+d.value + '%'); | |
}) | |
.on("mouseout", function() { | |
d3.select(this).attr('fill', 'transparent') | |
startDate.text(format(new Date(data[0].date))); | |
endDate.text(format(new Date(data[data.length-1].date))); | |
}); | |
var startDate = svg.append('text') | |
.text(format(new Date(data[0].date))) | |
.attr('x', 0) | |
.attr('y', mHeight + 10) | |
.attr('font-size', 10); | |
var endDate = svg.append('text') | |
.text(format(new Date(data[data.length-1].date))) | |
.attr('x', mWidth) | |
.attr('y', mHeight + 10) | |
.attr('font-size', 10) | |
.attr('text-anchor', 'end'); | |
var xAxis = svg.append("line") | |
.attr("x1", 0) | |
.attr("x2", mWidth) | |
.attr("y1", mHeight+.5) | |
.attr("y2", mHeight+.5); | |
var yAxis = svg.append("line") | |
.attr("x1", 0.5) | |
.attr("x2", 0.5) | |
.attr("y1", mHeight) | |
.attr("y2", 0); | |
var maxStub = svg.append("line") | |
.attr("x1", 0) | |
.attr("x2", 5) | |
.attr("y1", 0.5) | |
.attr("y2", 0.5); | |
var maxStubText = svg.append('text') | |
.text(d3.max(data, function(d) {return d.value})+'%') | |
.attr('x', 8) | |
.attr('y', 4) | |
.attr('font-size', 9); | |
} | |
areaGraph(); | |
barGraph(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment