Skip to content

Instantly share code, notes, and snippets.

@sara-maria

sara-maria/amount_over_time.csv

Last active September 25, 2017 15:51
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 sara-maria/b1bef331b88f601d00029d53e99c9e4f to your computer and use it in GitHub Desktop.
Save sara-maria/b1bef331b88f601d00029d53e99c9e4f to your computer and use it in GitHub Desktop.
Download ZIP
Graph #1
Raw
amount_over_time.csv
amount date
920 1/1/07
550 3/1/07
620 4/1/07
518 4/9/07
462 4/19/07
448 5/20/07
321 6/17/07
327 7/20/07
328 8/15/07
276 9/15/07
244 10/20/07
260 12/2/07
232 1/14/08
300 2/20/08
317 4/2/08
297 5/28/08
357 7/1/08
375 8/15/08
430 9/15/08
603 11/12/08
660 12/1/08
1063 1/23/09
820 2/18/09
1166 3/9/09
1026 4/1/09
992 4/22/09
772 5/13/09
700 6/2/09
544 6/24/09
475 7/19/09
406 8/5/09
311 8/26/09
280 9/17/09
159 10/8/09
147 10/15/09
159 11/5/09
230 12/5/09
232 12/31/09
411 4/3/10
427 5/3/10
571 6/28/10
691 8/16/10
766 8/17/10
758 9/30/10
1238 11/16/10
1440 12/10/10
1740 2/10/11
2690 3/3/11
2028 3/24/11
1716 4/13/11
1364 5/4/11
1175 6/1/11
835 6/16/11
826 6/20/11
779 7/27/11
653 8/18/11
778 12/27/11
1324 4/1/12
1415 5/14/12
2021 6/27/12
1971 8/13/12
2545 9/12/12
3001 10/16/12
2748 11/30/12
2470 12/13/12
2023 1/3/13
1671 1/24/13
1271 2/14/13
1145 3/7/13
998 3/28/13
893 4/18/13
775 5/10/13
805 5/27/13
1093 7/29/13
1795 11/3/13
2495 2/1/14
2974 4/7/14
2507 4/28/14
1905 5/28/14
1925 7/18/14
1680 9/14/14
1680 11/3/14
1654 12/24/14
2345 1/23/15
2135 2/27/15
2000 3/11/15
1200 4/1/15
1200 4/22/15
1375 5/13/15
1395 6/1/15
1340 6/23/15
1201 8/13/15
1222 9/3/15
1240 9/29/15
1300 10/29/15
1231 11/19/15
1432 1/27/16
2231 4/4/16
2449 5/11/16
1900 6/14/16
1300 9/7/16
1085 12/6/16
1075 3/2/17
1142 6/1/17
1420 9/25/17
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<style>
/*
*{
border: 1px solid orange !important;
}
*/
body{
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #716c6c;
text-align: left;
border: 15px;
width: 800px;
height: 800px;
}
h2 {
margin-left: 15px;
margin-bottom: 1px;
font-size: 30px;
}
h3{
margin-left: 15px;
margin-top: 0px;
font-weight: 100;
font-size: 15px;
}
circle.dimple-series-1 {
fill:#716c6c;
}
path.dimple-line {
stroke:lightgray;
}
</style>
<script type="text/javascript">
function draw(data) {
"use strict";
var margin = {top: 20, right: 20, bottom: 20, left:25},
width = 800 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
d3.select("body").append("h2").text("Rollercoaster");
d3.select("body").append("h3").text("A 10 year ride");
var svg = d3.select("body")
.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 + ")")
.attr('class','chart');
// debugger;
var myChart = new dimple.chart(svg, data);
var x = myChart.addTimeAxis("x", "date","%m/%d/%Y","%m/%d/%y");
var y = myChart.addMeasureAxis("y", "amount");
x.title = "Date";
x.tickFormat = "%b '%y";
x.fontFamily = 'Lato';
// More frequent time labels:
//x.timePeriod = d3.time.months;
//x.timeInterval = 4;
y.title = "Value";
y.tickFormat = "d";
y.showGridlines = false;
y.fontFamily = 'Lato';
myChart.setBounds("10%", "10%", "80%", "75%")
myChart.addSeries(null, dimple.plot.line);
myChart.addSeries(null, dimple.plot.scatter);
myChart.draw();
// Post-drawing axis layout:
x.titleShape.remove();
// Add new text label for the y axis
y.titleShape.remove();
svg.append("text")
.attr("transform", "translate("+ .3*margin.left + "," + 1.9*margin.top + ")")
.style("text-anchor", "right ")
.style("font-size", "10px")
.text("Value");
// Add data source text labels
svg.append("text")
.attr("transform", "translate("+ (margin.left) + "," + (1.1*height) + ")")
.style("text-anchor", "left")
.style("font-size", "10px")
.text("Source: Collected throughout the years");
// Add "made by" and date labels
svg.append("a")
.attr("xlink:href", "http://www.saramaria.org/")
.append("text")
.text(" Sara Maria | October 2016 ")
.attr("transform", "translate("+ (.8*width) + "," + (1.1*height) + ")")
.style("fill", "#4C5D7C")
.style("font-weight", "300")
.style("text-anchor", "right")
.style("font-size", "10px")
};
</script>
</head>
<body>
<div class="content">
<script type="text/javascript">
d3.csv("amount_over_time.csv",draw);
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment