Published
Edited
Aug 1, 2021
viz = {
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', 500);
svg
.append('circle')
.attr('cx', width / 2)
.attr('cy', 250)
.attr('r', counter < 100 ? counter : 200 - counter)
.attr('stroke', 'blue')
.attr('stroke-weight', 10)
.attr('fill', 'none');
return svg.node();
}
counter = {
while (true) {
yield* d3.range(0, 200);
}
}
cards = [
{ title: "a", content: "lorem ipsum", value: .5},
{ title: "b", content: "dolor sit", value: .2 },
{ title: "c", content: "amet adipisicing", value: .8 }
]
cardViz = {
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', 500);
svg
.selectAll('cards')
.data(cards)
.enter()
.append('rect')
.attr('x', (d, i) => (width / 3) * i)
.attr('y', 100)
.attr('width', width / 3)
.attr('height', 300)
.attr('stroke', d => d3.interpolateViridis(d.value))
.attr('stroke-width', 20)
.attr('fill', 'none');
svg
.selectAll('cards')
.data(cards)
.enter()
.append('text')
.attr('x', (d, i) => (width / 3) * i + 100)
.attr('y', 150)
.attr('fill', d => d3.interpolateViridis(d.value))
.attr('font-family', 'impact')
.text(d => d.title)
.on('mouseover', function(d) {
d3.selectAll('.cards')
.transition()
.attr('opacity', 1);
});
svg
.selectAll('cards')
.data(cards)
.enter()
.append('text')
.attr('x', (d, i) => (width / 3) * i + 100)
.attr('y', 200)
.attr('fill', d => d3.interpolateViridis(d.value))
.attr('font-family', 'impact')
.text(d => d.content)
.attr('opacity', 0)
.attr('class', 'cards');
return svg.node();
}
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.
