While reading the documentation for plot’s new pointer feature, I noticed an fun trick:
“One-dimensional” is a slight misnomer: the pointerX and pointerY transforms consider distance in both dimensions, but the distance along the non-dominant dimension is divided by 100.
Adjust the slider to see how different weights change the hitbox. With the default weight of 100, this turns into an almost lexicographic sort — on the Weight X chart, multiple points share the same X position, so the Y position is used as a tiebreaker. When the points aren’t aligned, like on the Weight Y chart, selecting a given point can be fiddly. Using a weight of 100 instead of a strict lexicographic sort makes it possible to still select a point by mousing directly over it.
Note: Voronoi diagrams look cool but are almost never the most efficient way of adding a hover effect.
window.visState = window.visStatex || {
xyRatio: 4,
mousePos: [50, 40],
data: [
i => i*1.5+ 0 + Math.random()*5,
i => i*.2 + 40 + Math.random()*5,
i => Math.pow(i + 1, 1/3)*-20 + 80 + Math.random()*5,
].map((fn, fnIndex) => d3.range(2000, 2021, 1)
.map((x, i) => ({x, y: Math.max(0, fn(i)), fnIndex})))
.flat()
}
visState.data.forEach(d => d.color = ['#DC473A', '#AB3EA7', '#14379F'][d.fnIndex])
var renderAll = () => renderAll.fns.forEach(d => d())
renderAll.fns = []
var charts = [
{calcXY: d => visState.xyRatio, title: 'Weight X'},
{calcXY: d => 1, title: 'Equal Weight'},
{calcXY: d => 1/visState.xyRatio, title: 'Weight Y'},
]
d3.select('.graph').html('').appendMany('div', charts).each(initChart)
initSlider({
scale: d3.scalePow().range([1, 100]).exponent(4),
sel: d3.select('div.slider'),
label: 'Weight',
getVal: d => visState.xyRatio,
setVal: d => visState.xyRatio = d,
fmt: d3.format('.2f'),
})
renderAll()
function initChart({title, calcXY}, index){
var c = d3.conventions({
sel: d3.select(this),
margin: {left: 30, top: 40},
height: 360
})
c.svg.append('text').text(title).at({x: c.width/2, textAnchor: 'middle', y: -5})
var data = visState.data
c.x.domain(d3.extent(data, d => d.x)).clamp(1)
var maxY = d3.max(data, d => d.y)
c.y.domain([0, maxY]).clamp(1)
var yRatioScale = c.y.copy().range([c.height/calcXY(), 0])
c.x.interpolate(d3.interpolateRound)
c.y.interpolate(d3.interpolateRound)
c.xAxis.ticks(5).tickFormat(d => d)
c.yAxis.ticks(5)
d3.drawAxis(c)
c.svg.on('mousemove', function(){
visState.mousePos = d3.mouse(this)
renderAll()
})
var voronoi = d3.voronoi()
.x(d => c.x(d.x))
.y(d => yRatioScale(d.y))
.extent([[0, 0], [c.width, c.height/calcXY()]])
var voronoiSel = c.svg.append('g').appendMany('path.voronoi', data)
.at({fill: d => d.color})
var circleSel = c.svg.append('g').appendMany('circle', data)
.call(d3.drag().on('drag', d => {
visState.mousePos = d3.mouse(c.svg.node())
d.x = c.x.invert(visState.mousePos[0])
d.y = c.y.invert(visState.mousePos[1])
renderAll()
}))
.at({r: 4, fill: d => d.color, stroke: d => d3.color(d.color).darker(1)})
var targetSel = c.svg.append('text').text('⌖')
.at({textAnchor: 'middle', dy: '.33em'})
renderAll.fns.push(() => {
yRatioScale.range([c.height/calcXY(), 0])
voronoi.extent([[0, 0], [c.width, c.height/calcXY()]])
var closest = _.minBy(data, d => {
var dx = (visState.mousePos[0] - c.x(d.x))*calcXY()
var dy = visState.mousePos[1] - c.y(d.y)
return dx*dx + dy*dy
})
voronoiSel.data(voronoi.polygons(data))
.at({d: d => 'M' + d.map(([x, y]) => [x, y*calcXY()]).join('L') + 'Z'})
.classed('hovered', d => d.data == closest)
.filter(d => d.data == closest).raise()
circleSel
.translate(d => [c.x(d.x), c.y(d.y)])
.classed('hovered', d => d == closest)
targetSel.translate(visState.mousePos)
})
}
function initSlider(slider){
slider.sel.html(`
<div>
${slider.label} <val></val>
</div>
<div>
<input type=range min=0 max=1 step=.0001 value=${slider.scale.invert(slider.getVal())}></input>
</div>
`)
slider.sel.select('input[type="range"]')
.on('input', function () {
slider.setVal(slider.scale(this.value))
render()
renderAll()
})
function render(){ slider.sel.select('val').text(slider.fmt(slider.getVal())) }
render()
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<div class='graph'></div>
<div class='slider'></div>
<script src='d3_.js'></script>
<script src='script.js'></script>
body{
font-family: sans-serif;
margin: 0px;
width: 960px;
height: 500px;
}
.graph {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.axis, text{
pointer-events: none;
}
.axis line{
stroke: #999;
}
.axis text{
fill: #999;
}
.domain{
display: none;
}
svg{
overflow: visible;
}
text{
/* text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;*/
}
.voronoi{
stroke: #fff;
fill-opacity: .3;
stroke-width: .5;
}
.voronoi.hovered{
fill-opacity: .5;
stroke-width: 1;
stroke: #000;
}
circle{
cursor: pointer;
}
circle.hovered{
stroke-width: 4;
}
.slider{
margin: 0px auto;
margin-top: 20px;
display: block;
text-align: center;
}
input[type='range'] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
position: relative;
top: -3px;
}
input[type='range']::-webkit-slider-runnable-track{
background: #eee;
height: 5px;
outline: 1px solid #999;
}
input[type='range']::-moz-range-track {
background: #eee;
height: 5px;
outline: 1px solid #999;
}
input[type='range']::-webkit-slider-thumb{
appearance: none;
margin-top: -4px;
background-color: #000;
height: 13px;
width: 5px;
/* border-radius: 10px;*/
position: relative;
z-index: 1000;
}
input[type='range']::-moz-range-thumb {
appearance: none;
margin-top: -4px;
background-color: #000;
height: 13px;
width: 5px;
/* border-radius: 10px;*/
position: relative;
z-index: 1000;
}
input[type='range']:hover::-webkit-slider-runnable-track{
outline: 1px solid #000;
}
input[type='range']:hover::-moz-range-track {
outline: 1px solid #000;
}