May 2019
Beginner to intermediate
650 pages
14h 50m
English
Let's create a simple D3-powered data-driven visualization to test your configuration. Create a new HTML file in your development environment and import the D3 library, or import it into any HTML page using the <script> tag as shown in the last section. Then add an <svg> and a <script> block inside your page's <body> as follows:
<body> <svg id="chart" width="600" height="200"></svg> <script> </script></body>
Now add the following array inside the <script> block:
const array = [100, 200, 300, 350, 375, 400, 500];
We will use that array to generate a series of dots. Type in the following code (you can ignore the comments), which consists of a series of chained commands:
d3.select("#chart") // selects the svg element by id (like ...Read now
Unlock full access