JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<div id="chart"></div>

JavaScript

var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
},
width = 400 - margin.right - margin.left,
    height = 400 - margin.top - margin.bottom;

var ttestArray = [
    [1, 4, "my text"],
    [3, 9, "more text"],
    [5, 13, "third bit of text"]
];

var xScale = d3.scale.linear()
    .domain([0, d3.max(ttestArray, function (d) {
    return d[0];
})])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(ttestArray, function (d) {
    return d[1];
})])
    .range([0, height]);



var SVGTTest = d3.select("#chart").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)


var ttest = SVGTTest.selectAll("g").data(ttestArray);

ttest.exit()
    .style("opacity", 1)
    .transition()
    .duration(300)
    .style("opacity", 0)
    .remove();

ttest.enter()
    .append("g");


ttest.append("rect").attr("x", function (d, i) {
    var startIndex = (ttestArray[i][0] + 1) * 1;
    return xScale(startIndex);
})
    .attr("y", function (d, i) {
    return yScale(ttestArray[i][1]);
})
    .attr("width", function (d, i) {
    var endIndex = (ttestArray[i][1] - ttestArray[i][0] * 1);
    return xScale(endIndex);
})
    .attr("height", 30)
    .style("opacity", 0)
    .transition().duration(500)
    .style("opacity", 1)
    .style("fill", "#000000");


ttest.append("text").attr("x", function (d, i) {
    var startIndex = (ttestArray[i][0] + 1) * 1;
    return xScale(startIndex);
    })
    .attr("y", function (d, i) {
        return yScale(ttestArray[i][1]);
    })
    .attr("dy", "-0.5em")
    .text(function(d, i) { 
        return ttestArray[i][2]; 
    });