Public
Edited
Feb 19
1 star
// viewof mode_vis = Inputs.radio(["Light Mode", "Dark Mode"], {label: "Choose Mode", value: "Light Mode"})
Plot.plot({
width,
height: 500,
marginBottom: 70,
marginTop: 30,
// style: {
// background: (mode_vis==="Dark Mode") ? "#1B1626" : "#FBFBFB",
// color: (mode_vis==="Dark Mode") ? "#FFF" : "#000",
// //border: `10px solid #FBFBFB`
// },
y: {
inset: 5,
grid: true,
tickFormat: (x => `${x}`+ ((data_vis.name).includes("USA") ? " $" : " €")),
label: "↑ prices",
},
x: {
tickRotate: 45,
label: ((data_vis.name).includes("iPhone") ? "→ iPhones" : "→ Galaxys"),
inset: 25,
tickFormat: x => `${x.replace(/\d\d iPhone|\d\d Galaxy /i,'')}`,
labelAnchor: "right"
//ticks: ticks.map((d) => d.date),
//tickSize: 4,
//domain: data.date
//type: "point"
},
color: {
range: colorRange,
type: "ordinal",
domain: data.year,
},
marks: [
Plot.ruleX(data,
Plot.groupX({y1: "min", y2: "max"},
{y: "price", x: "model", stroke: 'year', strokeWidth: 2.5})),
Plot.ruleY([0,2300]),
Plot.dot(data, {x: 'model',
y: 'price',
title: (d) =>`${d.model.replace(/\d\d/i,'')} \n Announce: ${moment(d.release).format('ll')} \n Price: ${d.price}${(data_vis.name).includes("USA") ? " $" : " €"} \n Storage: ${d.storage} GB`,
fill: "year",
r: 4 }),
],
tooltip: {
fill: "red",
stroke: "blue",
r: 8
}
})
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.
