JSFiddle - React, Tailwind, and code Playground

by loleg

HTML

<script src="https://edit.cms.unibe.ch/++resource++zms_/iframeresizer/iframeResizer.contentWindow.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>

CSS

.axis text {
  font: 10px sans-serif;
}
.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

var dispatch = d3.dispatch("load", "statechange");
var groups = [
  
  "Nival",
  "Upper alpine",
  "Lower alpine",
  "Upper montane",
  "Lower montane",
  "Mountain with frost",
  "Mountain without frost"
];
d3.csv("https://funkycoda.github.io/mountains/area/data.csv", type, function(error, states) {
  if (error) throw error;
  var stateById = d3.map();
  states.forEach(function(d) { stateById.set(d.id, d); });
  dispatch.load(stateById);
  dispatch.statechange(stateById.get("Adamawa"));
});
// A drop-down menu for selecting a state; uses the "menu" namespace.
dispatch.on("load.menu", function(stateById) {
  var select = d3.select("body")
    .append("div")
    .append("select")
      .on("change", function() { dispatch.statechange(stateById.get(this.value)); });
  select.selectAll("option")
      .data(stateById.values())
    .enter().append("option")
      .attr("value", function(d) { return d.id; })
      .text(function(d) { return d.id; });
  dispatch.on("statechange.menu", function(state) {
    select.property("value", state.id);
  });
});
// A bar chart to show total population; uses the "bar" namespace.
dispatch.on("load.bar", function(stateById) {
  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 80 - margin.left - margin.right,
      height = 460 - margin.top - margin.bottom;
  var y = d3.scale.linear()
      .domain([0, d3.max(stateById.values(), function(d) { return d.total; })])
      .rangeRound([height, 0])
      .nice();
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(d3.format(".2s"));
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
  var rect = svg.append("rect")
      .attr("x", 4)
      .attr("width", width - 4)
 ...