chart = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', '#1a1a1a')
svg.selectAll('circle')
.data( data )
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => Math.max(Math.abs(20 * d.value), 3))
.style('fill', d => color(d.value))
.style('fill-opacity', 0.85)
.on('mouseenter', function(e,d) {
d3.select(this)
.transition()
.style('stroke', color(d.value))
.attr('stroke-width', 20)
.attr('stroke-opacity', 0.7)
})
.on('mouseleave', function(e,d) {
d3.select(this)
.transition()
.attr('stroke-width', 0)
})
return svg.node()
}
voronoi = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', '#1a1a1a')
// Generate the delaunay triangulation of our data
// takes data, x accessor and y accessor as arguments
const delaunay = d3.Delaunay.from( data, d => d.x, d => d.y ),
// Generate teh voronoi diagram from our delaunay triangulation
// Takes the bounds of our diagram area as arguments [x0,y0,x1,y1]
voronoi = delaunay.voronoi([ 0, 0, width, height ])
svg.selectAll('path')
// Construct a data object from each cell of our voronoi diagram
.data( data.map((d,i) => voronoi.renderCell(i)) )
.join('path')
.attr('d', d => d)
.style('fill', (d,i) => color( data[i].value ))
.style('opacity', 0.8)
.style('stroke', 'white')
.style('stroke-opacity', 0.2)
// append all of our points so that we can see how they line up with the voronoi
svg.selectAll('circle')
.data( data )
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', 1.5)
.style('fill', 'white')
return svg.node()
}
hoverChart = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', '#1a1a1a')
// Generate the delaunay to start
const delaunay = d3.Delaunay.from( data, d => d.x, d => d.y )
// Place our points as normal
const points = svg.selectAll('circle')
.data( data )
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => Math.max(Math.abs(20 * d.value), 3))
.style('stroke-width', 0)
.style('stroke-opacity', 0.7)
.style('stroke', (d,i) => color(d.value))
.style('fill', d => color(d.value))
.style('fill-opacity', 0.85)
// put a mousemove event on the svg (not the circles)
svg.on('mousemove', function(e) {
// get our mouse positions in the svg element
const { layerX, layerY } = e
// find the index of the nearest point to the mouse position
const pointIndex = delaunay.find( layerX, layerY )
// Iterate through all points and set stroke-width based on whether
// or not it's our selected point
points
.transition()
.style('stroke-width', (d,i) => i == pointIndex ? 20 : 0 )
})
// When the mouse leaves the svg, set all stroke-widths to zero
.on('mouseleave', function() {
points
.transition()
.style('stroke-width', 0 )
})
return svg.node()
}
color = d3.scaleLinear()
.domain([ -1, 1 ])
.range([ '#309', '#ff630f' ])
noise = require('https://bundle.run/noisejs@2.1.0')
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.
