d3.select('thing')
.style('fill', 'red')
.transition()
.style('fill', 'blue')
{
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 300)
const t = svg.transition()
.duration(3000)
.delay(250)
svg.append('circle')
.attr('cx', 50)
.attr('cy', 20)
.attr('r', 15)
.transition(t)
.attr('cy', 280)
.style('fill', 'gray')
svg.append('rect')
.attr('x', 140)
.attr('y', 5)
.attr('width', 30)
.attr('height', 30)
.transition(t)
.attr('y', 265)
.style('fill', 'steelblue')
svg.append('circle')
.attr('cx', 250)
.attr('cy', 20)
.attr('r', 15)
.transition(t)
.attr('cy', 280)
.style('fill', 'pink')
return svg.node()
}
{
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 300)
svg.append('circle')
.attr('cx', 50)
.attr('cy', 20)
.attr('r', 15)
.transition()
.delay(500)
.attr('cy', 280)
.style('fill', 'gray')
.transition()
.attr('cy', 150)
.attr('cx', 150)
.style('fill', 'blue')
.transition()
.attr('cy', 280)
.attr('cx', 250)
.style('fill', 'pink')
.transition()
.delay(1000)
.attr('cy', 50)
.attr('cx', 20)
.style('fill', 'black')
return svg.node()
}
{
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 300)
const intX = d3.interpolateBasis([50, 50, 150, 250, 50]),
intY = d3.interpolateBasis([20, 280, 150, 280, 20])
svg.append('circle')
.attr('cx', intX(0))
.attr('cy', intY(0))
.attr('r', 15)
.transition()
.delay(500)
.duration(4000)
.attrTween('cx', () => intX)
.attrTween('cy', () => intY)
.styleTween('fill', () => d3.interpolateInferno)
return svg.node()
}
{
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 300)
svg.append('text')
.attr('x', 150)
.attr('y', 150)
.attr('text-anchor', 'middle')
.style('font-family', 'sans-serif')
.style('font-size', '64')
.style('font-weight', 'bold')
.text('999')
.transition()
.delay(500)
.duration(10000)
.textTween(() => d3.interpolateRound('999', '0'))
return svg.node()
}
{
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 300)
yield svg.node()
await svg.append('text')
.attr('x', 150)
.attr('y', 150)
.attr('text-anchor', 'middle')
.style('font-family', 'sans-serif')
.style('font-size', '64')
.style('font-weight', 'bold')
.text('99')
.transition()
.delay(500)
.duration(1000)
.textTween(() => d3.interpolateRound('99', '0'))
.end()
svg.style('background-color', 'black')
}
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.
