xxxxxxxxxx<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; } </style></head><body> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) d3.json("data.json", function(err, json) { var g = d3.select("svg").selectAll("g") .data(json) .enter() .append("g") //we need to set the original y-value of the rectangles instead of coordinates (0,0) .attr("transform", function (d) { if (d.orientation === 'forward') { //the + are cuz it's building a string return "translate(" + -(d.stop-d.start) + ", 100)"; } else { //it will start off at the far right of the screen, which we know from the screen width. return "translate(" + 960 + ",125)"; } }); g.transition() //takes no argumetent. just saying that you want to do animations .duration(1000) //takes a single argument and says how long we want it to last .delay(function(d) {return d.start}, 1000) .attr("transform", function (d) { if (d.orientation === 'forward') { return "translate(" + d.start + ",100)"; } else { return "translate(" + d.start + ",125)"; } }); g.append("rect") .attr("height", 50) .attr("width", function (d) { return d.stop - d.start; }) .attr("fill", function(d) { if (d.orientation == "forward") { return "green"; } else if (d.orientation == "reverse") { return "red"; } }) .attr("stroke-width", 3) .attr("stroke", "#000000"); g.append("text") .attr("x", function (d) { return (d.stop-d.start)/2}) .attr("y", 25) .text(function (d) { return d.name; }) .attr("text-anchor", "middle") .attr("alignment-baseline", "central"); }); </script></body> https://d3js.org/d3.v4.min.js