The Wave

A somewhat unusual bar chart.

forked from HarryStevens's block: The Wave

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <style>
      body {
        margin: 0 auto;
      }
      .label {
        fill: #fff;
        text-anchor: middle;
        font-family: "Helvetica Neue", sans-serif;
        font-size: .8em;
      }
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
    <script>
      var alpha = "abcdefghijklmnopqrstuvwxyz".split(""),
        odd = true,
        interval = 2000,
        y_max = 2;

var margin = {top: 0, bottom: 20, left: 0, right: 1},
        width = window.innerWidth - margin.left - margin.right,
        height = window.innerHeight - margin.top - margin.bottom,
        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 + ")");

var x = d3.scaleBand()
          .rangeRound([0, width])
          .domain(alpha)
          .padding(.2);

var y = d3.scaleLinear()
          .range([height, 0])
          .domain([0, y_max]);

var c = chroma.scale(["steelblue", "violet", "tomato"]).domain([1, y_max]);

svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0, " + height + ")")
          .call(d3.axisBottom(x));

redraw(makeData());

d3.interval(function(){
        redraw(makeData());  
      }, interval);

function redraw(data){

var bar = svg.selectAll(".bar")
            .data(data, function(d){ return d.name; });

var label = svg.selectAll(".label")
            .data(data, function(d){ return d.name; });

bar.transition().delay(calcDelay)
            .attr("y", calcY)
            .attr("height", calcHeight)
            .style("fill", function(d){ return c(d.value); });

label.transition().delay(calcDelay)
            .attr("y", calcY)
            .text(function(d){ return d.value; });

bar.enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d){ return x(d.name); })
            .attr("width", x.bandwidth())
            .attr("y", calcY)
            .attr("height", calcHeight)
            .style("fill", function(d){ return c(d.value); })

label.enter().append("text")
            .attr("class", "label")
            .attr("x", function(d){ return x(d.name) + x.bandwidth() / 2; })
            .attr("y", calcY)
            .attr("dy", 18)
            .text(function(d){ return d.value; });

}

function makeData(){
        odd = odd ? false : true;
        return alpha.map(function(d, i){
          return {
            name: d,
            value: odd ? +((alpha.length - i) / (alpha.length / y_max)).toFixed(2) : +((i + 1) / (alpha.length / y_max)).toFixed(2)
          }
        });
      }      
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js