I am a Data Visualization and UI developer. Focusing on creating SPA using React, Redux, D3.js and Jest . I also do data projects when I have time.
Public
Edited
Sep 19, 2023
8 stars
{
const svg = d3.create('svg')
.attr('height',dimension.height)
.attr('width', dimension.width)
svg
.selectAll('text')
.data(nonRandomData)
// this code here is no longer need with .join() .join() takes cares of enter and append in one line
.enter()
.append('text')
.attr('x', 15)
.attr('y', (d,i) => (i*15+15))
.attr('stroke','black')
.attr('stroke-width','.02px')
.text(d=>d)
return svg.node()
}
{
const svg = d3.create('svg')
.attr('height',dimension.height)
.attr('width', dimension.width)
svg
.selectAll('text')
.data(nonRandomData)
// here we get rid of enter() and append() combining them
.join('text')
.attr('x', 15)
.attr('y', (d,i) => (i*15+15))
.attr('stroke','black')
.attr('stroke-width','.02px')
.text(d=>d)
return svg.node()
}
{
const svg = d3.create('svg')
.attr('height',dimension.height)
.attr('width', dimension.width)
while(true){
const newData = svg
.selectAll('text')
.data(randomData())
// here we have to explicitly exit the elements we don't need anymore
newData.exit()
// while in our exit state we can apply changes to the exiting elements. Here we will just remove them
.remove();
// now we must enter the new elements
newData
.enter()
.append('text')
// and we must merge are original selection to this enter selection we just performed
.merge(newData)
// once we merge the enter and our elements that need to be updated we can apply changes to update these elements together
.attr('x', 15)
.attr('y', (d,i) => (i*15+15))
.attr('stroke','black')
.attr('stroke-width','.02px')
.text(d=>d)
yield svg.node();
await Promises.tick(2000);
}
}
{
const svg = d3.create('svg')
.attr('height',dimension.height)
.attr('width', dimension.width)
while(true){
const newData = svg
.selectAll('text')
.data(randomData())
// here with this one line of code we can get rid of enter exit and remove simplify much of the codebase
.join('text')
.attr('x', 15)
.attr('y', (d,i) => (i*15+15))
.attr('stroke','black')
.attr('stroke-width','.02px')
.attr('r','6')
.text(d=>d)
yield svg.node();
await Promises.tick(2000);
}
}
{
const svg = d3.create('svg')
.attr('height',dimension.height)
.attr('width', dimension.width)
while(true){
const newData = svg
.selectAll('text')
.data(randomData(), d=>d)
.join(enter => enter.append('text').attr('fill','blue').text(d=>d),
update => update.attr('fill','black'),
)
.attr('y', (d,i) => (i*15+15))
.attr('x', 15)
.attr('stroke-width','.02px')
yield svg.node();
await Promises.tick(2000);
}
}
{
const svg = d3.create('svg')
.attr('height',dimension.height)
.attr('width', dimension.width)
while(true){
// first we have to make the transition we want to use we can make multiple transitions if we want
const t = () =>{
return d3.transition()
.duration(800)
};
const newData = svg
.selectAll('text')
.data(randomData(), d=>d)
.join(enter => enter.append('text').attr('x', width-15 ).attr('fill','blue')
.attr('stroke-width','.02px').text(d=>d)
//we call it on our explicit join states
.call(enter => enter.transition(t).attr('x', 15)
.attr('y', (d,i) =>(i*15+15))),
update => update.attr('fill','black').call(update => update.transition(t)
.attr('x', 15).attr('y', (d,i) =>(i*15+15))), exit => exit.attr('fill', 'red').call(exit => exit.transition(t)
.attr('y',dimension.height-20).remove())
).attr('x', 40);
yield svg.node();
await Promises.tick(3000);
}
}
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.
