Public
Edited
Feb 3, 2023
3 stars
streamgraph
viewof projectionName
map
visibility().then(() =>
addAnimation(addTooltips(Plot.plot({ //I just added these wrappers to the beginning and
marginLeft: 110,
height: 800,
grid: true,
x: {
nice: true
},
y: {
domain: d3.groupSort(barley, g => -d3.median(g, d => d.yield), d => d.variety),
inset: 5
},
fy: {
domain: d3.groupSort(barley, g => -d3.median(g, d => d.yield), d => d.site)
},
color: {
type: "categorical"
},
facet: {
data: barley,
y: "site",
marginRight: 90
},
marks: [
Plot.frame(),
Plot.dot(barley, {x: "yield", y: "variety", r: 0, stroke: "year", title: (d) =>
`Yield: ${d.yield} \n Variety: ${d.variety} \n Year: ${d.year} \n Site:${d.site}`}) // this line for the tooltip titles and
]
}), {r:15}), {type: "circle", attribute: "r", endValue: 3, delay: 100} )) // this line on the end to add animation and enlarge the dots on hover with those imported functions
barChartRace
rRace
viewof r = Inputs.range([0, 25], {value: 10, step: 1})
r
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
penguins
addTooltips(
Plot.plot({
grid: true,
facet: {
data: penguins,
x: "sex",
y: "species",
marginTop: 50,
marginRight: 80
},
marks : [
Plot.frame(),
Plot.dot(penguins, {x: "flipper_length_mm", y: "body_mass_g", stroke: "island", title: (d) =>
`${d.species} \n flipper length: ${d.flipper_length_mm} mm \n body mass: ${d.body_mass_g} g`})
]}), {r: r, fill: color}) //This is where the reactivity is happening
teams = [
{name: "Lakers", location: "Los Angeles, California"},
{name: "Warriors", location: "San Francisco, California"},
{name: "Celtics", location: "Boston, Massachusetts"},
{name: "Nets", location: "New York City, New York"},
{name: "Raptors", location: "Toronto, Ontario"},
]
viewof favorite = Inputs.radio(teams, {value: teams[0], label: "Favorite team", format: x => x.name})
favorite.location
viewof checkbox = Inputs.checkbox(
d3.group(penguins, (d) => d.island),
{ key: ["Dream", "Torgersen"]}
)
filtered = checkbox.flat()
Plot.dot(filtered, {x: "flipper_length_mm", y: "body_mass_g", stroke: "island"}).plot()
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.
