The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Feb 24
7 forks
1 star
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
opacity: 0.8,
fill: "culmen_length_mm",
r: 10,
mixBlendMode: "multiply",
tip: true,
symbol: "species"
})
]
})
Plot.plot({
marks: [
Plot.raster(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
interpolate: "random-walk",
fill: "species",
opacity: 0.8
}),
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "species",
stroke: "white",
r: 5
})
]
})
Plot.plot({
color: {scheme: "Observable10"},
y: {tickFormat: "s", grid: true, domain: [0, 20000], ticks: 5},
marks: [
Plot.ruleY([0]),
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry", tip: true})
]
})
import {us, power_plants} from "@observablehq/us-energy-mix-bubble-map-recreation"
states = topojson.feature(us, us.objects.states)
power_plants
Plot.plot({
r: { range: [0.5, 15] },
projection: "albers-usa",
color: { legend: true },
marks: [
Plot.geo(states, { fill: "#ccc", stroke: "white" }),
Plot.dot(power_plants, {
x: "longitude",
y: "latitude",
fill: "primary_source",
r: "total_capacity",
tip: true,
opacity: 0.8
})
]
})
viewof range = Inputs.range([0, 100], {label: "Amount", step: 1})
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)", fill: d => d['power (hp)'], r: range})
]
})
viewof checkboxes = Inputs.checkbox(industries.map(d => d.industry), {label: "Select some", value: ["Manufacturing"], unique: true})
checkboxes
industries_sub = industries.filter(d => checkboxes.includes(d.industry))
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(industries_sub, {x: "date", y: "unemployed", stroke: "industry"})
]
})
viewof pickSource = Inputs.radio(power_plants.map(d => d.primary_source), {label: "Select one", value: "coal", unique: true})
Plot.plot({
r: { range: [0.5, 15] },
projection: "albers-usa",
color: { legend: true, range: ["gray", "red"]},
marks: [
Plot.geo(states, { fill: "#ccc", stroke: "white" }),
Plot.dot(power_plants, {
x: "longitude",
y: "latitude",
fill: d => d.primary_source === pickSource,
sort: {channel: "fill"},
r: "total_capacity",
tip: true,
opacity: 0.8
})
]
})
data = [{age: 1, wt: 5},
{age: 1.3, wt: 8 },
{age: 2.6, wt: 12.7},
{age: 3.5, wt: 14.1},
{age: 3.9, wt: 13.9},
{age: 4.7, wt: 15.2}]
y = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.wt))
.nice()
.range([height - marginBottom, marginTop])
x = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.age))
.nice()
.range([marginLeft, width - marginRight])
chart = {
// Create the container SVG.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Append a circle for each data point.
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.age))
.attr("cy", d => y(d.wt))
.attr("r", 10)
.attr("fill", "purple");
return svg.node();
}
chart2 = {
// Create the container SVG.
const svg = d3.create("svg").attr("width", width).attr("height", height);
const myColors = ["red", "orange", "purple", "teal", "black", "gray"];
svg
.selectAll("circle")
.data(data)
.join("circle")
.transition()
.duration(5000)
.delay((d, i) => i * 200)
.ease(d3.easeCubic)
.attr("cx", (d) => x(d.age))
.attr("cy", (d) => y(d.wt))
.attr("r", 10)
.attr("fill", (d, i) => myColors[i]);
// svg.append("g")
// .attr("transform", `translate(0,${height - marginBottom})`)
// .call(d3.axisBottom(x));
// svg.append("g")
// .attr("transform", `translate(${marginLeft},0)`)
// .call(d3.axisLeft(y));
return svg.node();
}
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.
