Skip to content

Instantly share code, notes, and snippets.

@sallen927
Created April 26, 2015 23:12
Show Gist options
  • Save sallen927/985106630ea67e132a40 to your computer and use it in GitHub Desktop.
Save sallen927/985106630ea67e132a40 to your computer and use it in GitHub Desktop.
Question-Lines not showing up
year clientsserved
2010 296
2011 553
2012 2469
2013 3003
2014 2789
2015 2211
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Participants vs. Clients</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Program participants vs. Clients by Program</h1>
<p>Comparison between program participants and clients served </p>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
var dateFormat = d3.time.format("%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(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(d.expenses);
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("ParticipantsServed.csv", function(participantsData) {
d3.csv("ClientsServed.csv", function(clientsData) {
var mergedData = participantsData.concat(clientsData);
xScale.domain([
d3.min(mergedData, function(d) {
return dateFormat.parse(d.year);
}),
d3.max(mergedData, function(d) {
return dateFormat.parse(d.year);
})
]);
yScale.domain([
d3.max(mergedData, function(d) {
return +d.participantsserved;
}),
0
]);
svg.data([ participantsData ])
.append("path")
.attr("class", "line participants")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2);
svg.data([ clientsData ])
.append("path")
.attr("class", "line clients")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);
});
});
</script>
</body>
</html>L
year participantsserved
2010 623
2011 1336
2012 4384
2013 6376
2014 6213
2015 8645
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment