Skip to content

Instantly share code, notes, and snippets.

@CBasis

CBasis/.block

Created January 7, 2018 19:52
Show Gist options
  • Save CBasis/4bae308376367972181dcc21e214f122 to your computer and use it in GitHub Desktop.
Save CBasis/4bae308376367972181dcc21e214f122 to your computer and use it in GitHub Desktop.
Download ZIP
Basic CSV Parsing
Raw
.block
license: mit
Raw
bar.js
//Simple d3.js barchart example to illustrate d3 selections
//other good related tutorials
//http://www.recursion.org/d3-for-mere-mortals/
//http://mbostock.github.com/d3/tutorial/bar-1.html
var w = 850
var h = 400
var bars = function(data)
{
max = d3.max(data, function(d)
{
return d.value
})
//nice breakdown of d3 scales
//http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
y = d3.scale.linear()
.domain([0, max])
.range([0, h])
x = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([0, w], .2)
var vis = d3.select("#barchart")
console.log("vis", vis)
//a good written tutorial of d3 selections coming from protovis
//http://www.jeromecukier.net/blog/2011/08/09/d3-adding-stuff-and-oh-understanding-selections/
var bars = vis.selectAll("rect.bar")
.data(data)
//update
bars
.attr("fill", "#0a0")
.attr("stroke", "#050")
//enter
bars.enter()
.append("svg:rect")
.attr("class", "bar")
.attr("fill", "#800")
.attr("stroke", "#800")
//exit
bars.exit()
.remove()
//apply to everything (enter and update)
bars
.attr("stroke-width", 4)
.attr("height", function(d,i)
{
return y(d.value);
})
.attr("width", x.rangeBand())
.attr("transform", function(d,i) {
return "translate(" + [x(i), h - y(d.value)] + ")"
})
}
function init()
{
//setup the svg
var svg = d3.select("#svg")
.attr("width", w+100)
.attr("height", h+100)
console.log("svg", svg)
svg.append("svg:rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("stroke", "#000")
.attr("fill", "none")
svg.append("svg:g")
.attr("id", "barchart")
.attr("transform", "translate(50,50)")
}
Raw
csv.js
var prices_csv = function()
{
var parse = d3.time.format("%m/%d/%Y").parse;
d3.csv("prices.csv", function(prices)
{
//prices is an array of json objects containing the data in from the csv
console.log("prices:", prices)
data = prices.map(function(d)
{
//each d is one line of the csv file represented as a json object
console.log("d", d)
month = parse(d.month).getMonth();
console.log("month:", d.month, month)
//we slice the dollar sign off then convert to a number with the + sign
//slicing works like "$216".slice(1) gives you 216,
//you can also give it a range like "$216 asdf".slice(1,4) gives you 216
p = d.price
price = +p.slice(1)
console.log("price:", p, price);
return {"month": month, "value":price} ;
})
console.log("data", data)
bars(data);
})
}
var trans_csv = function()
{
var parse = d3.time.format("%m/%d/%Y").parse;
d3.csv("trans.csv", function(trans)
{
//prices is an array of json objects containing the data in from the csv
console.log("trans:", trans)
data = trans.map(function(d)
{
//each d is one line of the csv file represented as a json object
console.log("d", d)
summer = +d.Summer
winter = +d.Winter
return {
//"winter": winter,
//"summer": summer
"value":winter
}
})
console.log("data", data)
bars(data);
})
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Template Example</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js"></script>
<script type="text/javascript" src="bar.js"></script>
<script type="text/javascript" src="list.js"></script>
<script type="text/javascript" src="csv.js"></script>
</head>
<body>
<button id="prices" value="Prices">Prices</button><button id="trans">Transmission Limits</button>
<button id="list">List</button><br>
<svg id="svg"></svg>
<script type="text/javascript">
d3.select("#prices").on("click", function(d,i)
{
prices_csv();
})
d3.select("#trans").on("click", function(d,i)
{
trans_csv();
})
d3.select("#list").on("click", function(d,i)
{
list_csv();
})
init();
</script>
</body>
</html>
Raw
list.js
//Simple d3.js barchart example to illustrate d3 selections
//other good related tutorials
//http://www.recursion.org/d3-for-mere-mortals/
//http://mbostock.github.com/d3/tutorial/bar-1.html
var w = 850
var h = 400
var bars = function(data)
{
max = d3.max(data, function(d)
{
return d.value
})
//nice breakdown of d3 scales
//http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
y = d3.scale.linear()
.domain([0, max])
.range([0, h])
x = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([0, w], .2)
var vis = d3.select("#barchart")
console.log("vis", vis)
//a good written tutorial of d3 selections coming from protovis
//http://www.jeromecukier.net/blog/2011/08/09/d3-adding-stuff-and-oh-understanding-selections/
var bars = vis.selectAll("rect.bar")
.data(data)
//update
bars
.attr("fill", "#0a0")
.attr("stroke", "#050")
//enter
bars.enter()
.append("svg:rect")
.attr("class", "bar")
.attr("fill", "#800")
.attr("stroke", "#800")
//exit
bars.exit()
.remove()
//apply to everything (enter and update)
bars
.attr("stroke-width", 4)
.attr("height", function(d,i)
{
return y(d.value);
})
.attr("width", x.rangeBand())
.attr("transform", function(d,i) {
return "translate(" + [x(i), h - y(d.value)] + ")"
})
}
function init()
{
//setup the svg
var svg = d3.select("#svg")
.attr("width", w+100)
.attr("height", h+100)
console.log("svg", svg)
svg.append("svg:rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("stroke", "#000")
.attr("fill", "none")
svg.append("svg:g")
.attr("id", "barchart")
.attr("transform", "translate(50,50)")
}
Raw
prices.csv
month price
2/1/1990 $67
3/1/1990 $75
4/1/1990 $75
5/1/1990 $73
6/1/1990 $70
7/1/1990 $68
8/1/1990 $74
9/1/1990 $76
10/1/1990 $74
11/1/1990 $70
12/1/1990 $73
1/1/1991 $69
2/1/1991 $71
3/1/1991 $72
4/1/1991 $71
5/1/1991 $67
6/1/1991 $66
7/1/1991 $64
8/1/1991 $63
9/1/1991 $67
10/1/1991 $63
11/1/1991 $64
12/1/1991 $63
1/1/1992 $61
2/1/1992 $56
3/1/1992 $56
4/1/1992 $54
5/1/1992 $49
6/1/1992 $48
7/1/1992 $49
8/1/1992 $46
9/1/1992 $47
10/1/1992 $53
11/1/1992 $57
12/1/1992 $64
1/1/1993 $58
2/1/1993 $57
3/1/1993 $55
4/1/1993 $51
5/1/1993 $54
6/1/1993 $55
7/1/1993 $61
8/1/1993 $68
9/1/1993 $72
10/1/1993 $68
11/1/1993 $70
12/1/1993 $72
1/1/1994 $69
2/1/1994 $72
3/1/1994 $76
4/1/1994 $81
5/1/1994 $108
6/1/1994 $128
7/1/1994 $191
8/1/1994 $182
9/1/1994 $202
10/1/1994 $186
11/1/1994 $168
12/1/1994 $149
1/1/1995 $152
2/1/1995 $152
3/1/1995 $163
4/1/1995 $160
5/1/1995 $156
6/1/1995 $142
7/1/1995 $133
8/1/1995 $142
9/1/1995 $125
10/1/1995 $120
11/1/1995 $118
12/1/1995 $100
1/1/1996 $100
2/1/1996 $111
3/1/1996 $106
4/1/1996 $107
5/1/1996 $110
6/1/1996 $106
7/1/1996 $100
8/1/1996 $103
9/1/1996 $97
10/1/1996 $99
11/1/1996 $97
12/1/1996 $90
1/1/1997 $100
2/1/1997 $122
3/1/1997 $137
4/1/1997 $142
5/1/1997 $180
6/1/1997 $155
7/1/1997 $135
8/1/1997 $133
9/1/1997 $133
10/1/1997 $121
11/1/1997 $118
12/1/1997 $130
1/1/1998 $131
2/1/1998 $131
3/1/1998 $120
4/1/1998 $120
5/1/1998 $114
6/1/1998 $104
7/1/1998 $97
8/1/1998 $101
9/1/1998 $96
10/1/1998 $95
11/1/1998 $98
12/1/1998 $101
1/1/1999 $98
2/1/1999 $92
3/1/1999 $89
4/1/1999 $86
5/1/1999 $90
6/1/1999 $86
7/1/1999 $78
8/1/1999 $77
9/1/1999 $72
10/1/1999 $76
11/1/1999 $88
12/1/1999 $96
1/1/2000 $82
2/1/2000 $76
3/1/2000 $73
4/1/2000 $70
5/1/2000 $69
6/1/2000 $65
7/1/2000 $64
8/1/2000 $58
9/1/2000 $57
10/1/2000 $56
11/1/2000 $52
12/1/2000 $48
1/1/2001 $49
2/1/2001 $49
3/1/2001 $49
4/1/2001 $47
5/1/2001 $49
6/1/2001 $47
7/1/2001 $43
8/1/2001 $43
9/1/2001 $41
10/1/2001 $42
11/1/2001 $44
12/1/2001 $43
1/1/2002 $43
2/1/2002 $44
3/1/2002 $49
4/1/2002 $50
5/1/2002 $47
6/1/2002 $46
7/1/2002 $45
8/1/2002 $43
9/1/2002 $48
10/1/2002 $51
11/1/2002 $55
12/1/2002 $52
1/1/2003 $54
2/1/2003 $54
3/1/2003 $50
4/1/2003 $52
5/1/2003 $53
6/1/2003 $49
7/1/2003 $51
8/1/2003 $52
9/1/2003 $54
10/1/2003 $52
11/1/2003 $50
12/1/2003 $52
1/1/2004 $59
2/1/2004 $60
3/1/2004 $61
4/1/2004 $59
5/1/2004 $60
6/1/2004 $64
7/1/2004 $58
8/1/2004 $57
9/1/2004 $61
10/1/2004 $61
11/1/2004 $68
12/1/2004 $78
1/1/2005 $79
2/1/2005 $89
3/1/2005 $101
4/1/2005 $98
5/1/2005 $100
6/1/2005 $96
7/1/2005 $88
8/1/2005 $85
9/1/2005 $79
10/1/2005 $83
11/1/2005 $86
12/1/2005 $87
1/1/2006 $101
2/1/2006 $97
3/1/2006 $93
4/1/2006 $94
5/1/2006 $90
6/1/2006 $86
7/1/2006 $89
8/1/2006 $96
9/1/2006 $96
10/1/2006 $96
11/1/2006 $103
12/1/2006 $108
1/1/2007 $106
2/1/2007 $104
3/1/2007 $100
4/1/2007 $99
5/1/2007 $100
6/1/2007 $107
7/1/2007 $106
8/1/2007 $108
9/1/2007 $113
10/1/2007 $116
11/1/2007 $114
12/1/2007 $118
1/1/2008 $122
2/1/2008 $139
3/1/2008 $136
4/1/2008 $127
5/1/2008 $127
6/1/2008 $131
7/1/2008 $133
8/1/2008 $131
9/1/2008 $127
10/1/2008 $108
11/1/2008 $108
12/1/2008 $103
1/1/2009 $108
2/1/2009 $108
3/1/2009 $106
4/1/2009 $112
5/1/2009 $123
6/1/2009 $119
7/1/2009 $113
8/1/2009 $117
9/1/2009 $116
10/1/2009 $121
11/1/2009 $120
12/1/2009 $125
1/1/2010 $127
2/1/2010 $123
3/1/2010 $125
4/1/2010 $127
5/1/2010 $128
6/1/2010 $142
7/1/2010 $153
8/1/2010 $157
9/1/2010 $164
10/1/2010 $162
11/1/2010 $174
12/1/2010 $184
1/1/2011 $197
2/1/2011 $216
3/1/2011 $224
Raw
trans.csv
IRGEX IRGIM Winter Summer
1 18 0.82 0.82
1 33 0.28 0.28
2 14 1.9 1
3 4 0.27 0.27
3 11 5.2 1.1
4 3 0.8 0.8
4 13 0.32 0.32
4 17 2.08 2.04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment