JSFiddle - React, Tailwind, and code Playground

by Paul Lan

HTML

<h3 id="d3">SVG it!</h3>

JavaScript

var canvas = d3.select('body').append('svg').attr('width', 500).attr('height', 600);

var myArray = [10, 29, 50, 70, 80, 100];



var theWidthScale = d3.scale.linear()
                    .domain([0, 100])
                    .range([0, 400]);

var theColorScale = d3.scale.linear()
                    .domain([0, 100])
                    .range(['#FFFF00', '#FF0000']);


var theAxis = d3.svg.axis().scale(theWidthScale).ticks(10).orient('top')

var theBarG = canvas.append('g').attr('transform', 'translate(50, 0)');

var theAxisG = canvas.append('g').attr('transform', 'translate(50, 580)').call(theAxis);


var bars = theBarG.selectAll('rect')
    .data(myArray)
    .enter()
    .append('rect')
    .attr('width', 0)
    .transition()
    .attr('width', function (d, i) {
    return theWidthScale(d);
})
    .attr('height', 100)
    .attr('y', function (d, i) {
    return i * 150;
})
.style('fill', function(d){
    return theColorScale(d)
})

theBarG.selectAll('rect')
    .data(myArray).exit().transition().attr('width', 0).remove()

theBarG.selectAll('text')
    .data(myArray)
    .enter()
    .append('text')
    .attr('y', function (d, i) {
    return i * 150 + 55
})
    .style({
    'stroke': '#FFFFFF',
    'stroke-width': 0.5,
    'font-size': '20'
})

    .text(function (d, i) {
    return 'The ' + (i + 1) + ' Rectangle'
})