Visualization can transform the reach of open data and revolutionize transparency and accountability.
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs"}).plot();
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}).plot();
Plot.plot({
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4})
]
});
Plot.plot({
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
Plot.linearRegressionX(cars, {x:"Horsepower", y:"Weight_in_lbs"})
]
});
Plot.plot({
marks: [
Plot.boxY(cars, {x:"Origin", y:"Horsepower"})
]
});
weather = await FileAttachment("GironaWeatherData.csv").csv();
Plot.plot({
marks: [
Plot.line(niceWeather, {x:"date", y:"maxTemp"})
]
});
Plot.plot({
x: {
domain: [0, 250],
},
y: {
domain: [0, 6000],
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
Plot.linearRegressionX(cars, {x:"Horsepower", y:"Weight_in_lbs"})
]
});
Plot.plot({
x: {
type: "log"
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
Plot.linearRegressionX(cars, {x:"Horsepower", y:"Weight_in_lbs"})
]
});
Plot.plot({
color: {
scheme: "turbo"
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"Displacement"})
]
});
Plot.plot({
color: {
scheme: "category10"
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"Origin"})
]
});
Plot.plot({
marks: [
Plot.dot(cars.filter(d => d.Horsepower > 150), {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
]
});
Plot.plot({
marks: [
Plot.dot(cars, {filter: d => d.Horsepower > 150, x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
]
});
Plot.plot({
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
Plot.dot(cars, {filter: d => d.Horsepower > 220, x:"Horsepower", y:"Weight_in_lbs", strokeWidth:1, stroke: "black"}),
Plot.text(cars, {filter: d => d.Horsepower > 220, x:"Horsepower", y:"Weight_in_lbs", text:"Name", dy:-10, textAnchor: "end"}),
]
});
Plot.plot({
marks: [
Plot.rectY(cars, Plot.binX({y:"count"}, {x:"Horsepower", fill:"steelblue"}))
]
});
Plot.plot({
marks: [
Plot.rectY(cars, Plot.binX({y:"sum"}, {x:"Horsepower", y: "Weight_in_lbs", fill:"steelblue"})),
Plot.dot(cars, Plot.binX({x:"median"}, {x:"Horsepower", y: 0, fill:"red"}))
]
});
Plot.plot({
color: {
legend: true
},
marks: [
Plot.rectY(cars, Plot.binX({y:"count"}, {x:"Horsepower", fill:"Origin"}))
]
});
Plot.plot({
marks: [
Plot.line(niceWeather, {x:"date", y:"maxTemp", stroke: "gray"}),
Plot.line(niceWeather, Plot.windowY({k: 7, anchor: "middle", reduce: "median", strict:false}, {x: "date", y: "maxTemp", stroke: "red"}))
]
});
Plot.plot({
facet:{
data:cars,
x: "Origin"
},
marks: [
Plot.frame(),
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"Origin"}),
]
});
Plot.plot({
facet:{
data:cars,
x: "Origin",
y: "Cylinders"
},
marks: [
Plot.frame(),
Plot.dot(cars.slice(), {x:"Horsepower", y:"Weight_in_lbs", fill:"lightgray"}),
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"Origin"}),
]
});
Plot.plot({
marginLeft: 100,
height: 300,
width: 800,
style:{
color: "blue",
backgroundColor: "lightgray",
fontFamily: "Source Serif Pro, serif"
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
Plot.linearRegressionX(cars, {x:"Horsepower", y:"Weight_in_lbs"})
]
});
Plot.plot({
x: {
axis: "top",
line: true
},
y:{
line: true,
label: "Weight in lbs",
labelAnchor: "center"
},
grid: true,
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
Plot.linearRegressionX(cars, {x:"Horsepower", y:"Weight_in_lbs"})
]
});
Plot.plot({
color: {
legend: true
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"Origin"}),
Plot.linearRegressionX(cars, {x:"Horsepower", y:"Weight_in_lbs"})
]
});
Plot.plot({
symbol: {
legend: true
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", symbol:"Origin"}),
Plot.linearRegressionX(cars, {x:"Horsepower", y:"Weight_in_lbs"})
]
});
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.
