JavaScript D3
JavaScript D3
<script src='https://d3js.org/d3.v7.min.js'></script>
<script>
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400)
.style("border", '1px solid green');
//Create and append rectangle element
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 200)
.attr("height", 100)
.attr("fill", 'pink');
//Append circle
svg.append("circle")
.attr("cx", 250)
.attr("cy", 50)
.attr("r", 50);
svg.append("ellipse")
.attr("cx", 250)
.attr("cy", 50)
.attr("rx", 150)
.attr("ry", 50);
//Create and append text element into group
svg.append("text")
.attr("x", 150)
.attr("y", 50)
.attr("stroke", "#fff")
.text("This is some text!");
</script>
Build an SVG scene that is created from an external file. You need to create a CSV with information about the shapes. You should include columns in your CSV file for the type of shape (circle, rectangle, ellipse, line), its dimensions and position, and colour. Your program reads the data and creates and displays the shapes to the screen.
Extend the same to include the ‘enter’ and ‘exit’ concepts. So that the SVG elements are updated, created or removed based on the CSV data from your CSV file.
Step by step
Solved in 3 steps
