Day 23 - Force SimulationDay 22 - Delaunay/VoronoiDay 21 - Object ConstancyDay 20 - Animations Part 2Day 19 - InterpolatorsDay 18 - Join, Enter, Update, ExitDay 14 - Interactions 3 - DraggingDay 13 - Interactions 2 - Zooming25 days of D3Day 12 - Interactions 1 - Click and HoverDay 11 - Introduction to AnimationsDay 3 - Controlling the Flow of DataDay 10 - TreemapDay 9 - Stacked Bar ChartDay 8 - Scatter PlotDay 7 - A Line ChartDay 6 - Donut ChartDay 5 - Our First Bar ChartDay 4 - Groups, Attributes and StylesDay 2 - Scales, Shapes and Colors
Day 1 - One Shape, Many Shapes
{
d3.select('#myId') // select by id
d3.select('.my-id') // select by class
d3.select('#containerId rect.my-rectangle') // select children elements that match a class, etc.
return 'These selectors all work'
}
html `<svg height="40" width="40" style="border:1px solid #ccc"/>`
oneShape = {
const svgHTML = html `<svg height="40" width="40" style="border:1px solid #ccc"/>`
// first, we select our svg object
const svg = d3.select(svgHTML)
// now, we append a rect (rectangle) element to the SVG
const rect = svg.append('rect')
// finally, we style and position the rect
rect
.style('fill', 'black') // rect's fill color
.attr('height', 20) // rect's height (in pixels)
.attr('width', 20) // rect's width (in pixels)
.attr('x', 10) // x position of the top-left corner
.attr('y', 10) // y position of the top-left corner
return svgHTML
}
html `<svg height="40" width="160" style="border: 1px solid #ccc" />`
{
const svgHTML = html `<svg height="40" width="160" style="border: 1px solid #ccc" />`
// Select our svg element just like before
const svg = d3.select(svgHTML)
// Now, select all rects that are contained by the svg
const rects = svg.selectAll('rect')
// Define the data that we will bind to our rectangles
// each element in the array will become a new rect
const data = [ 0, 1, 2, 3, 4 ]
rects
// The data join - the big moment!
// When we do this, we tell D3 to include
// 5 additional rects in our selection, one for each element in our data array
.data( data )
// Now we append the rects just like before.
// Unlike before, when we append, we're actually
// appending all 5 rects at once
.join('rect')
// ...and when we set style and attributes, we're setting them
// for all 5 rects at once, too
.style('fill', 'black')
.attr('height', 20)
.attr('width', 20)
.attr('y', 10)
// This positions each new rect 10 pixels to the right
// of the last rect. We'll explain what's going on here on day 3
.attr('x', (d,i) => { return 10 + (i * 30) })
return svgHTML
}
d3 = require('d3@6')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.