|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title> D3 Test </title> |
|
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> |
|
<style> |
|
body { |
|
font-family: 'Open sans',verdana,arial,sans-serif; |
|
font-size: 10pt |
|
} |
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<script> |
|
var divContainer = d3.select('body') |
|
.append('div') |
|
.style('height', '480px') |
|
.style('overflow-x', 'hidden') |
|
.style('overflow-y', 'scroll') |
|
|
|
var divBubble = divContainer |
|
.append('div') |
|
.attr('class', 'chart') |
|
|
|
var width = 834; |
|
var height = 370; |
|
var margin = 70; |
|
|
|
var continents = {} |
|
d3.csv("populous_country.csv", |
|
function(d) { |
|
return { |
|
x: +d["GDP Per capita"], |
|
y: +d["Life-Expectancy"], |
|
size: d["Continent"], |
|
label: d["Country"], |
|
c: d["Continent"] |
|
} |
|
}, |
|
function(error, data) { |
|
data.forEach(function(d) { |
|
continents[d["size"]] = 0 |
|
}) |
|
continents = d3.keys(continents).sort(); |
|
data.forEach(function(d) { |
|
d["size"] = continents.indexOf(d["size"]) + 1 |
|
}) |
|
|
|
var labelX = 'GDP Per Capita ($)'; |
|
var labelY = 'Life Expectancy (year)'; |
|
|
|
var x = d3.scale.linear().domain([ |
|
d3.min(data, function (d) { return d.x; }), |
|
d3.max(data, function (d) { return d.x; }) |
|
]).range([0, width]); |
|
var y = d3.scale.linear().domain([ |
|
d3.min(data, function (d) { return d.y; }), |
|
d3.max(data, function (d) { return d.y; }) |
|
]).range([height, 0]); |
|
|
|
var svg = divBubble |
|
.append('svg') |
|
.attr('class', 'chart') |
|
.attr("width", width + margin + margin) |
|
.attr("height", height + margin + margin) |
|
.append("g") |
|
.attr("transform", "translate(" + margin + "," + margin + ")"); |
|
|
|
// X Axis |
|
var xAxis = d3.svg.axis().scale(x); |
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(xAxis) |
|
.append("text") |
|
.text(labelX) |
|
.attr("x", width + 20) |
|
.attr("y", margin - 40) |
|
.attr("dy", ".71em") |
|
.style("text-anchor", "end"); |
|
|
|
// Y Axis |
|
var yAxis = d3.svg.axis().scale(y).orient("left"); |
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.call(yAxis) |
|
.append("text") |
|
.text(labelY) |
|
.attr("transform", "rotate(-90)") |
|
.attr("x", 20) |
|
.attr("y", -margin) |
|
.attr("dy", ".71em") |
|
.style("text-anchor", "end"); |
|
|
|
// Bubbles |
|
var scale = d3.scale.sqrt().domain([ |
|
d3.min(data, function (d) { return d.size; }), |
|
d3.max(data, function (d) { return d.size; }) |
|
]).range([5, 20]); |
|
var color = d3.scale.category10(); |
|
|
|
svg.selectAll("circle") |
|
.data(data) |
|
.enter() |
|
.append("circle") |
|
.attr("cx", function (d) { return x(d.x); }) |
|
.attr("cy", function (d) { return y(d.y); }) |
|
.attr("r", function (d) { return scale(d.size); }) |
|
.attr("text", function (d) { return d.label }) |
|
.style("fill", function (d) { return color(d.c); }) |
|
.attr("opacity", 0.7) |
|
|
|
svg.selectAll("circle") |
|
.each(function(d, i) { |
|
circle = d3.select(this) |
|
svg.append("text") |
|
.text(circle.attr("text")) |
|
.attr("dx", +circle.attr("cx") - (+circle.attr("r")/2)) |
|
.attr("dy", +circle.attr("cy") + 3); |
|
}) |
|
} |
|
); |
|
|
|
var divStack = divContainer |
|
.append('div') |
|
.attr('class', 'chart') |
|
|
|
var parseDate = d3.time.format("%y-%b-%d").parse; |
|
var formatPercent = d3.format(".0%"); |
|
|
|
d3.csv("surveillance-disease.csv", |
|
function(d) { |
|
row = { |
|
x : d3.time.format("%Y").parse(d.year), |
|
y : { |
|
malaria : +d.malaria, |
|
TB : +d.TB, |
|
pneumonia : +d.pneumonia, |
|
//leprosy : +d.leprosy, |
|
//tetanus : +d.tetanus, |
|
measles : +d.measles, |
|
//diarrhea : +d.diarrhea, |
|
dengue : +d.dengue |
|
} |
|
} |
|
|
|
var total = 0 |
|
d3.keys(row.y).forEach(function(key) { |
|
total += row.y[key] |
|
}) |
|
|
|
d3.keys(row.y).forEach(function(key) { |
|
row.y[key] = row.y[key]/total |
|
}) |
|
|
|
return row |
|
}, |
|
function(error, data) { |
|
var labelX = 'Year'; |
|
var labelY = 'Disease'; |
|
|
|
var svg = divStack |
|
.append('svg') |
|
.attr('class', 'chart') |
|
.attr("width", width + margin + margin) |
|
.attr("height", height + margin + margin) |
|
.append("g") |
|
.attr("transform", "translate(" + margin + "," + margin + ")"); |
|
|
|
// X Axis |
|
var x = d3.time.scale() |
|
.domain(d3.extent(data, function(d) { return d.x; })) |
|
.range([0, width]); |
|
var xAxis = d3.svg.axis().scale(x); |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(xAxis) |
|
.append("text") |
|
.text(labelX) |
|
.attr("x", width + 20) |
|
.attr("y", margin - 40) |
|
.attr("dy", ".71em") |
|
.style("text-anchor", "end"); |
|
|
|
// Y Axis |
|
var y = d3.scale.linear().range([height, 0]); |
|
var yAxis = d3.svg.axis().scale(y) |
|
.orient("left") |
|
.tickFormat(formatPercent); |
|
|
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.call(yAxis) |
|
.append("text") |
|
.text(labelY) |
|
.attr("transform", "rotate(-90)") |
|
.attr("x", 20) |
|
.attr("y", -margin) |
|
.attr("dy", ".71em") |
|
.style("text-anchor", "end"); |
|
|
|
// Stack area |
|
var color = d3.scale.category20() |
|
.domain(d3.keys(data[0].y)) |
|
|
|
var area = d3.svg.area() |
|
.x(function(d) { return x(d.date); }) |
|
.y0(function(d) { return y(d.y0); }) |
|
.y1(function(d) { return y(d.y0 + d.y); }); |
|
|
|
var pathData = color.domain().map(function(name) { |
|
return { |
|
name : name, |
|
values: data.map(function(d) { |
|
return { |
|
date: d.x, y: d.y[name] |
|
} |
|
}) |
|
} |
|
}) |
|
|
|
var stackData = d3.layout.stack() |
|
.values(function(d) { |
|
return d.values |
|
})(pathData) |
|
|
|
var container = svg.selectAll(".data") |
|
.data(stackData).enter() |
|
.append("g") |
|
.attr("class", "data"); |
|
|
|
container.append("path") |
|
.attr("class", "area") |
|
.attr("d", function(d) { return area(d.values); }) |
|
.style("fill", function(d) { return color(d.name); }); |
|
|
|
container.append("text") |
|
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) |
|
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; }) |
|
.attr("x", -6) |
|
.attr("dy", ".35em") |
|
.text(function(d) { return d.name; }) |
|
.style("text-anchor", "end"); |
|
} |
|
); |
|
</script> |
|
</body> |
|
</html> |
