{
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
}
oneShape_2 = {
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 circle = svg.append('circle')
// finally, we style and position the rect
circle
.style('fill', 'black') // circle's fill color
.attr('cx', 20) // x-axis coordinate of the center of the circle (in pixels)
.attr('cy', 20) // y-axis coordinate of the center of the circle (in pixels)
.attr('r', 10) // radius of the circle
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
}
{
const svgHTML = html `<svg height="300" width="300" 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 circles = svg.selectAll('circle')
// Define the data that we will bind to our rectangles
// each element in the array will become a new rect
const data = [ 0, 4, 6, 8, 10 ]
circles
// The data join - the big moment!
// When we do this, we tell D3 to include
// 6 additional circles 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 6 circles at once
.join('circle')
// ...and when we set style and attributes, we're setting them
// for all 6 circles at once, too
.style('fill', 'red')
.attr('cx', 20)
.attr('cy', 20)
.attr('r', 10)
// This positions each new circle 20 pixels to the right
// of the last circle. We'll explain what's going on here on day 3
// .attr('cy', (d,i) => { return 20 + (i * 30) })
.attr('cy', (d,i) => { return 20 + (d * 30) })
.attr('cx', (d,i) => { return 20 + (d * 30) })
return svgHTML
}
d3 = require('d3@6')
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.
