Skip to content

Instantly share code, notes, and snippets.

@jadiehm

jadiehm/index.html

Created November 4, 2015 15:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jadiehm/8ce8f72d53d216684ac6 to your computer and use it in GitHub Desktop.
Save jadiehm/8ce8f72d53d216684ac6 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive vertical bar chart
Raw
index.html
<!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-labels {
font-family: 'Proxima-Nova', sans-serif;
fill: white;
font-weight: bold;
font-size: 14px;
}
.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;
}
.y.axis text {
text-anchor: end !important;
font-size:14px;
fill: #7e7e7e;
}
.x.axis line {
display: none;
}
.x.axis tick:nth-child(even) {
display: none;
}
.domain {
display: none;
}
.bar:hover {
fill: #2f5491;
}
.bar{
fill: #5e8dc9;
}
.g-baseline line {
stroke: black;
stroke-dasharray: 0;
stroke-width: 1px;
}
.d3-tip {
line-height: 1;
font-size: 13px;
font-family: 'Proxima-Nova', sans-serif;
font-weight: bold;
padding: 5px;
background: rgba(255, 255, 255, 0.8);
color: #000000;
border: 1px solid #3f3f3f;
}
</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: 20, right: 50, bottom: 40, left: 25};
var widther = window.outerWidth;
var width = widther - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
//Parses date for correct time format
var parseDate = d3.time.format("%Y-%m").parse;
//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.ordinal()
.rangeRoundBands([0, width], .1);
//Creates the yScale
var yScale = d3.scale.linear()
.range([height, 0]);
//Filters through ordinal axis
var ticks = xScale.domain().filter(function(d,i){ return !(i%12); } );
//Defines the y axis styles
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(-width)
.tickPadding(8)
.orient("left");
//Loads the data
d3.csv("linetemplate.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;
d.date = parseDate(d.date);
});
console.log(data);
//Sets min and max on xScale
var xMin = d3.min(data, function(d) { return d.date;});
var xMax = d3.max(data, function(d) { return d.date;});
//Defines the x axis styles
var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(height)
.tickPadding(15)
.orient("bottom")
.tickValues([xMin, xMax])
.tickFormat(d3.time.format("%b %Y"));
//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.");
//tooltips
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-5, 0])
.html(function(d) {
return "<strong>" + d.num + "</strong>";
})
svg.call(tip);
//Sets scale domains
xScale.domain(data.map(function(d) { return d.date; }));
yScale.domain([0, d3.max(data, function(d) { return d.num; })]);
//Appends the y axis
var yAxisGroup = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll("g")
.classed("g-baseline", function(d) { return d == 0 });
//Appends the x axis
var xAxisGroup = svg.append("g")
.attr("class", "x axis")
.call(xAxis);
//Binds the data to the bars
var bar = svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.date); })
.attr("width", xScale.rangeBand())
.attr("y", function(d) { return yScale(d.num); })
.attr("height", function(d) { return height - yScale(d.num); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
//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: 40, 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
.rangeRoundBands([0, w - newMargin.right]);
//Update the bars
d3.selectAll("rect")
.attr("x", function(d) { return xScale(d.date); })
.attr("width", xScale.rangeBand()/1.25)
//Updates xAxis
xAxisGroup
.call(xAxis);
//Updates ticks
xAxis
.scale(xScale)
.ticks(numTicks(w));
//Updates yAxis
yAxis
.tickSize(w - newMargin.right)
};
}
//Determines number of ticks base on width
function numTicks(widther) {
if (widther <= 400) {
return 4
console.log("return 4")
}
else {
return 4
console.log("return 5")
}
}
</script>
Raw
linetemplate.csv
date num
2008-11 7.8
2008-12 8.3
2009-01 8.7
2009-02 8.9
2009-03 9.4
2009-04 9.5
2009-05 9.5
2009-06 9.6
2009-07 9.8
2009-08 10
2009-09 9.9
2009-10 9.9
2009-11 9.7
2009-12 9.8
2010-01 9.8
2010-02 9.9
2010-03 9.6
2010-04 9.4
2010-05 9.5
2010-06 9.6
2010-07 9.5
2010-08 9.5
2010-09 9.8
2010-10 9.4
2010-11 9.1
2010-12 9
2011-01 8.9
2011-02 9
2011-03 9
2011-04 9.1
2011-05 9.1
2011-06 9.1
2011-07 9
2011-08 8.9
2011-09 8.7
2011-10 8.5
2011-11 8.3
2011-12 8.3
2012-01 8.2
2012-02 8.1
2012-03 8.2
2012-04 8.2
2012-05 8.3
2012-06 8.1
2012-07 7.8
2012-08 7.2
2012-09 7
2012-10 6.9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment