Skip to content

Instantly share code, notes, and snippets.

@smbriones

smbriones/README.md Secret

Last active August 29, 2015 14:20
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 smbriones/e8b58d1e2c3c64eec1f8 to your computer and use it in GitHub Desktop.
Save smbriones/e8b58d1e2c3c64eec1f8 to your computer and use it in GitHub Desktop.
Download ZIP
Visualization and Infographics with D3: Module 6
Raw
README.md

EXERCISE: If your data set doesn't include date values, find a new data set that does. Create a line chart (or area chart) that represents time on the x axis, and quantitative values on the y axis. Include at least two values on the y axis, so viewers can examine the relationship between values that have changed over time. If using areas, consider changing the opacity or layering order, to make sure all values are visible. Make sure the axes correctly label the new values. Post the bl.ocks.org link to your working chart in the forums, and explain what the chart represents as well as your visual design decisions.

Raw
data.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 4 columns, instead of 5. in line 1.
date,UK,Denmark,Germany
3/17/2014,49.2,59.5,52,
4/14/2014,49.4,62,55.2,
5/12/2014,49.8,59.3,54.7,
6/16/2014,50.1,62.2,54.9,
7/14/2014,51.3,60.9,55.2,
8/18/2014,49.8,58.1,52.9,
9/15/2014,49.1,58,52.9,
10/13/2014,47.7,55.1,50.8,
11/17/2014,44.1,52.1,46.9,
12/15/2014,38.9,43.3,38.7,
1/12/2015,32.4,38.5,33.9,
2/16/2015,31.4,41.9,36.3
Raw
exercise6.css
.d3js h2 { margin: 3em 0 1em 0; }
.d3js h5 { margin-top: 5em; }
.chart-container {
font-family: Helvetica, sans-serif;
padding: 3em;
}
.line-chart { margin-bottom: 5em; }
.line-chart h2 { margin: 0 0 0.2em 0; }
.line-chart p {
color: #8e979b;
font-size: 0.8em;
margin: 0 0 2em 0;
}
.line-chart a {
color: #8e979b;
text-decoration: underline;
}
.axis path,
.axis line {
fill: none;
stroke: #667176;
shape-rendering: crispEdges;
}
.axis text {
fill: #667176;
font-family: sans-serif;
font-size: 11px;
}
.xaxis path,
.xaxis line,
.yaxis path,
.yaxis line {
fill: none;
stroke: black;
}
.country-name {
margin: 0 !important;
}
.key-dot {
display: inline-block;
height: 10px;
margin-right: 1em;
width: 10px;
}
.uk { background: #042A7D; }
.denmark { background: #C60C30; }
.germany { background: #FFCE00; }
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stephanie Briones</title>
<link rel="stylesheet" type="text/css" href="exercise6.css">
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<div class="container d3js">
<section class="chart-container">
<div class="line-chart">
<h2>Price of Fuel</h2>
<p>
Premium Unleaded fuel prices (pence per liter) from March
2014 to March 2015 for the UK, Denmark, and Germany.
<a href="https://www.gov.uk/government/statistical-data-sets/comparisons-of-industrial-and-domestic-energy-prices-monthly-figures">Resource</a>
</p>
<p class="country-name"><span class="key-dot uk"></span>UK</p>
<p class="country-name"><span class="key-dot denmark"></span>Denmark</p>
<p class="country-name"><span class="key-dot germany"></span>Germany</p>
</div>
</section>
<script type="text/javascript">
var w = 900
var h = 500
var padding = [ 40, 40, 40, 30 ]; //Top, right, bottom, left
var dateFormat = d3.time.format("%m/%d/%Y")
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range ([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(12)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(7);
var lineUK = d3.svg.line()
.x(function(d) { return xScale(dateFormat.parse(d.date)); })
.y(function(d) { return yScale(d.UK); });
var lineDenmark = d3.svg.line()
.x(function(d) { return xScale(dateFormat.parse(d.date)); })
.y(function(d) { return yScale(d.Denmark); });
var lineGermany = d3.svg.line()
.x(function(d) { return xScale(dateFormat.parse(d.date)); })
.y(function(d) { return yScale(d.Germany); });
var svg = d3.select(".line-chart")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("data.csv", function(data) {
xScale.domain([
d3.min(data, function(d) { return dateFormat.parse(d.date);
}),
d3.max(data, function(d) { return dateFormat.parse(d.date);
})
]);
yScale.domain([80, 20]);
svg.data([ data ])
.append("path")
.attr("class", "line")
.attr("d", lineUK)
.attr("fill", "none")
.attr("stroke", "#042A7D")
.attr("stroke-width", 3);
svg.data([ data ])
.append("path")
.attr("class", "line")
.attr("d", lineDenmark)
.attr("fill", "none")
.attr("stroke", "#C60C30")
.attr("stroke-width", 3);
svg.data([ data ])
.append("path")
.attr("class", "line")
.attr("d", lineGermany)
.attr("fill", "none")
.attr("stroke", "#FFCE00")
.attr("stroke-width", 3);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
.call(yAxis);
});
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment