10 US States with the Most Data Science Programs

This bar chart was inspired by this data visualization from Tableau Public by Brit Cava. The original visualization was created by Dan Murray with data from Data Science Community.

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: 13pt;
      font-family: "Verdana";
      alignment-baseline: middle;
      fill: white;
    }
    .number {
      font-size: 13pt;
      font-family: "Verdana", sans-serif;
      alignment-baseline: middle;
      fill: #00d1a3;
      
    }
    .subtitle {
      font-size: 20pt;
      font-family: "Georgia";
      alignment-baseline: middle;
      fill: #0054bc;
    }
    .bar {
      fill: #00d1a3;
    
    }
    .bar:hover {
      fill: #0054bc;
      cursor: pointer;
    }
  </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', 80)
        .text('10 US States with the Most Data Science Programs');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "California",
        value: 20,
      },
      {
        name: "New York",
        value: 18
      },
      {
        name: "Illinois",
        value: 13
      },
      {
        name: "Pennsylvania",
        value: 13
      },
      {
        name: "Florida",
        value: 10
      },
      {
        name: "Michigan",
        value: 10
      },
      {
        name: "Colorado",
        value: 9
      },
      {
        name: "Texas", 
        value: 9
      },
      {
        name: "Ohio",
        value: 8
      },
      {
        name: "Massachusetts",
        value: 8
      }
      
    ];
    
    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.20);
    
    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)) + -27)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xValue(d)}`);
  
  </script>
</body>

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