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):

Source Data

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

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;
	  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>

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