Skip to content

Instantly share code, notes, and snippets.

@Cosxin

Cosxin/ForestFires.csv

Created February 14, 2016 19:26
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 Cosxin/4ffebfd0eaefd86f09bf to your computer and use it in GitHub Desktop.
Save Cosxin/4ffebfd0eaefd86f09bf to your computer and use it in GitHub Desktop.
Download ZIP
rect-circle transition
Raw
ForestFires.csv
month wind area
jul 2.7 0.36
sep 2.2 0.43
sep 1.8 0.47
aug 4.5 0.55
aug 8.9 0.61
jul 5.4 0.71
aug 5.4 0.77
aug 4 0.9
mar 5.4 0.95
sep 3.6 0.96
aug 6.7 1.07
sep 4.5 1.12
jun 5.4 1.19
jul 2.2 1.36
jul 1.8 1.43
sep 4.9 1.46
sep 2.7 1.46
aug 1.3 1.56
sep 2.2 1.61
aug 3.6 1.63
aug 4 1.64
sep 5.8 1.69
mar 3.1 1.75
aug 4 1.9
mar 8.5 1.94
sep 1.8 1.95
sep 2.2 2.01
mar 4.5 2.14
aug 0.9 2.29
aug 4.5 2.51
mar 9.4 2.53
aug 2.2 2.55
sep 1.8 2.57
aug 4 2.69
aug 5.4 2.74
sep 2.2 3.07
aug 1.8 3.5
aug 4.9 4.53
apr 5.8 4.61
aug 2.7 4.69
sep 2.2 4.88
aug 5.4 5.23
sep 6.7 5.33
oct 4 5.44
feb 2.2 6.38
oct 4.5 6.83
aug 4.9 6.96
sep 3.1 7.04
mar 5.8 7.19
sep 2.2 7.3
mar 0.9 7.4
mar 4 8.24
mar 4 8.31
aug 2.7 8.68
aug 4.5 8.71
sep 4 9.41
aug 4.5 10.01
aug 5.4 10.02
apr 5.8 10.93
sep 0.9 11.06
sep 6.3 11.24
sep 3.6 11.32
sep 2.2 11.53
mar 3.6 12.1
feb 2.2 13.05
oct 2.7 13.7
mar 4 13.99
sep 1.8 14.57
aug 7.2 15.45
sep 2.2 17.2
sep 6.3 19.23
sep 4.9 23.41
oct 3.1 24.23
aug 5.8 26
sep 4.9 26.13
mar 5.8 27.35
mar 4.9 28.66
mar 4.9 28.66
sep 1.3 29.48
sep 6.3 30.32
sep 1.3 31.72
mar 3.1 31.86
aug 3.1 32.07
sep 3.6 35.88
mar 5.8 36.85
jul 3.6 37.02
sep 4.5 37.71
sep 4.9 48.55
oct 4 49.37
aug 4.5 58.3
sep 3.1 64.1
aug 4 71.3
sep 4.5 88.49
sep 3.1 95.18
sep 2.7 103.39
sep 3.1 105.66
sep 3.1 154.88
aug 5.8 196.48
sep 1.8 200.94
sep 2.2 212.88
sep 4 1090.84
aug 4 10.13
aug 7.6 2.87
aug 6.3 0.76
aug 5.4 0.09
aug 2.2 0.75
aug 0.4 2.47
aug 3.1 0.68
aug 3.1 0.24
aug 3.6 0.21
aug 2.7 1.52
aug 3.1 10.34
aug 2.2 8.02
aug 2.7 0.68
aug 1.8 1.38
aug 4 8.85
aug 7.6 3.3
aug 3.1 4.25
aug 3.6 1.56
aug 3.1 6.54
aug 7.6 0.79
aug 4 0.17
aug 2.7 4.4
aug 3.1 0.52
aug 4.5 9.27
aug 4 3.09
dec 8.5 8.98
dec 8 11.19
dec 4.9 5.38
dec 8.5 17.85
dec 8.5 10.73
dec 8.5 22.03
dec 8.5 9.77
dec 4.9 9.27
dec 8.5 24.77
feb 3.1 1.1
feb 8 24.24
jul 0.9 8
jul 1.3 2.64
jul 5.4 86.45
jul 3.6 6.57
jun 1.8 0.9
jun 5.4 3.52
sep 5.4 0.41
sep 3.6 5.18
sep 1.8 14.29
sep 1.8 1.58
sep 4.9 3.78
sep 6.3 4.41
sep 7.2 34.36
sep 4 7.21
sep 4 1.01
sep 2.7 2.18
sep 1.8 4.42
sep 4 3.33
sep 3.1 6.58
sep 4.5 15.64
sep 2.2 11.22
sep 3.1 2.13
sep 2.2 56.04
sep 2.2 7.48
sep 1.8 1.47
sep 2.2 3.93
sep 4.5 2.18
sep 4.9 6.1
sep 3.1 5.83
sep 2.2 28.19
sep 3.6 1.64
sep 3.6 3.71
sep 6.3 7.31
sep 3.6 2.03
sep 2.7 1.72
sep 2.2 5.97
sep 4.9 13.06
sep 4.9 1.26
sep 2.2 8.12
sep 2.2 1.09
sep 4 3.94
sep 3.1 0.52
sep 2.2 2.93
sep 2.7 5.65
sep 3.1 20.03
sep 5.4 1.75
sep 4.9 12.64
sep 7.6 11.06
sep 4 18.3
sep 4.9 39.35
aug 2.2 174.63
jul 7.2 7.73
aug 2.7 16.33
aug 1.8 5.86
aug 2.7 42.87
aug 4.5 12.18
aug 2.2 16
sep 5.4 24.59
aug 3.1 28.74
feb 6.3 9.96
sep 2.7 30.18
sep 4 70.76
feb 1.8 51.78
sep 4.9 3.64
aug 3.6 3.63
jun 4.5 8.16
sep 4 4.95
sep 2.2 6.04
sep 4.9 3.95
sep 3.1 7.8
feb 9.4 4.62
jul 4.5 1.63
aug 4.9 746.28
jul 3.1 7.02
aug 5.4 2.44
aug 4 3.05
aug 4.5 185.76
jul 3.6 6.3
sep 4 0.72
aug 3.6 4.96
aug 2.2 2.35
aug 4 3.2
aug 4 6.36
aug 4.9 15.34
aug 1.3 0.54
aug 4 6.43
sep 2.2 0.33
aug 1.8 1.23
apr 3.1 3.35
sep 3.6 9.96
aug 5.4 6.43
aug 4.9 9.71
aug 4 82.75
aug 4.9 3.32
aug 8 1.94
sep 7.6 3.71
feb 6.3 5.39
feb 5.4 2.14
feb 0.9 6.84
mar 5.8 3.18
mar 5.4 5.55
mar 3.6 6.61
apr 9.4 61.13
may 4 38.48
jun 4 1.94
jun 3.1 70.32
jun 2.7 10.08
jun 9.4 3.19
jul 1.3 1.76
jul 4 7.36
jul 4.5 2.21
jul 4.9 278.53
jul 4.5 2.75
aug 5.8 1.29
aug 4 26.43
aug 3.6 2.07
aug 6.3 2
aug 3.6 16.4
aug 7.6 46.7
aug 4.5 43.32
aug 4.9 8.59
aug 3.1 2.77
aug 2.2 14.68
aug 2.7 40.54
aug 4.9 10.82
aug 4.9 1.95
aug 4.9 49.59
aug 1.8 5.8
aug 7.6 2.17
aug 5.4 0.43
aug 2.7 6.44
aug 5.8 54.29
aug 6.7 11.16
Raw
index.html
<meta charset="utf-8">
<html>
<head>
Q1
<style type="text/css">
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: #FFF;
}
.x.axis .minor {
stroke-opacity: .5;
}
.y.axis line,
.x.axis path,
.y.axis path {
fill: none;
stroke: #000;
}
.legend {
font-size:12px;
}
rect{
stroke-width:2;
}
</style>
<p>problem 1a or 1b: <select id="obs" onchange="changes()">
<option value=2 >1b</option>
<option value=1 >1a</option>
</select>
</p>
</head>
<body>
</body> <script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = { top: 50, right: 60, bottom: 50, left: 50 },
width = 960 - margin.left - margin.right,
height = 640 - margin.top - margin.bottom;
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 + ')');
var x = d3.scale.linear().range([0,width]);
var y = d3.scale.linear().range([height,0]);
var xAxis = d3.svg.axis().scale(x);
var yAxis = d3.svg.axis().scale(y).orient("left");
//colorbrewer2
var colors = ['#1f78b4','#a6cee3','#b2df8a','#33a02c','#fb9a99','#e31a1c','#ffff99','#ff7f00','#fdbf6f','#b15928','#cab2d6','#6a3d9a'];
var cs = d3.scale.ordinal().domain(["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"]).range(colors);
var legendRectSize = 18;
var legendSpacing = 4;
var legend = svg.selectAll(".legend")
.data(cs.domain())
.enter()
.append("g")
.attr("class","legend")
.attr('transform',function(d,i){
var height = legendRectSize + legendSpacing;
//var offset = height * colors.length / 2;
var horz = - legendRectSize;
var vert = i * height; //- offset;
return 'translate(' + (width + horz) + ',' + vert + ')';
});
legend.append("rect")
.attr('width', legendRectSize)
.attr('height',legendRectSize)
.style('fill', function(d){return cs(d);});
legend.append("text")
.attr('x',legendRectSize + legendSpacing)
.attr('y',legendRectSize - legendSpacing)
//.style('stroke', function(d){return cs(d);})
.text(function(d){return d;});
var dataset = [];
d3.csv('./ForestFires.csv', function(d) {
return {
month: d.month,
wind:+d.wind,
area:+d.area
};
}, function(err, rows) {
if(err) console.log(err);
dataset = rows;
drawChart();
});
var rectwidth = 10, rectheight = 10;
function drawChart(){
x.domain(d3.extent(dataset,function(d){return 1.05 * d.wind;}));
y.domain(d3.extent(dataset,function(d){return 1.05 * d.area;}));
svg.selectAll("circle")
.data(dataset)
.enter()
.append("rect")
.attr("class","circle")
.attr("x", function(d) {
return x(d.wind) - rectwidth / 2 ;
})
.attr("y", function(d) {
return y(d.area) - rectheight / 2;
})
.attr("width", rectwidth)
.attr("height",rectheight)
.style("fill",function(d){return cs(d.month);});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height ) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0" + ",0)")
.call(yAxis);
svg.append("text")
.attr("x",width )
.attr("y",height + 30)
.text("wind");
svg.append("text")
.attr("x",-margin.left)
.attr("y",0)
.text("area");
setTimeout(toCircle,1000);
}
function toCircle(){
y.domain(d3.extent(dataset,function(d){return 1.05 * Math.log(d.area);}));
svg.select(".y.axis").transition().call(yAxis.scale(y));
svg.selectAll(".circle")
.transition()
.duration(800)
.delay(function(d,i){return i;})
.attr("x",function(d){return x(d.wind) - 1.5*Math.sqrt(d.area) / 2;})
.attr("y",function(d){return y(Math.log(d.area));})
.attr("width", function(d){return 1.5*Math.sqrt(d.area) ;})
.attr("height",function(d){return 1.5*Math.sqrt(d.area);})
.attr("rx",function(d){return 1.5*Math.sqrt(d.area);})
.attr("ry",function(d){return 1.5*Math.sqrt(d.area);});
}
function toRect(){
y.domain(d3.extent(dataset,function(d){return 1.05 * (d.area);}));
svg.select(".y.axis").transition().call(yAxis.scale(y));
svg.selectAll(".circle")
.transition()
.duration(800)
.delay(function(d,i){return i;})
.attr("x", function(d) {
return x(d.wind) - rectwidth / 2 ;
})
.attr("y",function(d){return y(d.area);})
.attr("width", function(d){return 12 ;})
.attr("height",function(d){return 12;})
.attr("rx",function(d){return 0;})
.attr("ry",function(d){return 0;});
}
function changes(){
var e = document.getElementById("obs");
e.options[e.selectedIndex].value == 1 ? toRect() : toCircle();
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment