Data Scientist passionate with making colourful shapes appear and move on my computer screen.
Published
Edited
Oct 13, 2020
1 fork
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 150);
var a = [{'start': 100, 'end': 200}];
var t = 0;
function updatea (){
a[0].start += 10*Math.sin(t);
a[0].end += 10*Math.cos(t);
t += 0.1;
var miao = svg.selectAll('g.aaa').data(a).join('g')
/*.join(
enter => enter.append('g'),
update => update.attr('fill', 'green'),
exit => exit.remove()
)*/.classed('aaa',true).attr('transform',(d, i)=>('translate('+d.start+','+(i+1)*50+')'));
miao.append('circle').attr('r', 10).attr('fill','red');
miao.append('circle').attr('r', 10).attr('cx', d=>d.end).attr('fill','red');
//miao.append('line').attr('x2', d=>d.end).attr('stroke','green');
}
while (true) {
updatea();
yield svg.node();
await Promises.tick(250);
}
}
// https://stackoverflow.com/a/63946468/5599687
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 300);
var a = [{'start': 100, 'end': 200},{'start':100, 'end':200}];
var t = 0;
function updatea (){
a[0].start += 5*Math.sin(t);
a[0].end += 5*Math.cos(t);
a[1].start += 5*Math.cos(t);
a[1].end += 5*Math.sin(t);
t += 0.1;
var miao = svg.selectAll('g').data(a).join(
enter => {
// create the parent element to hold the symbol
let entered = enter.append('g')
.attr('transform', (d,i) =>'translate('+d.start+','+(i+1)*50+')')
.attr('class','symbol');
// append the sub-components of the symbol
entered.append('circle').attr('r', 10).attr('fill','red');
entered.append('circle').attr('class','end').attr('r', 15).attr('fill','yellow').attr('cx',d=>d.end);
},
update => {
// update overall positioning
update.attr('transform', (d,i) =>'translate('+d.start+','+(i+1)*50+')')
// update the sub-components
update.select('.end').attr('cx',d=>d.end);
return update
},
exit => exit.remove()
)
}
while (true) {
updatea();
yield svg.node();
await Promises.tick(250);
}
}
d3 = require('d3')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.