Most popular programming languages on StackOverflow

This D3 block was inspired by a video I saw on Reddit showing an animated chart of StackOverflow tag popularity. I thought it woudl be fun to recreate it with D3 and D3FC.

I obtained the data from the StackOverflow Data Explorer, using the following query:

select
  '##TAG##' as tag, yr,  mo,  COUNT(*) as total
from (
  select
  MONTH(p.CreationDate) AS mo,
  YEAR(p.CreationDate) AS yr
  from Posts p 
    join PostTags pt on (p.id = pt.PostId) 
    join Tags t on (pt.TagId = t.id) 
  where t.TagName = '##TAG##'
) src
group by yr, mo
order by yr, mo

The chart is rendered using various D3FC components, making good use of the built-in transition support. The code has various comments if you're interested in how it was constructed.

Built with blockbuilder.org

<!DOCTYPE html>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

.x-axis text {
    fill: darkgrey;
  }

.x-axis .domain {
    display: none;
  }

.x-axis .tick {
    font-size: 12px;
  }

#chart {
    height: 480px;
  }

.y-axis svg {
    display: none;
  }

.language-label {
    text-anchor: end;
    font-size: 20px;
    fill: white;
    alignment-baseline: central
  }
   
  .language-percent {
    fill: darkgrey;
    alignment-baseline: central
  }

.container {
    display: relative;
  }

h2 {
    font-size: 30px;
    margin-bottom: 5px;
  }

#date {
    color: darkgrey;
    font-size: 50px;
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
</style>
</head>

<h2>Most popular programming languages on StackOverflow</h2>
<div class="container">
  <div id="chart"></div>
  <div id="date"></div>
</div>

const months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
           "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];

d3.csv("data.csv").then(data => {
    // convert string properties to numbers
    data.forEach(d => {
      d.yr = Number(d.yr);
      d.mo = Number(d.mo);
      d.total = Number(d.total);
    });

// find all unique tags
    const tags = d3.set(data.map(d => d.tag)).values();

const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
      .domain(tags);

const percentFormat = d3.format(".1%");

// a D3FC bar series component https://d3fc.io/api/series-api.html
    const barSeries = fc
      .autoBandwidth(fc.seriesSvgBar())
      .crossValue(d => d.tag)
      .align("left")
      .orient("horizontal")
      .key(d => d.tag)
      .mainValue(d => d.percent)
      .decorate(selection => {
        // this section uses the decorate pattern (https://d3fc.io/introduction/decorate-pattern.html)
        // to modify the data-join used by the bar series, allowing various customisations

// colour each bar
        selection.enter().style("fill", d => colorScale(d.tag));

// add language and percent indicators
        selection
          .enter()
          .append("text")
          .classed("language-label", true)
          .attr("transform", "translate(-5, 0)")
          .text(d => d.tag);
        selection
          .enter()
          .append("text")
          .classed("language-percent", true)
          .attr("transform", "translate(5, 0)")
        selection.select(".language-percent")
          .text(d => percentFormat(d.percent));
      });

// use D3FC extent (https://d3fc.io/api/extent-api.html) to compute
    // a suitable y axis range
    const yDomain = fc
      .extentLinear()
      .accessors([d => d.percent])
      .include([0])
      .pad([0.0, 0.05]);

// the D3FC chart component (https://d3fc.io/api/chart-api.html)
    const chart = fc
      .chartCartesian(d3.scaleLinear(), d3.scaleBand())
      .xOrient("top")
      .xTickFormat(percentFormat)
      .svgPlotArea(barSeries);

const renderChart = (year, month) => {

// filter the tag data for year / month and sort
      const currentTags = data
        .filter(d => d.yr === year && d.mo === month)
        .sort((a, b) => a.total - b.total);

// compute the percentages
      const totalTagCount = d3.sum(currentTags, d => d.total);
      currentTags.forEach(d => (d.percent = d.total / totalTagCount));

// update the chart domain
      chart.yDomain(currentTags.map(d => d.tag)).xDomain(yDomain(currentTags));

// render the chart
      d3.select("#chart")
        .datum(currentTags)
        .transition()
        .ease(d3.easeLinear)
        .duration(700)
        .call(chart);

// update the date indicator
      d3.select("#date")
        .text(`${months[month - 1]} ${year}`);
    };

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.41