D3 Examples - bosch % bar

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .revenue {fill: url(#revenue);}
    .target-to-go {fill: #2c2279;}
    .target {fill: #2c2279;}
  </style>
</head>
​
<body>
  <svg>
    <defs>
        <linearGradient id="revenue">
        <stop offset="5%"  stop-color="#63b1e9"/>
        <stop offset="95%" stop-color="#9b71fc"/>
      </linearGradient>
    </defs>
  </svg>
  <script>
    //Data
    const people = [{
      name: 'John Perry',
      revenueTarget: 36000,
      revenueTargetToGo: 38000,
      revenue:36000
    },
    {
        name: 'Theo Parrish',
      revenueTarget: 12881,
      revenueTargetToGo: 19402,
      revenue:8363  
    }, 
    {
        name: 'Daj Spokoj',
      revenueTarget: 32890,
      revenueTargetToGo: 25594,
      revenue:90850  
    },
                   ];
    
    for (let i = 0; i < people.length; i++) {
      let values = [];
      for (let prop in people[i]) {
         if (prop != 'name') values.push(people[i][prop]);
      }
      people[i].max = d3.max(values);
    }
    
    //Variables
    const margin = {top: 50, right: 20, bottom: 20, left: 20};
    const barHeight = 60;
    const labelWidth = 100;
    const height = barHeight * people.length;
    const maxWidth = d3.max(people, d => d.max);
    
    
    
    
    var chartG = d3.select("svg")
      .attr("width", '100%')
      .attr("height", height + margin.top + margin.bottom)
        .append('g')
        .attr('class', 'chart')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);
    
    let svgWidth = d3.select('svg')
        .node()
        .getBoundingClientRect()
        .width;
    
    
    let xScale = d3.scaleLinear()
        .domain([0, maxWidth])
        .range([0, svgWidth - 2 * margin.left - margin.right - labelWidth]);
    
    chartG.append('g')
        .attr('class', 'axis')
        .call(d3.axisBottom(xScale)
            .ticks(4)
                .tickFormat(d3.format(".0s")))
        .attr('transform', `translate(${labelWidth + margin.left}, ${height})`)
    
    let axis = d3.select('.axis');
    axis.select('path')
        .attr('stroke', 'none')
    axis.selectAll('line')
        .attr('y2', -height - margin.top)
        .attr('stroke', 'gray')
    axis.select('line')
        .attr('stroke', 'none')
    axis.select('text')
        .attr('fill', 'none')
​
    chartG.selectAll('g.row')
        .data(people, d => d)
        .enter()
        .append('g')
        .attr('class', 'row')
        .attr('transform', (d, i) => `translate(0, ${i * barHeight})`)
        .append('text')
        .attr('class', 'label')
        .text(d => d.name)
        .attr('text-anchor', 'end')
        .attr('transform', `translate(${labelWidth} , 0)`);
    
    
        
        chartG.selectAll('.row')
        .append('rect')
        .attr('class', 'target-to-go')
        .attr('width', d => xScale(d.revenueTargetToGo))
        .attr('height', 3)
        .attr('rx', 3)
        .attr('transform', `translate(${labelWidth + margin.left}, -6.5)`)
    
    chartG.selectAll('.row')
        .append('rect')
        .attr('class', 'revenue')
        .attr('width', d => xScale(d.revenue))
        .attr('height', 10)
        .attr('rx', 4)
        .attr('transform', `translate(${labelWidth + margin.left}, -10)`)
    
    chartG.selectAll('.row')
        .append('circle')
        .attr('class', 'target')
        .attr('r', 9)
        .attr('transform', d => `translate(${labelWidth + margin.left + xScale(d.revenueTarget)}, -5)`)
    
    
        
  </script>
</body>
​
    