Published
Edited
Oct 12, 2018
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ulElement = d3.select(DOM.element("ul"))
Insert cell
Insert cell
liElements = ulElement.selectAll('li')
Insert cell
Insert cell
liElementsJoinedWithData = liElements.data(words)
Insert cell
Insert cell
newLiElements = liElementsJoinedWithData.enter().append('li').text(d => d)
Insert cell
Insert cell
Insert cell
Insert cell
{
const ul = d3.select(DOM.element("ul"))
const li = ul.selectAll('li').data(words)
const existingLi = li
const freshLi = li.enter().append('li')
const discardedLi = li.exit().remove()
const liToBeUpdated = existingLi.merge(freshLi)
liToBeUpdated.text(d => d)
discardedLi.remove()
return ul.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const ul = d3.select(this || DOM.element("ul"))
const li = ul
.selectAll('li')
.data(everChangingWords, d => d)
.style('color', 'black')
li.exit()
.style('color', 'gray');
li.enter()
.append("li")
.style('color', 'green')
.merge(li)
.text(d => d)

return ul.node()
}
Insert cell
Insert cell
d3 = require('d3')
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