hover = {
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 300)
// a 10x10 matrix
const data = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].map(() => [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ])
svg.selectAll('g')
.data(data)
.join('g')
.attr('transform', (d,i) => `translate(0,${30 * i})`)
.selectAll('rect')
.data(d => d)
.join('rect')
.attr('x', (d,i) => 30 * i)
.attr('height', 30)
.attr('width', 30)
.style('fill', '#4dbeff')
// When the mouse moves over a rect, quickly fade its color to blue
.on('mouseover', function(e, d) {
d3.select(this)
.transition()
.duration(100)
.style('fill', 'white')
})
// When the mouse leaves a rect, slowly fade its color back to orange
.on('mouseout', function(e, d) {
d3.select(this)
.transition()
.duration(2000)
.style('fill', '#4dbeff')
})
return svg.node()
}
click = {
const svg = d3.create('svg')
.attr('width', 300)
.attr('height', 300)
// array of 100 elements
const data = d3.range(0, 100)
const circles = svg.selectAll('circle')
.data( data )
.join('circle')
circles
.attr('cx', (d,i) => 15 + 30 * (i % 10))
.attr('cy', (d,i) => 15 + Math.floor( i/10 ) * 30)
.attr('r', 10)
.style('fill', '#ff5900')
// When we click an element, color all elements in the same row
// and all elements in the same column, then fade them back
.on('click', (e, d) => {
const clickX = d % 10,
clickY = Math.floor(d/10)
// go through the array of circles one-by-one
circles.each(function(c, i) {
const currX = i % 10,
currY = Math.floor(i/10)
// If it's the one we clicked, don't change it
if(d == i) {
return
}
// But if an element has the same x position
// or the same y position...
else if(currX == clickX || currY == clickY) {
// then change it to blue quickly, then fade slowly back
d3.select(this)
.transition()
.duration(100)
.style('fill', '#4dbeff')
.transition()
.duration(1000)
.style('fill', '#ff5900')
}
})
})
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.
