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')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.