updateBarsOld = (svg, data) => {
const rectWidth = 50
// ✨ OUR CODE HERE
}
updateBarsNew = (svg, data) => {
const rectWidth = 50
// ✨ OUR CODE HERE
}
{
const oldSVG = html`<svg height=100 style='overflow: visible' />`
const newSVG = html`<svg height=100 style='overflow: visible' />`
const code = html`<code />`
const button = html`<button>new data!</button>`
d3.select(button).on('click', d => {
// randomly generate an array of data
const data = _.times(_.random(3, 8), i => _.random(0, 100))
updateBarsOld(oldSVG, data)
updateBarsNew(newSVG, data)
// update div with new data array:
d3.select(code).text(JSON.stringify(data).replace(/\,/g, ', '))
})
return html`
<h4>old way:</h4>
${oldSVG}
<h4>new way:</h4>
${newSVG}
<p>
${button} ${code}
</p>
`
}
{
const rectWidth = 50
const svgHeight = 100
const svg = html`<svg height=${svgHeight} width='500' style='overflow: visible' />`
const code = html`<code />`
const button = html`<button>new data!</button>`
function updateBars() {
// select svg so that transition can be localized within selection
const t1 = d3.select(svg).transition().duration(2000)
const t2 = d3.select(svg).transition().duration(3000)
const t3 = d3.select(svg).transition().duration(1000)
// randomly generate an array of data
const data = _.times(_.random(1, 10), i => _.random(0, 100))
// ✨ YOUR CODE HERE
d3.select(svg).selectAll('rect').data(data, d=>d).join(
enter => {
// debug
d3.select('#c1').text(_.values(enter._groups[0]))
return enter.append('rect')
.attr('y', svgHeight)
.attr('x', (d, i) => i * rectWidth)
.transition(t1)
.attr('y', d=>svgHeight-d)
.attr('height', d=>d)
.attr('fill', 'yellow')
},
update => {
// debug
d3.select('#c2').text(_.values(update._groups[0]))
return update
.attr('height', d=>d)
.transition(t2)
.attr('x', (d, i) => i * rectWidth)
.attr('fill', 'blue')
// return update
},
exit => {
// debug
d3.select('#c3').text(_.values(exit._groups[0]))
exit
.transition(t3)
.attr('fill-opacity', 1)
.attr('fill', 'red')
.remove()
}
)
.attr('width', rectWidth)
.attr('fill-opacity', 0.3)
.attr('stroke-width', 2)
.attr('stroke', 'gray')
// update div with new data array:
d3.select(code).text(JSON.stringify(data).replace(/\,/g, ', '))
}
updateBars()
d3.select(button).on('click', updateBars)
return html`
${svg}
<p>
${button} ${code}
</p>
<p>
Enter:<br/>
<code id='c1'/>
</p>
<p>
Update:<br/>
<code id='c2'/>
</p>
<p>
Exit:<br/>
<code id='c3'/>
</p>`
}
filtered = _.filter(movies, d => {
// either the genre is in the filtered genres
return (_.includes(filteredGenres, d.genres[0]) ||
// OR the movie's genre isn't one of the top genres, and "Other" is toggled
(_.includes(filteredGenres, 'Other') && !_.includes(topGenres, d.genres[0]))) &&
// AND movie's pg rating is in filtered pg
_.includes(filteredPG, d.rated)
})
filteredFlowers = calculateData(filtered)
{
// this line is a little bit of Observable magic to make sure that every time
// our filter cells update, we use the existing SVG element instead of trashing it and creating a new one
// if you're working in your index.html, you'd create your svg element and select it as we did before
const element = this || scrollSVG(html`<svg width=${width} height=${svgHeight}></svg>`)
const svg = d3.select(element).select('svg')
// create transition animation localized to svg selection
const t = svg.transition().duration(1000)
// ✨ YOUR CODE HERE
return element
}
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.
