D3 Examples - Active Colorado Mine Claims

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .bar {
    fill: steelblue;
  }
  
  div.tooltip {
    position: absolute;
    max-width: 100px;
    padding: 3px 6px;
    background: whitesmoke;
    border: 1px solid gray;
    border-radius: 5px;
    pointer-events: none;
    padding: 10px;
  }
​
  div.tooltip p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 0;
    margin: 0;
    text-align: center;
  }
</style>
​
<body>
    <p>Start Year:<br /><input type="text" value="2000" id="startYear" /></p>
    <p>End Year:<br /><input type="text" value="2019" id="endYear"/></p>
    <p><input type="button" value="Go!" onclick="doChart()" /></p>
​
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script>
​
    var margin = { top: 20, right: 20, bottom: 50, left: 100 },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
​
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom
​
    var x = d3.scaleBand().range([0, width]).padding(0.2);
    var y = d3.scaleLinear().range([height, 0]);
​
    var tooltip;
    tooltip = d3.select('body').append('div')
      .attr('class', 'tooltip')
      .style('opacity', 0);
​
    const doChart = () => {
      
      d3.select("body").selectAll("svg").remove();
​
      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 + ")");
​
      // get the data
      d3.csv("20190917_mine_claims_by_year.csv", function (error, data) {
​
        if (error) throw error;
​
        data.forEach(function (d) {
          d.count = +d.count;
          d.year = +d.year;
        });
​
        sorted = [];
​
        startYear = +document.getElementById('startYear').value
        endYear = +document.getElementById('endYear').value
        data.forEach(function (d) {
          if(d.year >= startYear && d.year <= endYear) {
            sorted.push(d)
          }
        });
​
        data = sorted;
​
        x.domain(data.map(function (d) { return d.year; }));
        y.domain([0, d3.max(data, function (d) { return d.count; })]);
​
        svg.selectAll(".bar")
          .data(data)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function (d) { return x(d.year); })
          .attr("width", x.bandwidth())
          .attr("y", function (d) { return y(d.count); })
          .attr("height", function (d) { return height - y(d.count); })
          .on("mouseover", function(d,i) {
            d3.select(this).style("stroke-width","2");
            d3.select(this).style("stroke","black");
            d3.select(this).style("cursor","pointer");
            d3.select(this.parentNode).raise();
            setTimeout(showTooltip(d.year, d.count, i), 3000)
          })
          .on("mouseout", function(d,i) {
            d3.select(this.parentNode).lower();
            d3.select(this).style("stroke-width","0");
            setTimeout(hideTooltip(), 1000);
          })
​
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
          .attr("y", 10)
          .attr("x", 5)
          .attr("dy", ".35em")
          .attr("transform", "rotate(45)")
          .style("text-anchor", "start")
          .style("font-size", "9px")
​
        svg.append("g")
          .call(d3.axisLeft(y));
​
        svg.append("g")
          .attr("transform", `translate(${width / 2},${height + 45})`)
          .append('text')
          .attr("font-family", "Arial")
          .style("font-size", "12px")
          .text("Year");
​
        svg.append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", -50)
          .attr("x", 0 - (height / 2))
          .attr("font-family", "Arial")
          .style("font-size", "12px")
          .style("text-anchor", "middle")
          .text("Active Claims");
​
        });
    }
  
  const showTooltip = (year, count, i) => {
    var tooltip_msg = `<p>There were ${count} total claims in ${year}.</p>`;
    tooltip.style('opacity', 1);
    tooltip.html(tooltip_msg).style('left', (d3.event.pageX - 0) + 'px').style('top', (d3.event.pageY - 0) + 'px');
  }
​
  const hideTooltip = () => {
    tooltip.style('opacity', 0);
  }
​
  doChart()
​
  </script>
</body>
<!-- https://blockbuilder.org/FergusDevelopmentLLC/9e0e61fedb49db473b5b0179428d8e89 -->
<!-- https://bl.ocks.org/FergusDevelopmentLLC/raw/9e0e61fedb49db473b5b0179428d8e89/ -->
    