Published
Edited
May 5, 2021
Insert cell
Insert cell
Insert cell
// Try changing the color to see what happens.
d3.selectAll("p").style("color", "black"); // "I want all paragraphs to have the color black."
Insert cell
Insert cell
{
// Add and configure an SVG element (<svg width="500" height="300">)
var svg = d3.create("svg") // add new SVG to page body
.attr("width", 500) // set SVG width to 500px
.attr("height", 300); // set SVG height to 300px
return svg.node();
}
Insert cell
Insert cell
{
// Add and configure an SVG element (<svg width="500" height="300">)
var svg = d3.create("svg") // add new SVG to page body
.attr("width", 500) // set SVG width to 500px
.attr("height", 300); // set SVG height to 300px
// Select & update existing rectangles contained in the SVG element
svg.selectAll("rect") // select all SVG rectangles
.attr("width", 100) // set rect widths to 100px
.style("fill", "steelblue"); // set rect fill colors
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// Add and configure an SVG element (<svg width="500" height="300">)
var svg = d3.create("svg") // add new SVG to page body
.attr("width", 500) // set SVG width to 500px
.attr("height", 300); // set SVG height to 300px
// Select SVG rectangles and bind them to data values.
var bars = svg.selectAll("rect.bars").data(values);
return svg.node();
}
Insert cell
Insert cell
{
// Add and configure an SVG element (<svg width="500" height="300">)
var svg = d3.create("svg") // add new SVG to page body
.attr("width", 500) // set SVG width to 500px
.attr("height", 300); // set SVG height to 300px
// Select SVG rectangles and bind them to data values.
var bars = svg.selectAll("rect.bars").data(values)
.join(
enter => enter.append("rect") // create new SVG rect marks
.attr("class", "bars"), // assign the class "bars" to these marks
update => update, // update the existing marks to change their style
exit => exit.remove() // remove outdated marks from the view
);
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
{
// Add and configure an SVG element (<svg width="500" height="300">)
var svg = d3.create("svg") // add new SVG to page body
.attr("width", 500) // set SVG width to 500px
.attr("height", 300); // set SVG height to 300px
// Select SVG rectangles and bind them to data values.
var bars = svg.selectAll("rect.bars")
.data(values)
.join("rect") // shorthand for creating and updating marks
.attr("class", "bars") // assign the class "bars" to these marks
bars.exit().remove(); // remove outdated marks from the view
return svg.node();
}
Insert cell
Insert cell
Insert cell
// Add and configure an SVG element (<svg width="500" height="300">)
svg = d3.create("svg") // add new SVG to page body
.attr("width", 500) // set SVG width to 500px
.attr("height", 300); // set SVG height to 300px
Insert cell
Insert cell
xscale = d3.scaleBand().domain(values.map(d => d.x)).range([0, 500]);
Insert cell
yscale = d3.scaleLinear().domain([0, d3.max(values, d => d.y)]).range([300, 0]);
Insert cell
cscale = d3.scaleOrdinal(d3.schemeTableau10).domain(values.map(d => d.x));
Insert cell
Insert cell
{
// Select SVG rectangles and bind them to data values.
var bars = svg.selectAll("rect.bars")
.data(chartValues) // Binding data (by order)
// .data(chartValues, d => d.x) // Binding data with a key function
.join("rect")
.transition().duration(500) // Specify that the properties should have a natural transition
.attr("class", "bars")
.attr("x", d => xscale(d.x)) // Update the x position
.attr("y", d => yscale(d.y)) // Update the y position
.attr("width", xscale.bandwidth()) // Update the width
.attr("height", d => 300 - yscale(d.y)) // Update the height
.style("fill", d => cscale(d.x))
.style("stroke", "white");
var text = svg.selectAll("text")
.data(chartValues) // Binding data (by order)
// .data(chartValues, d => d.x) // Binding data with a key function
.join("text")
.transition().duration(500) // Specify that the properties should have a natural transition
.attr("x", d => xscale(d.x)) // Update the x position
.attr("y", d => yscale(d.y)) // Update the y position
.attr("dx", "1.5em") // Update the x offset
.attr("dy", 20) // Update the y offset
.attr("fill", "white")
.style("font-size", "small")
.text(d => d.y);
return svg.node();
}
Insert cell
Insert cell
Insert cell
chartValues = values
// chartValues = tensplace(values)
// chartValues = shuffle(tensplace(values))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more