D3 Examples - Craft Brewery Count By State

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:0;
      position:fixed;
    }
    .btn {
      font-family: sans-serif;
      font-size: 16px;
    }
    .btn.active { font-weight: bold; }
    .btn:hover { cursor: pointer; }
    #label {
      font-size: larger;
      font-weight: bold;
      text-decoration: underline;
      pointer-events: none;
    }
  </style>
</head>
​
<body>
  <script>
    const width = 900;
    const height = 500;
    const padding = {
      left: 50,
      top: 10,
      right: 0,
      bottom: 110,
    };
    const svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    d3.json("brewery_count_by_state.json", (error, json) => {
      const perCapitaMin = d3.min(json, d => d.capita_per_brewery);
            const perCapitaMax = d3.max(json, d => d.capita_per_brewery);
      const breweryCountMin = d3.min(json, d => d.brewery_count);
      const breweryCountMax = d3.max(json, d => d.brewery_count);
      
      const yScaleBreweryCount = d3.scaleLinear()
                                        .domain([breweryCountMin, breweryCountMax])
                                        .range([height - padding.top, padding.bottom]);
      
      const yScalePerCapita = d3.scaleLinear()
                                        .domain([perCapitaMin, perCapitaMax])
                                        .range([height - padding.top, padding.bottom]);
      
      const xScale = d3.scaleBand()
                                        .domain(json.map(d => d.state))
                                        .range([padding.left, width - padding.right])
                                        .padding(0.1);
      
      let rects = svg.selectAll("rect")
                                .data(json)
                                .enter()
                                .append("rect");
      
      const text = svg.selectAll("text")
            .data([
              {
                label: "Select Graph to Display",
                id: "label",
              },
              {
                label: "total brewery count",
                id: "brewery_count",
                yScale: yScaleBreweryCount,
              },
              {
                label: "capita per brewery",
                id: "capita_per_brewery",
                yScale: yScalePerCapita,
              }
                ])
            .enter()
            .append("text")
            .attr("x", d => 650)
            .attr("y", (d, i) => 50 + 30 * i)
            .text(d => d.label)
            .attr("class", "btn") 
            .attr("id", d => d.id);
      
      const clicked = (d) => {
        drawBars(d.id, d.yScale);
        d3.selectAll(".btn").classed("active", false);
        d3.select(`#${d.id}`).attr("class", "btn active");
      };
      
      text.on("click", clicked);
      
      rects.enter().append("rect")
                .merge(rects)
                .attr("class", "bar")
            .attr("x", d => xScale(d.state))
                .attr("width", xScale.bandwidth())
                .attr("y", d => height - padding.bottom + padding.top)
            .attr("height", 0)
                .attr("fill", "blue");
      
      const drawBars = (dataKey, yScale) => {
        const barTransition = d3.transition()
            .duration(1000)
            .ease(d3.easePoly); 
        
        rects.exit().remove();
        d3.select("g.y-axis").remove();
        
        svg.selectAll(".bar")
            .transition(barTransition)
            .attr("height", d => height - yScale(d[dataKey]))
            .attr("y", d => yScale(d[dataKey]) - padding.bottom + padding.top)
      
        svg.append("g")
                .attr("class", "axis y-axis")
            .attr("transform", `translate(${padding.left},${padding.top-padding.bottom})`)
            .call(d3.axisLeft(yScale));
​
        svg.append("g")
                .attr("class", "axis x-axis")
            .attr("transform", `translate(0,${height - padding.bottom + padding.top})`)
            .call(d3.axisBottom(xScale))
            .selectAll("text")
            .attr("transform", `rotate(90) translate(${padding.top},${(-5.5-xScale.bandwidth()/2)})`)
            .attr("text-anchor", "start");  
      };
      
      drawBars("brewery_count", yScaleBreweryCount);
      d3.select("#brewery_count").classed("active", true);
​
    });
​
  </script>
</body>
​
    