D3 Examples - roughbar

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Gaegu');
  </style>
</head>
<body>
  <!-- Create a div where the graph will take place -->
  <div id="vis"></div>
    <script>
​
  let color = 'chocolate';
  let title = "Skate Tricks"
​
    const margin = { top: 40, right: 20, bottom: 50, left: 100 }
    const width = 920 - margin.left - margin.right;
    const height = 420 - margin.top - margin.bottom;
​
    let svg = d3.select('#vis')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
          .append("g")
          .attr('id', 'new')
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")")
​
​
    const roughSvg = document.getElementById('new');
​
    const rc = rough.svg(roughSvg, {
      options: {
      fill: color,
      stroke: color,
      strokeWidth: 1,
      roughness: 1.4,
      bowing: 1,
      fillStyle: 'cross-hatch'
      }
    });
​
​
    const x = d3.scaleLinear()
      .rangeRound([0, width]);
​
    const y = d3.scaleBand()
      .rangeRound([0, height])
      .padding(0.1);
    
​
    d3.csv("skate.csv", function (d) {
      console.log(d)
        d.count = +d.count;
        return d;
      }, function (error, data) {
        if (error) throw error;
​
        y.domain(data.map(function (d) { return d.trick; }));
        
        x.domain([0, d3.max(data, function (d) { return d.count; })]);
​
        data.forEach(function (d) {
          let node = rc.rectangle(0, y(d.trick), x(d.count), y.bandwidth());
          bar = roughSvg.appendChild(node);
          bar.setAttribute('class', 'bar');
          bar.setAttribute('count', d.count)
​
        });
​
​
        // x-axis
        svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .selectAll("text")
          .attr("transform", "translate(-10,0)rotate(-45)")
          .style("text-anchor", "end")
          .style('font-family', 'Gaegu')
          // .style('font-weight', 'bold')
          .style('font-size', '1rem');
​
        // y-axis
        svg.append("g")
          .call(d3.axisLeft(y))
          .selectAll('text')
          .style('font-family', 'Gaegu')
          .style('font-size', '1rem');
​
        // title
        svg.append("text")
          .attr("x", (width / 2))             
          .attr("y", 0 - (margin.top / 2))
          .attr("text-anchor", "middle")  
          .style("font-size", "2rem")
          .style('font-family', 'Gaegu')
          // .style('font-weight', 'bold')
          .text(title);
​
           // create a tooltip
          let Tooltip = d3.select("#vis")
            .append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")
            .style("background-color", "white")
            .style("border", "solid")
            .style("border-width", "1px")
            .style("border-radius", "5px")
            .style("padding", "10px")
            .style('max-width', '100px ')
            .style('font-family', 'Gaegu')
​
           // Three function that change the tooltip when user hover / move / leave a cell
          let mouseover = function(d) {
            console.log('mouseover')
            Tooltip
              .style("opacity", 1)
          }
​
          let mousemove = function(d) {
            let count = d3.select(this).attr('count');
            Tooltip
              .html(`The exact value of<br>this cell is: ${count}`)
              .style('transform', `translate(${d3.event.layerX }px, 
                                  ${d3.event.layerY - (height + margin.top + margin.bottom)}px)`)
            }
            let mouseleave = function(d) {
              Tooltip
                // .transition()
                // .duration(1000)
                .style("opacity", 0)
            }
​
          d3.selectAll('.bar')
          .on('mouseover', function() {
            mouseover()
            d3.select(this).selectAll('path').style('stroke', 'red')
          })
​
          d3.selectAll('g.bar')
          .on('mouseout', function() {
            mouseleave()
            d3.select(this).selectAll('path').style('stroke', color)
          })
​
          d3.selectAll('g.bar')
            .on('mousemove', mousemove)
​
​
      });
</script>
</body>
</html>
    