North Atlantic Hurricanes

This bar chart summarizes the number of North Atlantic hurricanes occurring each decade between 1911 and 2011. Data from Weather Underground Hurricane Archive.

Built with blockbuilder.org

forked from curran's block: Extremist Murders in the US

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0px;
    }
    .label {
      font-size: 12pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: white;
    }
    .number, .subtitle {
      font-size: 20pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: #005a84;
    }
    .bar {
      fill: #005a84;
    }
  </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('North Atlantic Hurricanes by Decade from 1911 to 2010');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "2001-2010",
        value: 86
      },
      {
        name: "1991-2000",
        value: 64
      },
      {
        name: "1981-1990",
        value: 52
      },
      {
        name: "1971-1980",
        value: 49
      },
      {
        name: "1961-1970",
        value: 61
      },
      {
        name: "1951-1960",
        value: 69
      },
      {
        name: "1941-1950",
        value: 50
      },
      {
        name: "1931-1940",
        value: 47
      },
      {
        name: "1921-1930",
        value: 42
      },
      {
        name: "1911-1920",
        value: 40
      }
      
      
    ];
    
    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.272);
    
    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', 15)
        .attr('y', yScale.bandwidth() / 2)
        .text(yValue);
    
    const percentFormat = d3.format(",.1%");
    const xPercent = d => percentFormat(xValue(d) / xScale.domain()[1]);
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 8)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xValue(d)}`);

</script>
</body>

https://d3js.org/d3.v4.min.js