Skip to content

Instantly share code, notes, and snippets.

@krosenberg

krosenberg/README.md

Last active January 2, 2016 04:09
Show Gist options
  • Save krosenberg/8248442 to your computer and use it in GitHub Desktop.
Save krosenberg/8248442 to your computer and use it in GitHub Desktop.
Download ZIP
Minimal Charts
Raw
README.md

These work well when a small graph is needed in a small space. Includes minimal mouseover interaction.

Raw
index.html
<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