|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> |
|
<style> |
|
body { |
|
margin:0px; |
|
} |
|
.label { |
|
font-size: 11pt; |
|
font-family: 'sans-serif'; |
|
alignment-baseline: middle; |
|
fill: #4f4f4f; |
|
} |
|
.costnumber { |
|
font-size: 11pt; |
|
font-family: 'sans-serif'; |
|
alignment-baseline: middle; |
|
fill: #4f4f4f; |
|
} |
|
.costbar { |
|
//fill: #3b0089; |
|
} |
|
.magnumber { |
|
font-size: 11pt; |
|
font-family: 'sans-serif'; |
|
alignment-baseline: middle; |
|
fill: #4f4f4f; |
|
} |
|
.magbar { |
|
//fill: #6d6d6d; |
|
} |
|
.subtitle { |
|
font-size: 14pt; |
|
fill: #4f4f4f; |
|
} |
|
.heading { |
|
font-size: 12pt; |
|
fill: #4f4f4f; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<script> |
|
const width = 960; |
|
const height = 500; |
|
const margin = { |
|
left: 50, |
|
right: 100, |
|
top: 100, |
|
bottom: 30 |
|
} |
|
|
|
const innerWidth = width - margin.left - margin.right; |
|
const innerHeight = height - margin.top - margin.bottom; |
|
const labelWidth = 255; |
|
const magWidth = 100; |
|
const magPad = 69; |
|
const costWidth = innerWidth - (labelWidth + magWidth + magPad); |
|
|
|
const svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
svg.append('text') |
|
.attr('class', 'subtitle') |
|
.attr('x', margin.left) |
|
.attr('y', 50) |
|
.text('Costliest Earthquakes (ranked by adjusted cost and colored by continent).'); |
|
|
|
svg.append('text') |
|
.attr('class', 'heading') |
|
.attr('x', margin.left + labelWidth) |
|
.attr('y', 90) |
|
.text('Magnitude (Richter)'); |
|
|
|
svg.append('text') |
|
.attr('class', 'heading') |
|
.attr('x', margin.left + labelWidth + magWidth + magPad) |
|
.attr('y', 90) |
|
.text('Property damage (unadjusted USD)'); |
|
|
|
const g = svg.append('g') |
|
.attr('transform', `translate(${margin.left}, ${margin.top})`) |
|
|
|
// source: |
|
// https://en.wikipedia.org/wiki/Lists_of_earthquakes#Costliest_earthquakes |
|
|
|
const data = [ |
|
{ |
|
rank: 1, |
|
year: 2011, |
|
name: "Tōhoku", |
|
country: "Japan", |
|
continent: "Asia", |
|
magnitude: 9.1, |
|
cost: 235, // billion USD |
|
}, |
|
|
|
{ |
|
rank: 2, |
|
year: 1995, |
|
name: "Great Hanshin", |
|
country: "Japan", |
|
continent: "Asia", |
|
magnitude: 6.9, |
|
cost: 200 |
|
}, |
|
{ |
|
rank: 3, |
|
year: 2008, |
|
name: "Sichuan", |
|
country: "China", |
|
continent: "Asia", |
|
magnitude: 8.0, |
|
cost: 86 |
|
}, |
|
{ |
|
rank: 4, |
|
year: 1994, |
|
name: "Northridge", |
|
country: "United States", |
|
continent: "North America", |
|
magnitude: 6.7, |
|
cost: (13+44)/2 // midpoint estimate |
|
}, |
|
{ |
|
rank: 5, |
|
year: 1980, |
|
name: "Irpinia", |
|
country: "Italy", |
|
continent: "Europe", |
|
magnitude: 6.9, |
|
cost: 15 |
|
}, |
|
{ |
|
rank: 6, |
|
year: 1976, |
|
name: "Tangshan", |
|
country: "China", |
|
continent: "Asia", |
|
magnitude: 7.8, |
|
cost: 10 |
|
}, |
|
{ |
|
rank: 7, |
|
year: 2011, |
|
name: "Christchurch", |
|
country: "New Zealand", |
|
continent: "Oceania", |
|
magnitude: 6.3, |
|
cost: (15+40)/2 // midpoint estimate |
|
}, |
|
{ |
|
rank: 8, |
|
year: 2004, |
|
name: "Chūetsu", |
|
country: "Japan", |
|
continent: "Asia", |
|
magnitude: 6.8, |
|
cost: 28 |
|
}, |
|
{ |
|
rank: 9, |
|
year: 1999, |
|
name: "İzmit", |
|
country: "Turkey", |
|
continent: "Europe", |
|
magnitude: 7.6, |
|
cost: 20 |
|
}, |
|
{ |
|
rank: 10, |
|
year: 2010, |
|
name: "Chile earthquake", |
|
country: "Chile", |
|
continent: "South America", |
|
magnitude: 8.8, |
|
cost: (15+30)/2 |
|
}, |
|
{ |
|
rank: 11, |
|
year: 2012, |
|
name: "Emilia", |
|
country: "Italy", |
|
continent: "Europe", |
|
magnitude: 6.1, |
|
cost: "15.8", |
|
}, |
|
{ |
|
rank: 12, |
|
year: 1999, |
|
name: "Jiji", |
|
country: "Taiwan", |
|
continent: "Asia", |
|
magnitude: 7.6, |
|
cost: 10, |
|
}, |
|
{ |
|
rank: 13, |
|
year: 2015, |
|
name: "Nepal", |
|
country: "Nepal", |
|
continent: "Asia", |
|
magnitude: 7.8, |
|
cost: 10 |
|
}, |
|
{ |
|
rank: 14, |
|
year: 1906, |
|
name: "San Francisco", |
|
country: "United States", |
|
continent: "North America", |
|
magnitude: (7.7+7.9)/2, // midpoint estimate |
|
cost: 0.4 |
|
}, |
|
{ |
|
rank: 15, |
|
year: 1923, |
|
name: "Great Kantō", |
|
country: "Japan", |
|
continent: "Asia", |
|
magnitude: 7.9, |
|
cost: 0.6, |
|
}, |
|
{ |
|
rank: 16, |
|
year: 1989, |
|
name: "Loma Prieta", |
|
country: "United States", |
|
continent: "North America", |
|
magnitude: 6.9, |
|
cost: (5.6+6)/2 |
|
} |
|
]; |
|
|
|
|
|
const cost = d => d.cost; |
|
const magnitude = d => d.magnitude; |
|
const country = d => d.country; |
|
const continent = d => d.continent; |
|
const year = d => d.year; |
|
const rank = d => d.rank; |
|
const yValue = d => d.name; |
|
|
|
const costXScale = d3.scaleLinear() |
|
.domain([0, d3.max(data, cost)]) |
|
.range([0, costWidth]); |
|
|
|
const magXScale = d3.scaleLinear() |
|
.domain([0, d3.max(data, magnitude)]) |
|
.range([0, magWidth]); |
|
|
|
const yScale = d3.scaleBand() |
|
.domain(data.map(yValue).reverse()) |
|
.range([innerHeight, 0]) |
|
.padding(0.272); |
|
|
|
const continentColor = d3.scaleOrdinal(d3.schemeDark2); |
|
|
|
const groups = g.selectAll('g').data(data); |
|
|
|
const labelGroup = groups |
|
.enter().append('g') |
|
.attr('transform', d => `translate(0, ${yScale(yValue(d))})`); |
|
|
|
// rank |
|
labelGroup |
|
.append('text') |
|
.attr('class', 'label') |
|
.attr('x', 0) |
|
.attr('y', yScale.bandwidth() / 2) |
|
.text(d => `${rank(d)}.`); |
|
|
|
// name |
|
labelGroup |
|
.append('text') |
|
.attr('class', 'label') |
|
.attr('x', 25) |
|
.attr('y', yScale.bandwidth() / 2) |
|
.attr('fill', d => continentColor(continent(d))) |
|
.text(d => `${yValue(d)}, ${country(d)} (${year(d)})`); |
|
|
|
const magGroup = groups |
|
.enter().append('g') |
|
.attr('transform', d => `translate(${labelWidth} ${yScale(yValue(d))})`); |
|
|
|
magGroup |
|
.append('rect') |
|
.attr('class', 'magbar') |
|
.attr('width', d => magXScale(magnitude(d))) |
|
.attr('height', yScale.bandwidth()) |
|
.attr('fill', d => continentColor(continent(d))); |
|
|
|
magGroup |
|
.append('text') |
|
.attr('class', 'magnumber') |
|
.attr('x', d => magXScale(magnitude(d)) + 8) |
|
.attr('y', yScale.bandwidth() / 2) |
|
.attr('fill', d => continentColor(continent(d))) |
|
.text(d => magnitude(d).toFixed(1)); |
|
|
|
const costGroup = groups |
|
.enter().append('g') |
|
.attr('transform', d => `translate(${labelWidth + magWidth + magPad}, ${yScale(yValue(d))})`); |
|
|
|
costGroup |
|
.append('rect') |
|
.attr('class', 'costbar') |
|
.attr('width', d => costXScale(cost(d))) |
|
.attr('height', yScale.bandwidth()) |
|
.attr('fill', d => continentColor(continent(d))); |
|
|
|
costGroup |
|
.append('text') |
|
.attr('class', 'costnumber') |
|
.attr('x', d => costXScale(cost(d)) + 8) |
|
.attr('y', yScale.bandwidth() / 2) |
|
.attr('fill', d => continentColor(continent(d))) |
|
.text(d => `\$${cost(d)} B`); |
|
|
|
</script> |
|
</body> |