JavaScript D3

New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter3: Designing A Page Layout: Creating A Website For A Chocolatier
Section3.3: Visual Overview: Layout With Positioning Styles
Problem 4QC
icon
Related questions
Question

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. 

Expert Solution
steps

Step by step

Solved in 3 steps

Blurred answer
Knowledge Booster
Introduction to computer system
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning