Skip to content

Instantly share code, notes, and snippets.

@ajfarkas
Last active August 29, 2015 14:21
Show Gist options
  • Save ajfarkas/111293fbd1cc1d6f65a7 to your computer and use it in GitHub Desktop.
Save ajfarkas/111293fbd1cc1d6f65a7 to your computer and use it in GitHub Desktop.
Small Multiples: Temperature
[{"date":"2015-04-20","min":"26.8","max":"48.0"},{"date":"2015-04-21","min":"36.1","max":"57.2"},{"date":"2015-04-22","min":"29.3","max":"61.5"},{"date":"2015-04-23","min":"46.4","max":"48.6"},{"date":"2015-04-24","min":"28.2","max":"48.9"},{"date":"2015-04-25","min":"33.8","max":"52.5"},{"date":"2015-04-26","min":"29.3","max":"55.6"},{"date":"2015-04-27","min":"40.6","max":"57.0"},{"date":"2015-04-28","min":"41.5","max":"58.8"},{"date":"2015-04-29","min":"47.8","max":"59.4"},{"date":"2015-04-30","min":"44.8","max":"57.7"},{"date":"2015-05-01","min":"40.1","max":"63.7"},{"date":"2015-05-02","min":"30.9","max":"70.5"},{"date":"2015-05-03","min":"32.7","max":"73.6"},{"date":"2015-05-04","min":"34.5","max":"84.4"},{"date":"2015-05-05","min":"51.3","max":"74.3"},{"date":"2015-05-06","min":"34.2","max":"77.4"},{"date":"2015-05-07","min":"39.7","max":"84.2"},{"date":"2015-05-08","min":"44.8","max":"64.2"},{"date":"2015-05-09","min":"44.6","max":"70.0"},{"date":"2015-05-10","min":"46.2","max":"84.9"},{"date":"2015-05-11","min":"49.1","max":"66.6"},{"date":"2015-05-12","min":"47.8","max":"76.6"},{"date":"2015-05-13","min":"40.1","max":"62.1"},{"date":"2015-05-14","min":"30.2","max":"71.6"},{"date":"2015-05-15","min":"31.6","max":"74.3"},{"date":"2015-05-16","min":"41.7","max":"71.4"},{"date":"2015-05-17","min":"53.8","max":"77.5"},{"date":"2015-05-18","min":"50.2","max":"69.1"},{"date":"2015-05-19","min":"50.0","max":"71.6"},{"date":"2015-05-20","min":"41.5","max":"59.5"}]

Small multiples: a glance at these 31 graphs shows the variability in temperature... variability. Creating svgs, axes, and assigning axis domains and path definitions in functions allows for efficiency in creating multiples.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Maine Weather Trends</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href="weather.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<h1>Temperature Range</h1>
<h2>for 31 days in Stark, ME</h2>
<div id="temp"></div>
</body>
<script src="weather.js"></script>
</html>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding-top: 10px;
font-family: open sans, sans-serif;
}
h1, h2 {
font-weight: 300;
text-align: center;
}
h1 {
font-size: 30px;
text-transform: uppercase;
}
h2 {
font-size: 18px;
margin-bottom: 10px;
}
#temp {
position: relative;
width: 600px;
height: 500px;
margin: 0 auto;
}
svg { margin: -2px 0; }
.day {
display: inline-block;
width: 100px;
height: 100px;
background: white;
}
text { font-size: 11px;}
text.title { font-size: 13px;}
path, line {
fill: none;
stroke-width: .5px;
stroke: black;
}
path.line {
stroke-width: 4px;
}
var weather = []
var s = {
width: 150,
height: 100,
m: {
top: 20,
right: 20,
bottom: 10,
left: 25
}
}
s.plot = { w: s.width - s.m.left - s.m.right, h: s.height - s.m.top - s.m.bottom }
var line = {
x: d3.scale.ordinal().range([0, s.plot.w]),
y: d3.scale.linear().range([s.plot.h, 0])
}
line.xAxis = d3.svg.axis().scale(line.x).orient('bottom').tickSize(2, 0).ticks(2)
line.yAxis = d3.svg.axis().scale(line.y).orient('left').tickSize(2, 0).ticks(5)
var tempLine = d3.svg.line()
.x(function(d) { return line.x(d.type) })
.y(function(d) { return line.y(d.temp) })
d3.json('20150420-20150520_tempRange.json', function(err, data) {
if (err) console.error(err)
data.forEach(function(d, i) {
weather[i] = [
{ date: d.date,
type: "min",
temp: +d.min
},
{ date: d.date,
type: "max",
temp: +d.max
}
]
})
weather.forEach(function(day, i) {
//add div to display day in
d3.select('#temp').append('div')
.attr('class', 'd'+day[0].date + ' day')
//make grph for day
makeTempGraph(day, '.d'+day[0].date, day[0].date)
})
})
function createSVG(hook, newClass) {
var svg = d3.select(hook).append('svg')
.attr('viewBox', '0 0 '+s.width+' '+s.height)
.attr('width', '100%')
.attr('height', '100%')
svg.append('g')
.attr('class', newClass || '')
.attr('width', s.plot.w)
.attr('height', s.plot.h)
.attr('transform', 'translate('+s.m.left+','+s.m.top+')')
return svg
}
function createAxes(svg) {
// y-axis
var thisAxisY = svg.append('g')
.attr('class', 'y axis')
.call(line.yAxis)
thisAxisY.selectAll('text')
.attr('dx', 2)
// x-axis
var thisAxisX = svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,'+s.plot.h+')')
.call(line.xAxis)
}
//build temperature line graph
function makeTempGraph(weather, hook, title) {
line.x.domain(['min', 'max'])
line.y.domain([20, 100])
var tempSVG = createSVG(hook, 'temp')
var tempG = tempSVG.select('.temp')
createAxes(tempG)
//make line
tempG.append('path')
.datum(weather)
.attr('class', 'line')
.attr('d', tempLine)
.style('stroke', function() {
return '#'+
('0'+( Math.floor((weather[1].temp - weather[0].temp)*4.6) ).toString(16)).slice(-2)+
('0'+( Math.floor((weather[1].temp - weather[0].temp)*3.6) ).toString(16)).slice(-2)+
('0'+( Math.floor((weather[1].temp - weather[0].temp)*0) ).toString(16)).slice(-2)
})
tempSVG.append('text')
.attr('class', 'title')
.attr('transform', 'translate('+s.width/2+', 0)')
.attr('text-anchor', 'middle')
.text(title)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment