D3 Examples - CS573_HW1

CS573_HW1_3

In a publication in The Lancet Liu et al. (2015) presented estimates on the causes of deaths of children in 2013. 2.7 million children died in the first month of their life. The bar chart presents this data. The length of the bar shows the share of children killed by each cause.

Data source https://ourworldindata.org/child-mortality/#child-mortality-by-cause-of-death

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0px;
    }
    .label {
      font-size: 10pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: white;
    }
    .number, .subtitle {
      font-size: 20pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: #003090;
    }
    .bar {
      fill: #003090;
    }
  </style>
</head>
​
<body>
  <script>
    const width = 960;
    const height = 500;
    const margin = {
      left: 50,
      right: 200,
      top: 90,
      bottom: 52
    }
    
    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', 86)
        .text('Causes of Newborns dying in their 1st month in 2013.');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      
      {
        name: "Preterm birth complications",
        value: 94500
      },
      {
        name: "Intrapartum-related events",
        value: 69300
      },
      {
        name: "Sepsis",
        value: 44100
      },
      {
        name: "Congenital abnormalities",
        value: 25200
      },
      {
        name: "Other neonatal disorders",
        value: 25200
      },
      {
        name: "Pneumonia",
        value: 12600
      },
      {
        name: "Tetanus",
        value: 6300
      }
      
    ];
    
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    
    const xValue = d => d.value;
    const yValue = d => d.name;
    
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(data, xValue)])
      .range([0, innerWidth]);
    
    const yScale = d3.scaleBand()
      .domain(data.map(yValue).reverse())
      .range([innerHeight, 0])
      .padding(0.2);
    
    const groups = g.selectAll('g').data(data);
    const groupsEnter = groups
      .enter().append('g')
        .attr('transform', d => `translate(0, ${yScale(yValue(d))})`);
    
    groupsEnter
      .append('rect')
        .attr('class', 'bar')
        .attr('width', d => xScale(xValue(d)))
        .attr('height', yScale.bandwidth())
        .attr('fill', 'black');
    
    groupsEnter
      .append('text')
        .attr('class', 'label')
        .attr('x', 2)
        .attr('y', yScale.bandwidth() / 2)
        .text(yValue);
    
    const percentFormat = d3.format(",.1%");
    const xPercent = d => percentFormat(xValue(d) / 277200);
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 8)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xValue(d)} (${xPercent(d)})`);
​
  </script>
</body>
    