D3 Examples - Costliest Earthquakes

Costliest Earthquakes
This bar chart was created from this table of most costly earthquakes found on Wikipedia. The original table includes event rank, year, location, magnitude, and property damage amounts as unadjusted costs. Entries are ranked according to the inflation-adjusted property cost. In cases where a range was given, the midpoint value has been used in the visualization. Each incident is color-coded by continent. (Continent data was manually added.)
Built with blockbuilder.org, and forked from curran's block: Extremist Murders in the US as a starting template for creating bar-chart graphics using blockbuilder and D3.js.
xxxxxxxxxx
 
<!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>
​
    