D3 Examples - Bar Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    const color_white = "rgb(255, 255, 255)"
    
    function inhale(transition) {
      transition
        .duration(3000).ease(d3.easeCubicInOut)
        .attr("d", d3.arc()
          .innerRadius(0)
          .outerRadius(60)
          .startAngle( -Math.PI / 2 )
          .endAngle(Math.PI / 2 ))
        .on("end", function () { d3.select(this).transition().call(exhale); });
    }
    
    function exhale(transition) {
      transition
        .duration(2000).ease(d3.easeCubicInOut)
        .attr("d", d3.arc()
          .innerRadius(0)
          .outerRadius(50)
          .startAngle( -Math.PI / 2 )
          .endAngle(Math.PI / 2 ))
         .on("end", function () { d3.select(this).transition().call(inhale); });
    }
    
    function updateColor(arc) {
      d3.select(colorLock)
        .transition()
        .duration(1000)
        .tween("attr:color", function() {
          var i = d3.interpolateRgb("black", "white");
          return function(t) { arc.attr("stroke", i(t)); };
        });
    }
    
    function updateScore(transition) {
      transition.duration(1000).ease(d3.easeLinear)
          .attr("y", (d) => yScale(d))
          .attr("height", (d) => height - yScale(d))
    }
    
    const scores = [0, 0, 0, 0];
    const keys = {"Digit1": 0, "Digit2": 1, "Digit3": 2, "Digit4": 3}
    
    const colorLock = {}
    
    const widthSvg = 960;
    const heightSvg = 500;
    const margin = { top: 0, right: 0, bottom: 25, left: 0 };
    
    const svg = d3.select("body").append("svg")
      .attr("width", widthSvg)
      .attr("height", heightSvg);
    
    const width = svg.attr("width") - margin.left - margin.right;
    const height = svg.attr("height") - margin.top - margin.bottom;
    
    const g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    
    const xScale = d3.scaleBand().range([0, width]).domain([0, 1, 2, 3]).padding(0.05);
    // Axe des abcisses
        const xAxis = g.append("g")
        .attr("class", "axis")
                .attr("transform", "translate(0, " + height + ")")
                .call(d3.axisBottom(xScale))
    xAxis.select(".domain").remove()
    xAxis.selectAll("text")
          .style("font-size", 12)
                .text((d, i) => `Joueur ${d + 1}`);
    
        const yScale = d3.scaleLinear().range([height, 0]).domain([0, 10]);
    
    const zScale = d3.scaleOrdinal(d3.schemeCategory10);
    
    g.selectAll(".bar")
        .data(scores)
            .enter().append("rect")
        .attr("class", "bar")
            .attr("fill", (d, i) => zScale(i))
        .attr("x", (d, i) => xScale(i))
        .attr("width", xScale.bandwidth())
        .attr("y", (d) => yScale(d))
        .attr("height", (d) => height - yScale(d));
    
    d3.select("body").on("keypress", function() {
      if(d3.event.code in keys)
        scores[keys[d3.event.code]]++;
      
      g.selectAll(".bar")
        .data(scores)
        .transition().call(updateScore)
      
      g.selectAll(".arc")
        .data(scores)
        .filter(function(d, i) {
            return d3.select(this).attr("stroke") !== color_white && d >= 1
        })
            .call(updateColor)
      
      const audio = new Audio('https://noproblo.dayjo.org/ZeldaSounds/OOT/OOT_Notes_Ocarina_D_short.wav');
            audio.play();
    })
    
    g.selectAll(".arc")
      .data(scores)
        .enter()
      .append("path")
        .attr("class", "arc")
      .attr("transform", (d, i) => {
        return "translate(" + 
                (xScale(i) + xScale.bandwidth() - xScale.bandwidth()/2) + "," +
                yScale(d) + ")"
        })
      .attr("d", d3.arc()
        .innerRadius(0)
        .outerRadius(50)
        .startAngle( -Math.PI / 2 )
        .endAngle(Math.PI / 2 ))
      .attr('stroke', 'black')
      .attr('fill', (d, i) => zScale(i))
        .transition().call(inhale);
​
  </script>
</body>
​
    