|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>D3 Test</title> |
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
|
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> |
|
|
|
<style type="text/css"> |
|
|
|
.axis path, |
|
|
|
.axis line { |
|
fill: none; |
|
stroke: black; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis text { |
|
font-family: georgia; |
|
font-size: 14px; |
|
} |
|
|
|
path { |
|
stroke: steelblue; |
|
stroke-width: 1; |
|
fill: none; |
|
} |
|
|
|
p { |
|
font-family:georgia; |
|
color:DimGrey; |
|
font-size:17px; |
|
} |
|
|
|
h1 { |
|
font-family:georgia; |
|
color:Black; |
|
font-size:26px; |
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
<body> |
|
|
|
<form name=myform> |
|
<div id="locator"> |
|
<select id="selectionchoice"> |
|
<option> --- </option> |
|
<option>Time</option> |
|
<option>Location</option> |
|
</select> |
|
</div> |
|
</form> |
|
|
|
<div id="title"> |
|
<h1>Visualisation of time and location data with D3</h1> |
|
</div> |
|
|
|
<div id="paragraph"> |
|
<p>Make a selection to show either time or location data.</p> |
|
</div> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
$('#selectionchoice').change(function(){ |
|
|
|
if ($(this).val()=='---') { |
|
|
|
d3.select("svg") |
|
.remove(); |
|
|
|
$('div > h1').html('<h1>Visualisation of time and location data with D3</h1>'); |
|
|
|
$('div > p').html('<p>Make a selection to show either time or location data.</p>'); |
|
|
|
} |
|
|
|
else { |
|
|
|
if ($(this).val()=='Time') { |
|
|
|
$('div > h1').html('<h1>Number of applications for Canadian citizenship</h1>'); |
|
|
|
$('div > p').html('<p>Click anywhere on the chart to view percentage conversion from applications to new Canadian citizens.</p>'); |
|
|
|
$('#picture').remove(); |
|
|
|
d3.select("svg") |
|
.remove(); |
|
|
|
var w = 420; |
|
var p = 100; |
|
var h = 370; |
|
var radius = 4; |
|
var barPadding = 5; |
|
var paddingX = 30 + p; |
|
var paddingY = 100; |
|
var barwidth = (w - paddingY) / 5 - barPadding; |
|
|
|
|
|
var dataset = [ |
|
[2008, 242400, 176572], |
|
[2009, 232960, 156348], |
|
[2010, 208800, 143675], |
|
[2011, 223040, 181293], |
|
[2012, 317440, 113142] |
|
]; |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", w) |
|
.attr("height", h) |
|
.append("g") |
|
.attr("transform", "translate(0, " + p + ")"); |
|
|
|
var xScale = d3.scale.linear() |
|
.domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })]) |
|
.range([paddingY+barwidth/2, w-barwidth/2]); |
|
|
|
var yScale = d3.scale.linear() |
|
.domain([0, d3.max(dataset, function(d) { return d[1]; })]) |
|
.range([h-radius, paddingX+radius]); |
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(xScale) |
|
.orient("bottom") |
|
.ticks(5); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(yScale) |
|
.orient("left"); |
|
|
|
var circles = svg.selectAll("circle") |
|
.data(dataset) |
|
.enter() |
|
.append("circle") |
|
.attr("cx", function(d) { |
|
return xScale(d[0]); |
|
}) |
|
.attr("cy", function(d) { |
|
return yScale(d[1]) - paddingX; |
|
}) |
|
.attr("r", radius); |
|
|
|
var lineFunction = d3.svg.line() |
|
.x(function(d, i) { return xScale(d[0]); }) |
|
.y(function(d, i) { return yScale(d[1]) - paddingX; }); |
|
|
|
svg.append("g") |
|
.attr("class", "axis") |
|
.attr("transform", "translate(0," + (h - paddingX) + ")") |
|
.call(xAxis); |
|
|
|
svg.append("g") |
|
.attr("class", "axis") |
|
.attr("transform", "translate(" + paddingY + "," + (0 - paddingX) + ")") |
|
.call(yAxis); |
|
|
|
svg.append("path") |
|
.attr("d", lineFunction(dataset)); |
|
|
|
|
|
d3.select("svg") |
|
.on("click",function(pClicked){ |
|
|
|
svg.selectAll("rect") |
|
.data(dataset) |
|
.enter() |
|
.append("rect") |
|
.transition() |
|
.duration(1000) |
|
.ease("linear") |
|
.attr("x", function(d) { |
|
return xScale(d[0]) - barwidth/2; |
|
}) |
|
.attr("y", function(d) { |
|
return yScale(d[2]) - paddingX; |
|
}) |
|
.attr("height", function(d) { |
|
return (h-yScale(d[2])); |
|
}) |
|
.attr("width", barwidth) |
|
.attr("fill", function(d) { |
|
return "rgb(0, " + Math.round((d[1]-d[2])/d[1]*111) + ", " + Math.round((d[1]-d[2])/d[1]*500) + ")"; |
|
}) |
|
|
|
svg.selectAll("p") |
|
.data(dataset) |
|
.enter() |
|
.append("text") |
|
.transition() |
|
.delay(1000) |
|
.ease("linear") |
|
.text(function(d) { |
|
return Math.round(d[2]/d[1]*100) + " %"; |
|
}) |
|
.attr("x", function(d) { |
|
return xScale(d[0]); |
|
}) |
|
.attr("y", function(d) { |
|
return yScale(d[2]) - paddingX + 30; |
|
}) |
|
.attr("font-family", "georgia") |
|
.attr("font-size", "15px") |
|
.attr("fill", "white") |
|
.attr("text-anchor", "middle"); |
|
|
|
}); |
|
} |
|
|
|
else { |
|
|
|
d3.select("svg") |
|
.remove(); |
|
|
|
$('div > h1').html('<h1>Map of the United States</h1>'); |
|
|
|
$('div > p').html('<p>Click anywhere on the chart to view holiday journey sized by time spent in each place!</p>'); |
|
|
|
$('#picture').remove(); |
|
|
|
var w = 520; |
|
var p = 10; |
|
var h = 350+p; |
|
var radius = 5; |
|
|
|
var projection = d3.geo.albersUsa() |
|
.translate([w/2, h/2]) |
|
.scale([700]); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", w) |
|
.attr("height", h) |
|
.append("g") |
|
.attr("transform", "translate(0, " + p + ")"); |
|
|
|
|
|
d3.json("us-states.json", function(json) { |
|
|
|
svg.selectAll("path") |
|
.data(json.features) |
|
.enter() |
|
.append("path") |
|
.attr("d", path); |
|
|
|
}); |
|
|
|
d3.select("svg") |
|
.on("click",function(pClicked){ |
|
|
|
d3.csv("trip.csv", function(dataset) { |
|
|
|
svg.selectAll("circle") |
|
.data(dataset) |
|
.enter() |
|
.append("circle") |
|
.attr("cx", function(d) { |
|
return projection([d.lon, d.lat])[0]; |
|
}) |
|
.attr("cy", function(d) { |
|
return projection([d.lon, d.lat])[1]; |
|
}) |
|
.attr("r", function(d) { |
|
return Math.sqrt(parseInt(d.hours)*2); |
|
}) |
|
.style("fill", "yellow") |
|
.style("opacity", 0.85) |
|
.attr("stroke", "orange") |
|
.attr("stroke-width", 2); |
|
|
|
}); |
|
}); |
|
} |
|
} |
|
|
|
}); |
|
|
|
|
|
</script> |
|
|
|
</body> |
|
</html> |
