Public
Edited
Nov 4, 2023
select
Plot.plot({
width,
y: {
type: "log",
domain: [0.1, 6],
grid: true
},
color: {
legend: true
},
marks: [
Plot.line(
indices2,
Plot.normalizeY({
basis: "first",
x: "Date",
y: "Close",
z: "Symbol",
stroke: (d) => (d.Symbol === select ? "steelblue" : "lightgrey"),
strokeOpacity: (d) => (d.Symbol === select ? 1 : 0.5),
strokeWidth: 5,
marker: true,
tip: true
// stroke: "Symbol"
})
),
Plot.frame()
]
})
viewof select = Inputs.select([...new Set(indices.map((d) => d.Symbol))], {
label: "Select one"
})
Plot.plot({
width,
y: {
type: "log",
domain: [0.1, 6],
grid: true
},
color: {
legend: true
},
marks: [
Plot.line(
indices2,
Plot.normalizeY({
basis: "first",
x: "Date",
y: "Close",
z: "Symbol",
filter: (d) => d.Symbol !== select,
stroke: (d) => (d.Symbol === select ? "steelblue" : "lightgrey"),
strokeOpacity: (d) => (d.Symbol === select ? 1 : 0.5),
strokeWidth: 5,
marker: true,
tip: true
// stroke: "Symbol"
})
),
Plot.line(
indices2,
Plot.normalizeY({
basis: "first",
x: "Date",
y: "Close",
z: "Symbol",
filter: (d) => d.Symbol === select,
stroke: (d) => (d.Symbol === select ? "steelblue" : "lightgrey"),
strokeOpacity: (d) => (d.Symbol === select ? 1 : 0.5),
strokeWidth: 5,
marker: true,
tip: true
// stroke: "Symbol"
})
),
Plot.frame()
]
})
Plot.plot({
width,
y: {
type: "log",
domain: [0.1, 6],
grid: true
},
color: {
legend: true
},
marks: [
Plot.line(
indicesSorted,
Plot.normalizeY({
basis: "first",
x: "Date",
y: "Close",
z: "Symbol",
stroke: (d) => (d.Symbol === select ? "steelblue" : "lightgrey"),
strokeOpacity: (d) => (d.Symbol === select ? 1 : 0.5),
strokeWidth: 5,
marker: true,
tip: true
// stroke: "Symbol"
})
),
Plot.frame()
]
})
indicesSorted = indices2.toSorted(mysort)
function mysort(a, b) {
if (a.Symbol === select && b.Symbol !== select) {
return 1;
}
if (b.Symbol === select && a.Symbol !== select) {
return -1;
}
return 0;
}
indices2 = indices.filter((d, i) => i % 30 === 0)
indices
import { indices } from "@d3/index-chart"
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.
