Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
Jan 13, 2021
listItems = {
const target = html`<ul id="target" viewBox="0 0 ${width} ${height}"></ul>`;
const ul = d3.select(target);
const listItems = ul
.selectAll("li")
.data(countryData.items, d => d) // Add a key function that references the country name
.enter()
.append('li')
.text(d => d);
// Add an item after 2 seconds
setTimeout(() => {
countryData.addItem('Germany');
ul.selectAll('li')
.data(countryData.items, d => d)
.enter()
.append('li')
.classed('added', true)
.text((d, i) => d);
}, 2000);
// Remove an item after 4 seconds
setTimeout(() => {
countryData.removeItem(0);
ul.selectAll('li')
.data(countryData.items, d => d)
.exit()
.classed('redundant', true)
//.remove();
}, 4000);
// Update an item after 6 seconds
setTimeout(() => {
countryData.updateItem(1, 'Russia');
ul.selectAll('li')
.data(countryData.items, d => d)
.exit()
.classed('updated', true)
.text('Russia');
}, 6000);
return target;
}
countryData = ({
items: ['China', 'India', 'USA'],
addItem(item) {
this.items.push(item);
},
removeItem(index) {
this.items.splice(index, 1);
},
updateItem(index, newItem) {
this.items[index] = newItem;
}
})
height = width * 0.5
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.
