Created
May 11, 2015 17:04
-
-
Save joshkh/1baab7f3d55b718c0811 to your computer and use it in GitHub Desktop.
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
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.bar { | |
fill: steelblue; | |
} | |
.bar:hover { | |
fill: brown; | |
} | |
.axis { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.chart { | |
width: 100%; | |
} | |
.chart rect { | |
fill: steelblue; | |
} | |
.chart text { | |
fill: white; | |
font: 10px sans-serif; | |
text-anchor: end; | |
} | |
</style> | |
<body> | |
<svg id="mychart" class="chart" style="width: 100%;"></svg> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var svg = d3.select("#mychart"); | |
var colors = d3.scale.category20b(); | |
// Will hold our data | |
var alldata = null | |
// Original Width | |
var width = parseInt(svg.style("width")); | |
// Store our scale so that it's accessible by all: | |
var x= null; | |
// Static bar type: | |
var barHeight = 20; | |
var render = function() { | |
x = d3.scale.linear() | |
.domain([0, d3.max(data, function(d) {return d[1]})]) | |
.range([0, width]); | |
// Size our SVG tall enough so that it fits each bar. | |
// Width was already defined when we loaded. | |
svg.attr("height", barHeight * data.length); | |
// Draw our elements!! | |
var bar = svg.selectAll("g") | |
.data(data) | |
// New bars: | |
bar.enter().append("g") | |
.attr("transform", function(d, i) { | |
return "translate(" + x(d[0]) + "," + i * barHeight + ")"; | |
}); | |
bar.append("rect") | |
.attr("width", function(d) { return range(d)}) | |
.attr("height", barHeight - 1) | |
.style("fill", function(d, i) { console.log("index is", i); return colors(i)}); | |
bar.append("text") | |
.attr("x", function(d) { return range(d) - 3; }) | |
.attr("y", barHeight / 2) | |
.attr("dy", ".35em") | |
.text(function(d) { return d[1]; }); | |
} | |
var range = function(d) { | |
var beginning = x(d[0]); | |
var end = x(d[1]); | |
var range = end - beginning; | |
console.log("range", end - beginning); | |
return range; | |
} | |
var rescale = function() { | |
// The new width of the SVG element | |
var newwidth = parseInt(svg.style("width")); | |
// Our input hasn't changed (domain) but our range has. Rescale it! | |
x.range([0, newwidth]); | |
// Use our existing data: | |
var bar = svg.selectAll("g").data(data) | |
bar.attr("transform", function(d, i) { | |
return "translate(" + x(d[0]) + "," + i * barHeight + ")"; | |
}); | |
// For each bar group, select the rect and resposition it using the new scale. | |
bar.select("rect") | |
.attr("width", function(d) { return range(d); }) | |
.attr("height", barHeight - 1) | |
.style("fill", function(d, i) { return colors(i)}); | |
// Also reposition the bars using the new scales. | |
bar.select("text") | |
.attr("x", function(d) { return range(d) - 3; }) | |
.attr("y", barHeight / 2) | |
.attr("dy", ".35em") | |
.text(function(d) { return d[1]; }); | |
} | |
// Fetch our JSON and feed it to the draw function | |
d3.json("data.json", function(returned) { | |
data = returned.results; | |
render(); | |
}); | |
// Rescale it when the window resizes: | |
d3.select(window).on("resize", rescale); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Example data.json: