Last active
November 3, 2015 18:55
-
-
Save jadiehm/abaf7ce59ebf28d6af75 to your computer and use it in GitHub Desktop.
Responsive bar chart d3
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"> | |
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
<style type="text/css"> | |
/*css to go here*/ | |
body { | |
font-family: 'Proxima-Nova', sans-serif; | |
font-size: 12px; | |
} | |
.g-hed { | |
text-align: left; | |
text-transform: uppercase; | |
font-weight: bold; | |
font-size:22px; | |
margin: 3px 0; | |
} | |
.g-source-bold { | |
text-align: left; | |
font-size:10px; | |
font-weight: bold; | |
} | |
.g-source { | |
margin: 10px 0; | |
} | |
.g-source-bold { | |
text-align: left; | |
font-size:10px; | |
} | |
.g-intro { | |
font-size: 16px; | |
margin: 0px 0px 10px 0px; | |
} | |
.g-num { | |
fill:#2f5491; | |
} | |
.g-labels { | |
font-family: 'Proxima-Nova', sans-serif; | |
fill: white; | |
font-weight: bold; | |
font-size: 13px; | |
} | |
.axis line { | |
fill: none; | |
stroke: #ccc; | |
stroke-dasharray: 2px 3px; | |
shape-rendering: crispEdges; | |
stroke-width: 1px; | |
} | |
.axis text { | |
font-family: 'Proxima-Nova', sans-serif; | |
font-size: 13px; | |
pointer-events: none; | |
fill: #7e7e7e; | |
} | |
.domain { | |
display: none; | |
} | |
.y.axis text { | |
text-anchor: end !important; | |
font-size:14px; | |
fill: #000000; | |
} | |
.y.axis line { | |
display: none; | |
} | |
.g-baseline line { | |
stroke:#000; | |
stroke-width: 1px; | |
stroke-dasharray:none; | |
} | |
</style> | |
<body> | |
<h5 class="g-hed"></h5> | |
<p class="g-intro"></p> | |
<div class="g-chart"></div> | |
<div class="g-source"><span class="g-source-bold"></span><span class="g-source-reg"></span></div> | |
</div> | |
</body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
<script> | |
//Margin conventions | |
var margin = {top: 10, right: 50, bottom: 20, left: 50}; | |
var widther = window.outerWidth; | |
var width = widther - margin.left - margin.right, | |
height = 250 - margin.top - margin.bottom; | |
//Appends the svg to the chart-container div | |
var svg = d3.select(".g-chart").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
//Creates the xScale | |
var xScale = d3.scale.linear() | |
.range([0,width]); | |
//Creates the yScale | |
var y0 = d3.scale.ordinal() | |
.rangeBands([height, 0], 0.2) | |
.domain(["Cat5", "Cat4", "Cat3", "Cat2", "Cat1"]); | |
//Defines the y axis styles | |
var yAxis = d3.svg.axis() | |
.scale(y0) | |
.orient("left"); | |
//Defines the y axis styles | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.tickFormat(function(d) {return d + "%"; }) | |
.tickSize(height) | |
.ticks(numTicks(width)); | |
//Loads the data | |
d3.csv("template.csv", ready); | |
function ready(err, data) { | |
if (err) throw "error loading data"; | |
console.log("hello"); | |
//FORMAT data | |
data.forEach(function(d) { | |
d.num = +d.num; | |
}); | |
console.log(data); | |
//Appends chart headline | |
d3.select(".g-hed").text("Chart headline goes here"); | |
//Appends chart intro text | |
d3.select(".g-intro").text("Chart intro text goes here. Write a short sentence describing the chart here."); | |
//Sets the max for the xScale | |
var maxX = d3.max(data, function(d) { return d.num; }); | |
//Defines the xScale max | |
xScale.domain([0, maxX ]); | |
//Appends the y axis | |
var yAxisGroup = svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
//Appends the x axis | |
var xAxisGroup = svg.append("g") | |
.attr("class", "x axis") | |
.call(xAxis); | |
//Binds the data to the bars | |
var categoryGroup = svg.selectAll(".g-category-group") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "g-category-group") | |
.attr("transform", function(d) { | |
return "translate(0," + y0(d.category) + ")"; | |
}); | |
//Appends first bar | |
var bars = categoryGroup.append("rect") | |
.attr("width", function(d) { return xScale(d.num); }) | |
.attr("height", y0.rangeBand()/1.5 ) | |
.attr("class", "g-num") | |
.attr("transform", "translate(0,4)"); | |
//Binds data to labels | |
var labelGroup = svg.selectAll("g-num") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "g-label-group") | |
.attr("transform", function(d) { | |
return "translate(0," + y0(d.category) + ")"; | |
}); | |
//Appends labels | |
var barLabels = labelGroup.append("text") | |
.text(function(d) {return d.num;}) | |
.attr("x", function(d) { return xScale(d.num) - 20; }) | |
.attr("y", y0.rangeBand()/1.7 ) | |
.attr("class", "g-labels"); | |
//Appends chart source | |
d3.select(".g-source-bold") | |
.text("SOURCE: ") | |
.attr("class", "g-source-bold"); | |
d3.select(".g-source-reg") | |
.text("Chart source info goes here") | |
.attr("class", "g-source-reg"); | |
//RESPONSIVENESS | |
d3.select(window).on("resize", resized); | |
function resized() { | |
//new margin | |
var newMargin = {top: 10, right: 80, bottom: 20, left: 50}; | |
//Get the width of the window | |
var w = d3.select(".g-chart").node().clientWidth; | |
console.log("resized", w); | |
//Change the width of the svg | |
d3.select("svg") | |
.attr("width", w); | |
//Change the xScale | |
xScale | |
.range([0, w - newMargin.right]); | |
//Update the bars | |
bars | |
.attr("width", function(d) { return xScale(d.num); }); | |
//Updates bar labels | |
barLabels | |
.attr("x", function(d) { return xScale(d.num) - 20; }) | |
.attr("y", y0.rangeBand()/1.7 ) | |
//Updates xAxis | |
xAxisGroup | |
.call(xAxis); | |
//Updates ticks | |
xAxis | |
.scale(xScale) | |
.ticks(numTicks(w)); | |
}; | |
} | |
//Determines number of ticks base on width | |
function numTicks(widther) { | |
if (widther <= 400) { | |
return 4 | |
console.log("return 4") | |
} | |
else { | |
return 10 | |
console.log("return 5") | |
} | |
} | |
</script> |
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
category | num | |
---|---|---|
Cat1 | 45 | |
Cat2 | 23 | |
Cat3 | 19 | |
Cat4 | 7 | |
Cat5 | 35 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment