Skip to content

Instantly share code, notes, and snippets.

@biovisualize

biovisualize/index.html

Last active December 10, 2015 12:49
Show Gist options
  • Save biovisualize/4437065 to your computer and use it in GitHub Desktop.
Save biovisualize/4437065 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.min.js"></script>
<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>
</head>
<body>
<script>
var myfile = "vegetable.csv";
//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 = 960,
outerHeight = 500,
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.csv(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>
</body>
</html>
Raw
vegetable.csv
MDY DMY Label Vegetable Color Quantity Notes
9/3/12 3-Sep-12 sweet potato 8 Coral 8 Beauregards. Crummy yield. Didn't dig soil well either. :(
8/26/12 26-Aug-12 watermelon 7 HotPink 6
7/5/12 5-Jul-12 tomato 6 Red 3.1
7/28/12 28-Jul-12 watermelon 7 HotPink 2
7/30/12 30-Jul-12 watermelon 7 HotPink 2
8/3/12 3-Aug-12 watermelon 7 HotPink 2
8/16/12 16-Aug-12 watermelon 7 HotPink 2
8/23/12 23-Aug-12 watermelon 7 HotPink 2
9/3/12 3-Sep-12 watermelon 7 HotPink 2 Last pick.
7/9/12 9-Jul-12 onion 4 PapayaWhip 1.75 Last pick.
7/10/12 10-Jul-12 tomato 6 Red 1.5
7/25/12 25-Jul-12 tomato 6 Red 1.5 Last summer toms.
11/12/12 12-Nov-12 pepper 5 LimeGreen 1.5
6/25/12 25-Jun-12 pepper 5 LimeGreen 1.25
7/9/12 9-Jul-12 tomato 6 Red 1.25
7/21/12 21-Jul-12 tomato 6 Red 1.25 Starting to split after rain. New ones rooted. Butterbeans sprouted
7/12/12 12-Jul-12 tomato 6 Red 0.85
6/5/12 5-Jun-12 carrot 1 Orange 0.8
6/1/12 1-Jun-12 carrot 1 Orange 0.75
6/2/12 2-Jun-12 lettuce 2 LawnGreen 0.75
6/29/12 29-Jun-12 tomato 6 Red 0.75
6/29/12 29-Jun-12 tomato 6 Red 0.75
7/2/12 2-Jul-12 carrot 1 Orange 0.75 Pulled them all up, it is very hot and dry.
7/17/12 17-Jul-12 tomato 6 Red 0.75
8/26/12 26-Aug-12 pepper 5 LimeGreen 0.75
9/3/12 3-Sep-12 pepper 5 LimeGreen 0.75
6/11/12 11-Jun-12 carrot 1 Orange 0.6
7/4/12 4-Jul-12 tomato 6 Red 0.6
8/18/12 18-Aug-12 pepper 5 LimeGreen 0.55
5/3/12 3-May-12 mushroom 3 BurlyWood 0.5
5/4/12 4-May-12 mushroom 3 BurlyWood 0.5 For drying
6/7/12 7-Jun-12 carrot 1 Orange 0.5
6/29/12 29-Jun-12 pepper 5 LimeGreen 0.5 '2
7/2/12 2-Jul-12 onion 4 PapayaWhip 0.5 Leaves falling over. Pick to dry.
7/4/12 4-Jul-12 onion 4 PapayaWhip 0.5
7/4/12 4-Jul-12 pepper 5 LimeGreen 0.5
8/12/12 12-Aug-12 pepper 5 LimeGreen 0.5
10/3/12 3-Oct-12 butterbean 10 BlueViolet 0.5
10/12/12 12-Oct-12 pepper 5 LimeGreen 0.5
10/27/12 27-Oct-12 kale 12 DarkGreen 0.5
10/29/12 29-Oct-12 pepper 5 LimeGreen 0.5
11/12/12 12-Nov-12 kale 12 DarkGreen 0.5
12/3/12 3-Dec-12 kale 12 DarkGreen 0.5
6/13/12 13-Jun-12 pepper 5 LimeGreen 0.45 Still green
6/24/12 24-Jun-12 tomato 6 Red 0.45
10/27/12 27-Oct-12 pepper 5 LimeGreen 0.43
12/3/12 3-Dec-12 carrot 1 Orange 0.43
6/20/12 20-Jun-12 carrot 1 Orange 0.4
7/15/12 15-Jul-12 tomato 6 Red 0.4 3 pts
9/29/12 29-Sep-12 pepper 5 LimeGreen 0.375
9/29/12 29-Sep-12 butterbean 10 BlueViolet 0.375
10/30/12 30-Oct-12 lettuce 2 LawnGreen 0.375
12/3/12 3-Dec-12 pepper 5 LimeGreen 0.375
12/22/12 22-Dec-12 kale 12 DarkGreen 0.375
4/30/12 30-Apr-12 lettuce 2 LawnGreen 0.33
5/13/12 13-May-12 lettuce 2 LawnGreen 0.33
6/18/12 18-Jun-12 tomato 6 Red 0.33
12/7/12 7-Dec-12 kale 12 DarkGreen 0.33
10/14/12 14-Oct-12 butterbean 10 BlueViolet 0.312
10/11/12 11-Oct-12 radish 9 MediumVioletRed 0.31
4/27/12 27-Apr-12 carrot 1 Orange 0.3 Oxheart carrots, VERY good
4/27/12 27-Apr-12 lettuce 2 LawnGreen 0.3
7/4/12 4-Jul-12 pepper 5 LimeGreen 0.3 Little Thai peppers
9/7/12 7-Sep-12 pepper 5 LimeGreen 0.3
10/11/12 11-Oct-12 butterbean 10 BlueViolet 0.3
6/13/12 13-Jun-12 onion 4 PapayaWhip 0.28 Australian Brown
8/7/12 7-Aug-12 pepper 5 LimeGreen 0.27
4/29/12 29-Apr-12 lettuce 2 LawnGreen 0.25
5/1/12 1-May-12 lettuce 2 LawnGreen 0.25
5/2/12 2-May-12 carrot 1 Orange 0.25
5/5/12 5-May-12 lettuce 2 LawnGreen 0.25
5/8/12 8-May-12 lettuce 2 LawnGreen 0.25
5/9/12 9-May-12 lettuce 2 LawnGreen 0.25
5/11/12 11-May-12 lettuce 2 LawnGreen 0.25
6/14/12 14-Jun-12 carrot 1 Orange 0.25
6/20/12 20-Jun-12 onion 4 PapayaWhip 0.25
6/25/12 25-Jun-12 carrot 1 Orange 0.25
7/5/12 5-Jul-12 onion 4 PapayaWhip 0.25
7/13/12 13-Jul-12 pepper 5 LimeGreen 0.25
10/23/12 23-Oct-12 lettuce 2 LawnGreen 0.25
10/24/12 24-Oct-12 pepper 5 LimeGreen 0.25
5/19/12 19-May-12 carrot 1 Orange 0.2
10/29/12 29-Oct-12 lettuce 2 LawnGreen 0.2
11/25/12 25-Nov-12 pepper 5 LimeGreen 0.2 Frost last night
10/15/12 15-Oct-12 radish 9 MediumVioletRed 0.187
11/11/12 11-Nov-12 lettuce 2 LawnGreen 0.16
11/25/12 25-Nov-12 kale 12 DarkGreen 0.16
12/3/12 3-Dec-12 radish 9 MediumVioletRed 0.16
12/18/12 18-Dec-12 kale 12 DarkGreen 0.16
9/29/12 29-Sep-12 arugula 11 ForestGreen 0.125
9/29/12 29-Sep-12 radish 9 MediumVioletRed 0.125
9/29/12 29-Sep-12 tomato 6 Red 0.125
10/3/12 3-Oct-12 radish 9 MediumVioletRed 0.125 Five radishes
10/27/12 27-Oct-12 arugula 11 ForestGreen 0.125
10/31/12 31-Oct-12 lettuce 2 LawnGreen 0.125
12/11/12 11-Dec-12 radish 9 MediumVioletRed 0.125
12/18/12 18-Dec-12 lettuce 2 LawnGreen 0.125
7/21/12 21-Jul-12 pepper 5 LimeGreen 0.12
5/5/12 5-May-12 carrot 1 Orange 0.1
5/9/12 9-May-12 carrot 1 Orange 0.1 One fat carrot
5/28/12 28-May-12 carrot 1 Orange 0.1
7/23/12 23-Jul-12 tomato 6 Red 0.1
9/20/12 20-Sep-12 lettuce 2 LawnGreen 0.1
9/25/12 25-Sep-12 pepper 5 LimeGreen 0.1
9/25/12 25-Sep-12 lettuce 2 LawnGreen 0.1
9/25/12 25-Sep-12 radish 9 MediumVioletRed 0.1
10/3/12 3-Oct-12 arugula 11 ForestGreen 0.1
10/6/12 6-Oct-12 butterbean 10 BlueViolet 0.1
10/16/12 16-Oct-12 mushroom 3 BurlyWood 0.1
10/8/12 8-Oct-12 kale 12 DarkGreen 0.0625
9/20/12 20-Sep-12 radish 9 MediumVioletRed 0.05
12/7/12 7-Dec-12 radish 9 MediumVioletRed 0.05
1/1/12 1-Jan-14 kale 12 DarkGreen 5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment