Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind D3.js?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
<___ src="//d3js.org/d3.v3.min.js"></script>D3.js is a JavaScript library for manipulating HTML data. D3.js is easy to use.
D3.js is easy to use.
How to Use D3.js?
To use D3.js in your web page, add a link to the library:
<script src="//d3js.org/d3.v3.min.js"></script>This script selects the body element and appends a paragraph with the text "Hello World!":
d3.select("body").append("p").text("Hello World!");Scatter Plot
Example
// Set Dimensions
const xSize = 500;
const ySize = 500;
const margin = 40;
const xMax = xSize - margin*2;
const yMax = ySize - margin*2;
// Create Random Points
const numPoints = 100;
const data = [];
for (let i = 0; i < numPoints; i++) {
data.push([Math.random() * xMax, Math.random() * yMax]);
}
// Append SVG Object to the Page
const svg = d3.select("#myPlot") .append("svg") .append("g") .attr("transform","translate(" + margin + "," + margin + ")");
// X Axis
const x = d3.scaleLinear() .domain([0, 500]) .range([0, xMax]);
svg.append("g") .attr("transform", "translate(0," + yMax + ")") .call(d3.axisBottom(x));
// Y Axis
const y = d3.scaleLinear() .domain([0, 500]) .range([ yMax, 0]);
svg.append("g") .call(d3.axisLeft(y));
// Dots svg.append('g') .selectAll("dot") .data(data).enter() .append("circle") .attr("cx", function (d) { return d[0] } ) .attr("cy", function (d) { return d[1] } ) .attr("r", 3) .style("fill", "Red");