A talk by Igor Lukanin at FrontendFellows #4
Yekaterinburg · April 29, 2016
<body>
<div class="dot"></div>
</body>
const createDot = () =>
({ x: Math.random(), y: Math.random() });
const dot = createDot();
d3.select('body')
.append('div')
.attr('class', 'dot')
.style('left', 100 * dot.x + '%')
.style('top', 100 * dot.y + '%');
const dots = [
createDot(),
createDot()
];
dots.forEach(dot => {
// Drawing with D3...
});
d3.select('body')
.selectAll('div') // Elements
.data(dots) // Data
.enter() // Selection
.append('div')
.attr('class', 'dot')
.style('left', dot => 100 * dot.x + '%')
.style('top', dot => 100 * dot.y + '%');
const selection = d3.select('body')
.selectAll('div') // Elements
.data(dots); // Data
selection.enter() // For each new dot...
.append('div')
.attr('class', 'dot dot_entered')
.style('left', dot => 100 * dot.x + '%')
.style('top', dot => 100 * dot.y + '%');
<body></body>
const dots = [
{ x: 0.5, y: 0.5 },
createDot(),
createDot()
];
// Drawing with D3...
const draw = dots => {
// Drawing with D3...
};
draw(dots);
setInterval(() => {
dots.push(createDot());
draw(dots);
}, 1000);
var i = 1;
const createDot = () => ({ /* x, y... */ i: i++ }};
const dots = [{ /* x, y... */ i: 0 }, /* ... */];
const draw = dots => {
// Data × Elements...
selection.enter() // ...
.text(dot => dot.i);
};
setInterval(() => {
if (i <= 10) {
dots.push(createDot());
}
else {
const index = Math.floor(Math.random() * dots.length);
dots.splice(index, 1);
}
draw(dots);
}, 1000);
const draw = dots => {
// Data × Elements...
// selection.enter()
selection.exit()
.remove();
};
setInterval(() => {
if (i <= 10) {
dots.push(createDot());
}
else {
const index = Math.floor(Math.random() * dots.length);
dots.splice(index, 1);
}
draw(dots);
}, 1000);
const draw = dots => {
const selection = d3.select('body')
.selectAll('div')
.data(dots, dot => dot.i);
// selection.enter()
// selection.exit()
};
const draw = dots => {
const selection = // Data × Elements...
.attr('class', 'dot');
selection.enter() // ...
.attr('class', 'dot dot_entered');
selection.exit()
.attr('class', 'dot dot_exited');
};
selection.enter() // ...
.style('left', dot => 100 * dot.x + '%')
.style('top', dot => -100)
.transition().duration(3000)
.style('top', dot => 100 * dot.y + '%');
selection.exit() // ...
.transition().duration(2000).ease('bounce')
.style('top', '95%');
// 300 12px sans-serif -> 500 36px Comic-Sans // rgb(123, 234, 44) -> hsl(120, 50%, 20%)<rect x="0" y="0" width="800" height="500" /><circle cx="250" cy="250" r="200" /><ellipse cx="625" cy="250" rx="125" ry="200" /><line x1="0" y1="0" x2="400" y2="500" /><polyline points="0,500 400,0, 100,500 500,0" /><path d="M 800,0 L 500,500 L 800,500 L 350,250 Z" /><g transform="translate(100, 50)"> ... </g><text x="0" y="0">Hello, SVG!</text>svg.append('path').attr('d', /* ... */ )d3.svg.line().x(d => d.x).y(d => d.y).interpolate('basis')d3.svg.area().x(d => d.x).y0(d => d.y).y1(d => d.y + 10)
|
|
