Interaction / 3sam3 | Observable

voronoi = d3.Delaunay

.from(data, d => x(d.date), d => y(d.close))

.voronoi([0, 0, width, height])

class Tooltip {

constructor() {

this._date = svg`<text y="-22"></text>`;

this._close = svg`<text y="-12"></text>`;

this.node = svg`

${this._date}

${this._close}

</g>`;

}

show(d) {

this.node.removeAttribute("display");

this.node.setAttribute("transform", `translate(${x(d.date)},${y(d.close)})`);

this._date.textContent = formatDate(d.date);

this._close.textContent = formatClose(d.close);

}

hide() {

this.node.setAttribute("display", "none");

}

viewof number = html`<input type="range" min="0" max="100" step="1">`

number

viewof name = html`<input type="text" placeholder="Type a name!">`

name

fruit

viewof hover = {

return Object.assign(html`<svg viewBox="0 0 ${width} ${height}">

</svg>`, {

value: null,

onmousemove: event => {

event.currentTarget.value = bisect(data, x.invert(event.offsetX));

event.currentTarget.dispatchEvent(new CustomEvent("input"));

},

onmouseleave: event => {

event.currentTarget.value = null;

event.currentTarget.dispatchEvent(new CustomEvent("input"));

}

});

}

viewof i = Scrubber(d3.range(100), {

autoplay: false,

loop: false

})

i

formatDate = d3.utcFormat("%b %-d, ’%y")

formatClose = d3.format("$.2f")

y = d3.scaleLinear()

.domain([0, d3.max(data, d => d.upper)])

.range([height - margin.bottom, margin.top])

x = d3.scaleUtc()

.domain(d3.extent(data, d => d.date))

.range([margin.left, width - margin.right])

data = d3.csvParse(await FileAttachment("aapl-bollinger.csv").text(), d3.autoType)

margin = ({top: 20, right: 30, bottom: 30, left: 40})

d3 = require("d3@5", "d3-delaunay@5")

import {Scrubber} from "@mbostock/scrubber"

One platform to build and deploy the best data apps