Published
Edited
Jun 1, 2020
14 stars
import { chart as histogram } with { data, height } from "@d3/histogram"
histogram
d3.select(histogram)
.selectAll("rect")
.transition()
.delay((_, i) => i * 100)
.style("fill", (_, i) => `hsl(${i * 5}, 100%, 50%)`)
margin = ({top: 50, right: 30, bottom: 30, left: 40}) // top: 20 in the original notebook
import { chart as candlestick } with { height, margin } from "@d3/candlestick-chart"
candlestick
d3.select(candlestick)
.append("g")
.append("text")
.attr("x", margin.left)
.attr("y", margin.top - 10)
.style("font", "30px sans-serif")
.text("How do you like them apples?")
import { chart as lineChart } with { height } from "@d3/line-chart"
import { solve } from "@fil/graphical-intersection-detection"
modifiedLineChart = {
const svg = d3.select(lineChart.cloneNode(true)) // <- note cloneNode(true)
// const svg = d3.select(lineChart) // try this instead - scroll over the chart and re-run the cell
const line = svg.append("line")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("stroke-width", 2)
.attr("y1", 0)
.attr("y2", height)
const circle = svg.append("circle")
.attr("fill", "red")
.attr("r", 5)
const solver = solve(svg.select("path[stroke=steelblue]").attr("d"));
return svg
.on("mousemove", move)
.call(move)
.node();
function move() {
let x = d3.event ? d3.mouse(this)[0] : width / 3;
x = x < 40 || x > width - 30 ? -10 : x
line
.attr("x1", x)
.attr("x2", x);
circle
.attr("cx", x)
.attr("cy", solver(x) || -10);
}
}
new Runtime().module(notebook).value("histogram")
new Runtime().module(notebook).value("modifiedLineChart")
data = Object.assign(Array.from({length: 1000}).map(_ => Math.random()), {y: "Count"})
height = 300
Runtime = (await import("@observablehq/runtime@4/dist/runtime.js")).Runtime
notebook = (await import("https://api.observablehq.com/@bayre/altering-an-import-chart.js?v=3")).default
d3 = require("d3@5")
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.
