Passionate about viz & systems thinking. Stanford CS 2017
Published
Edited
Oct 12, 2018
1 star
html`
<div class="parent-DOM-element">
<svg class="my-canvas" width="100" height="100">
<rect x="0" y="0" height="20" width="20" fill="red" />
<circle cx="50" cy="50" r="25" fill="blanchedalmond" />
</svg>
</div>
<style>
.parent-DOM-element {
border: 1px solid black;
display: inline-block;
}
</style
`
html`
<div class="parent-DOM-element-for-enter-and-append-example">
</div>
<style>
.parent-DOM-element-for-enter-and-append-example {
border: 1px solid black;
display: inline-block;
}
</style
`
{
d3.selectAll('svg').remove() // See what happens if you delete this line and repeatedly re-run this block
// returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)
const d3SelectionOfSVGCanvas = d3.select('.parent-DOM-element-for-enter-and-append-example')
// adds an svg element as a child of parent-DOM-element, returns a d3 selection of that new svg child:
.append('svg')
// These 3 chained method calls assign attributes to that newly created svg child DOM element
.attr('class', 'my-canvas') // Sets class attribute to d3 selected svg, returns said svg
.attr('width', 100) // Sets class attribute to d3 selected svg, returns said svg
.attr('height', 100) // Sets class attribute to d3 selected svg, returns said svg which is (finally) stored in the variable d3SelectionOfSVGCanvas
d3SelectionOfSVGCanvas.append('circle')
.attr('cx', 10)
.attr('cy', 10)
.attr('r', 10)
.attr('fill', 'red')
// I use d3's transition() here to slow down and illuminate to sequence of selecting and changing DOM elements
d3SelectionOfSVGCanvas.selectAll('circle')
.transition()
// D3 will take 2000 ms to transition the selected circles from their current attributes to the new ones
.duration(2000)
.attr('fill', 'mediumorchid')
.attr('r', '50')
}
html`
<div class="parent-DOM-element-for-d3">
</div>
<style>
.parent-DOM-element-for-d3 {
border: 1px solid black;
display: inline-block;
}
</style
`
{
d3.selectAll('svg').remove() // Without this, D3 just keeps appending new svgs each time.
// returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)
const d3SelectionOfSVGCanvas = d3.select('.parent-DOM-element-for-d3')
.append('svg')
.attr('class', 'my-canvas')
.attr('width', 100)
.attr('height', 100)
// Add your circle and rect here
}
{
const width = 100
const height = 100
// DOM.svg() is a Observables specific convenience method which creates an SVG DOM element.
const svg = d3.select(DOM.svg(width, height))
const arrayOfNumbers = [10, 70, 100]
svg.selectAll('circle') // Select all the circles that are children of svg (in this case, an empty selection)
.data(arrayOfNumbers) // Joins arrayOfNumbers with DOM <rect/> elements, producing .enter(),.exit() selections
.enter()// Returns the portion of the data which is new ("entering") and not yet bound to DOM elements
.append('circle') // For each, append a <circle /> to selected svg
.attr('cx', (d, i) => i * 30) // Set each cirlces x position using its index in the array
.attr('cy', 10) // Set each circles y position (cy is short for 'y coordinate of the circle's center')
.attr('r', 10) // Set each circles radius
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
const width = 200
const height = 200
// DOM.svg is a Observables specific convenience method which creates an SVG DOM element.
const svg = d3.select(DOM.svg(width, height))
const arrayOfNumbers = [10, 70, 100, 40]
svg.selectAll('rect') // Here's the first line
// <<< continue method chaining here to complete data binding, rect appending, and attribute setting
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
// This is a Observables specific convenience method which creates an SVG in the DOM.
const svg = d3.select(DOM.svg(width, height))
const bars = svg.selectAll('rect')
// Continue method chaining here to complete...
// Once we append the vis elments to it, we return the DOM node for Observable to display above.
return svg.node()
}
d3 = require('d3')
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.
