Skip to content

Instantly share code, notes, and snippets.

@makoto

makoto/index.html

Last active December 10, 2015 12:49
Show Gist options
  • Save makoto/4437066 to your computer and use it in GitHub Desktop.
Save makoto/4437066 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.xaxis path,
.xaxis line {
fill: black;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
.legend rect {
fill:white;
stroke:none;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
myfile = "vegetable.tsv";
//myfile = "http://localhost/d3project/vegetable.tsv";
//myfile = "http://greencracker.net/wp-content/uploads/2013/01/vegetable.csv"
var margin = {top: 20, right: 20, bottom: 20, left: 20},
padding = {top: 60, right: 60, bottom: 60, left: 60},
outerWidth = 500,
outerHeight = 400,
innerWidth = outerWidth - margin.left - margin.right,
innerHeight = outerHeight - margin.top - margin.bottom,
w = innerWidth - padding.left - padding.right,
h = innerHeight - padding.top - padding.bottom;
var parseDate = d3.time.format("%d-%b-%Y").parse; // dates in day-month abbreviation-year
var svg = d3.select("body")
.append("svg")
.attr("width", innerWidth)
.attr("height", innerHeight);
var x_scale_2012 = d3.time.scale()
.domain([ parseDate("01-Jan-12"), parseDate("31-Dec-12") ]) // scale an x axis to 2012
.range([0, w]);
var x_scale_2013 = d3.time.scale()
.domain([ parseDate("01-Jan-13"), parseDate("31-Dec-13") ]) // scale another x axis to 2013
.range([0, w]);
var monthNames = ["Jan", "Feb", "Mar", "April", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var xAxis_2012 = d3.svg.axis()
.scale(x_scale_2012) // set up x axis for 2012
.orient("bottom")
.ticks(12);
var xAxis_2013 = d3.svg.axis()
.scale(x_scale_2013) // set up x axis for 2013
.orient("bottom")
.ticks(12);
d3.tsv(myfile, function(data) {
data.forEach(function(d) {
d.DMY = parseDate(d.DMY); // parse strings into dates
d.Quantity = d.Quantity; // lbs of each vegetable
d.Color = d.Color; // hardwired into the csv for now. Pink for watermelons, red for tomatoes, green for lettuce, etc
d.Label = d.Label; // name of each vegetable: watermelon, lettuce, etc
});
//start a "for 1-1-12 < date < 12-31-12" loop? or ... ?
svg.selectAll(".dot") // 2012 harvests
.data(data)
.enter().append("circle")
.attr("cx", function(d) {
return x_scale_2012(d.DMY);
}) // assign each circle to the right date on the x axis
.attr("cy", ((h/2) * 0.33)) // put all circles at the same place on y axis
.attr("r", function(d) {
return (d.Quantity * 22);
}) // sets radius of each circle big enough to see
.attr("fill", function(d) {
return d.Color;
})
.attr("opacity", 0.4)
.on("mouseover", function(){return d3.select(this).attr("stroke", "black");}) // black outline on mouseover
.on("mouseout", function(){return d3.select(this).attr("stroke", "none");}) // no outline on mouseout
.append("title").text(function(d) { return d.Label; }); //tooltip with vegetable name
// for 1-1-13 < date < 12-31-13 ?
svg.selectAll(".dot") // 2013 harvests
.data(data)
.enter().append("circle")
.attr("cx", function(d) {
return x_scale_2013(d.DMY);
}) // assign each circle to the right date on the x axis
.attr("cy", ((h/2) * 0.66)) // put all circles at the same place on y axis
.attr("r", function(d) {
return (d.Quantity * 22);
}) // sets radius of each circle big enough to see
.attr("fill", function(d) {
return d.Color;
})
.attr("opacity", 0.4)
.on("mouseover", function(){return d3.select(this).attr("stroke", "black");}) // black outline on mouseover
.on("mouseout", function(){return d3.select(this).attr("stroke", "none");}) // no outline on mouseout
.append("title").text(function(d) { return d.Label; }); //tooltip with vegetable name
svg.append("g") // draw 2012 x-axis
.attr("class", "xaxis")
.attr("transform", "translate(0," + (h * 0.33) + ")") // put x axis 1/3 of the way down
.text(function(d, i) { return monthNames[i]; }) // and add month names
.call(xAxis_2012);
svg.append("g") // draw 2013 x-axis
.attr("class", "xaxis")
.attr("transform", "translate(0," + (h * 0.66) + ")") // put x axis 2/3 of the way down
.text(function(d, i) { return monthNames[i]; }) // and add month names
.call(xAxis_2013);
});
</script>
Raw
vegetable.tsv
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 3 columns, instead of 4 in line 1.
DMY Label Color Quantity
3-Sep-12 sweet potato Coral 8
26-Aug-12 watermelon HotPink 6
5-Jul-12 tomato Red 3.1
28-Jul-12 watermelon HotPink 2
30-Jul-12 watermelon HotPink 2
3-Aug-12 watermelon HotPink 2
16-Aug-12 watermelon HotPink 2
23-Aug-12 watermelon HotPink 2
3-Sep-12 watermelon HotPink 2
9-Jul-12 onion PapayaWhip 1.75
10-Jul-12 tomato Red 1.5
25-Jul-12 tomato Red 1.5
12-Nov-12 pepper LimeGreen 1.5
25-Jun-12 pepper LimeGreen 1.25
9-Jul-12 tomato Red 1.25
21-Jul-12 tomato Red 1.25
12-Jul-12 tomato Red 0.85
5-Jun-12 carrot Orange 0.8
1-Jun-12 carrot Orange 0.75
2-Jun-12 lettuce LawnGreen 0.75
29-Jun-12 tomato Red 0.75
29-Jun-12 tomato Red 0.75
2-Jul-12 carrot Orange 0.75
17-Jul-12 tomato Red 0.75
26-Aug-12 pepper LimeGreen 0.75
3-Sep-12 pepper LimeGreen 0.75
11-Jun-12 carrot Orange 0.6
4-Jul-12 tomato Red 0.6
18-Aug-12 pepper LimeGreen 0.55
3-May-12 mushroom BurlyWood 0.5
4-May-12 mushroom BurlyWood 0.5
7-Jun-12 carrot Orange 0.5
29-Jun-12 pepper LimeGreen 0.5
2-Jul-12 onion PapayaWhip 0.5
4-Jul-12 onion PapayaWhip 0.5
4-Jul-12 pepper LimeGreen 0.5
12-Aug-12 pepper LimeGreen 0.5
3-Oct-12 butterbean BlueViolet 0.5
12-Oct-12 pepper LimeGreen 0.5
27-Oct-12 kale DarkGreen 0.5
29-Oct-12 pepper LimeGreen 0.5
12-Nov-12 kale DarkGreen 0.5
3-Dec-12 kale DarkGreen 0.5
13-Jun-12 pepper LimeGreen 0.45
24-Jun-12 tomato Red 0.45
27-Oct-12 pepper LimeGreen 0.43
3-Dec-12 carrot Orange 0.43
20-Jun-12 carrot Orange 0.4
15-Jul-12 tomato Red 0.4
29-Sep-12 pepper LimeGreen 0.375
29-Sep-12 butterbean BlueViolet 0.375
30-Oct-12 lettuce LawnGreen 0.375
3-Dec-12 pepper LimeGreen 0.375
22-Dec-12 kale DarkGreen 0.375
30-Apr-12 lettuce LawnGreen 0.33
13-May-12 lettuce LawnGreen 0.33
18-Jun-12 tomato Red 0.33
7-Dec-12 kale DarkGreen 0.33
14-Oct-12 butterbean BlueViolet 0.312
11-Oct-12 radish MediumVioletRed 0.31
27-Apr-12 carrot Orange 0.3
27-Apr-12 lettuce LawnGreen 0.3
4-Jul-12 pepper LimeGreen 0.3
7-Sep-12 pepper LimeGreen 0.3
11-Oct-12 butterbean BlueViolet 0.3
13-Jun-12 onion PapayaWhip 0.28
7-Aug-12 pepper LimeGreen 0.27
29-Apr-12 lettuce LawnGreen 0.25
1-May-12 lettuce LawnGreen 0.25
2-May-12 carrot Orange 0.25
5-May-12 lettuce LawnGreen 0.25
8-May-12 lettuce LawnGreen 0.25
9-May-12 lettuce LawnGreen 0.25
11-May-12 lettuce LawnGreen 0.25
14-Jun-12 carrot Orange 0.25
20-Jun-12 onion PapayaWhip 0.25
25-Jun-12 carrot Orange 0.25
5-Jul-12 onion PapayaWhip 0.25
13-Jul-12 pepper LimeGreen 0.25
23-Oct-12 lettuce LawnGreen 0.25
24-Oct-12 pepper LimeGreen 0.25
19-May-12 carrot Orange 0.2
29-Oct-12 lettuce LawnGreen 0.2
25-Nov-12 pepper LimeGreen 0.2
15-Oct-12 radish MediumVioletRed 0.187
11-Nov-12 lettuce LawnGreen 0.16
25-Nov-12 kale DarkGreen 0.16
3-Dec-12 radish MediumVioletRed 0.16
18-Dec-12 kale DarkGreen 0.16
29-Sep-12 arugula ForestGreen 0.125
29-Sep-12 radish MediumVioletRed 0.125
29-Sep-12 tomato Red 0.125
3-Oct-12 radish MediumVioletRed 0.125
27-Oct-12 arugula ForestGreen 0.125
31-Oct-12 lettuce LawnGreen 0.125
11-Dec-12 radish MediumVioletRed 0.125
18-Dec-12 lettuce LawnGreen 0.125
21-Jul-12 pepper LimeGreen 0.12
5-May-12 carrot Orange 0.1
9-May-12 carrot Orange 0.1
28-May-12 carrot Orange 0.1
23-Jul-12 tomato Red 0.1
20-Sep-12 lettuce LawnGreen 0.1
25-Sep-12 pepper LimeGreen 0.1
25-Sep-12 lettuce LawnGreen 0.1
25-Sep-12 radish MediumVioletRed 0.1
3-Oct-12 arugula ForestGreen 0.1
6-Oct-12 butterbean BlueViolet 0.1
16-Oct-12 mushroom BurlyWood 0.1
8-Oct-12 kale DarkGreen 0.0625
20-Sep-12 radish MediumVioletRed 0.05
7-Dec-12 radish MediumVioletRed 0.05
1-Jan-13 kale DarkGreen 1
3-Jan-13 carrot Orange 2
10-Jan-13 carrot Orange 3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment