Old school D3 from simpler times

All examples By author By category About

skimlik

Full window Github gist

commission bars

Built with blockbuilder.org

<!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; }
    .axis--y path { stroke: gray; stroke-width: 1.5px; }
    .axis--x path { stroke: gray; stroke-width: 1.5px; }
    .tick line { opacity: 0.2; stroke: #9b9999; }
    .focus { fill: #FEE9DA; opacity: 0.7; }
    .bar { fill: steelblue; }
    .legend { pointer-events: none; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var size = {
      'width': 762, 'height': 320,
      'margin': {
        'left': 70, 'top': 20, 'right': 20, 'bottom': 40
      }
    };
    
    var clientWidth = size.width - size.margin.left - size.margin.right;
    var clientHeight = size.height - size.margin.top - size.margin.bottom;
    var barHeight = 70;
    
    var svg = d3.select("body").append("svg")
      .attr("width", size.width)
      .attr("height", size.height)

d3.json('data.json', function (error, data) {
           
    if (error){
      console.log(error);
      return;
    }

var maxValue = d3.max([data.YTD, data.LastYr], function(d) {
        return d;
      });
		
    var xScale = d3.scaleLinear().domain([0, maxValue + maxValue/10]).range([0, clientWidth]);
    var xAxis = d3.axisBottom(xScale).tickSizeInner(-clientHeight);
    
    var yScale = d3.scaleLinear().domain([0, 3]).range([0, clientHeight]);
    var yAxis = d3.axisLeft(yScale).ticks(0);
    
    var plot = svg.append('g')
    	.attr('class', 'plot-area')
    	.attr('transform', 'translate(' + size.margin.left + ', ' + size.margin.top + ')');
    
   
    plot.append('rect')
      .attr('width', clientWidth)
      .attr('height', clientHeight)
    	.attr('class', 'focus')
    	.attr('x', 0)
      .attr('y', 0);

var chart = plot
    	.append('g')
    	.classed('chart', true);
    
    var barsData = [data.YTD, data.LastYr];
    
    var bars = chart.selectAll('g')
    	.data(barsData).enter()
    	.append('g')
    	.attr('transform', function(d, i) {
        	return 'translate(0, ' + (yScale(i + 1) - barHeight / 2) + ')'
      	})
    		.append("rect")
   			.attr("class", "bar")
    		.attr("id", function(d, i) { return "bar"+i })
    		.attr("width", function(d) { return xScale(d); })
    		.attr("height", barHeight)
    		.attr("opacity", function(d, i) {
           return i === 0 ? 1: 0.7;
        }).on('mouseover', function() {
          var e = d3.event;
          var target = e.target;
					var id = target.id;
          d3.select(target)
            .style('opacity', function () {
            	return id === "bar0" ? 0.8: 0.5;
          	});
        }).on('mouseleave', function() {
          var e = d3.event;
          var target = e.target;
          var id = target.id;
          
          d3.select(target)
            .style('opacity', function () {
            	return id === "bar0" ? 1: 0.7;
          	});
        });
    
    
    plot.append('g').attr('class', 'axis axis--x')
    	.attr('transform', 'translate(0, ' + clientHeight + ')')
      .call(xAxis);
    
    plot.append('g').attr('class', 'axis axis--y')
    	.attr('transform', 'translate(0, 0)')
      .call(yAxis);    
    
    var text1ypos = yScale(1) + 25;
    var text2ypos = yScale(2) + 25;
    
    svg.append('text').text('YTD')
      .attr('x', 10)
    	.attr('y', function() { return yScale(1) + 25; })
    	.style('font-family', 'helvetica')
    	.style('font-size', '8pt')
    	.style('font-weight', 'normal')
    
    svg.append('text').text('LAST YR')
      .attr('x', 10)
    	.attr('y', function() { return yScale(2) + 25; })
    	.style('font-family', 'helvetica')
    	.style('font-size', '8pt')
    	.style('font-weight', 'normal')
    
    svg.append('text').text(data.YTD.toFixed(3).toString())
    	.attr('x', function() {
      	return xScale(data.YTD - 70)
    	})
    	.attr('y', text1ypos)
    	.classed('legend', true)
    	.attr('fill', 'white')
    
    svg.append('text').text(data.LastYr.toFixed(3).toString())
    	.attr('x', function() {
      	return xScale(data.LastYr - 70)
    	})
    	.attr('y', text2ypos)
    	.classed('legend', true)
    	.attr('fill', 'white')
    
    svg.append('text').text('USD($)')
    	.attr('x', 0).attr('y', size.height - 10)
    	.style('font-family', 'helvetica');
    });
  </script>
</body>

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