D3 Examples - U.S. Unemployment in 2017

U.S. Unemployment in 2017

This bar chart shows the decreasing trend for the unemployment rate during the year of 2017. Data for this chart was taken fromfrom the Bureau of Labor Statistics (found at the following site):

This chart was templated off of Curran Kelleher's chart "Extremist Murders in the U.S" found at: Curran's Example .

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0px;
      font-family: 'times';
      font-size: 20pt;
    }
    .label {
      font-size: 25pt;
      font-family: 'times';
      alignment-baseline: middle;
      fill: black;
    }
    .number, .subtitle {
      font-size: 20pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: black;
    }
    .bar {
      fill: #85bb65;
      
    }
  </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('Monthly % of unemployed U.S. persons throughout 2017');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "Jan",
        value: 4.8
      },
      {
        name: "Feb",
        value: 4.7
      },
      {
        name: "Mar",
        value: 4.5
      },
      {
        name: "Apr",
        value:4.4
      },
      {
        name: "May",
        value: 4.3
      },
      { 
        name: "June",
        value: 4.4
      },
      {
        name: "July",
        value: 4.3
      },
      {
        name: "Aug",
        value: 4.4
      }
        
    ];
    
    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 = d => percentFormat(",.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>
    