Assistant professor in the Universitat de Girona.
In Fundació Visualització per a la Transparència (ViT).
In Master’s Degree in Visual Tools to Empower Citizens.
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs"}).plot();
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"#f217c2", 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();
niceWeather = weather.map(d => {
var newd = {
date : new Date(d["Date time"]),
maxTemp : +d["Maximum Temperature"],
minTemp : +d["Minimum Temperature"],
condition : d["Conditions"], //d.Conditions
precipitation : +d["Precipitation"]
}
return newd;
});
Plot.plot({
marks: [
Plot.line(niceWeather, {x:"date", y:"maxTemp", stroke:"red"}),
Plot.line(niceWeather, {x:"date", y:d=> (d.maxTemp+d.minTemp)/2, stroke:"grey"}),
Plot.line(niceWeather, {x:"date", y:"minTemp", stroke:"blue"})
]
});
Plot.plot({
x: {
domain: [0, 200],
},
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: "reds"
},
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.Acceleration > minAcc), {x:"Horsepower", y:"Weight_in_lbs", fill:"red", opacity:0.4}),
]
});
viewof minAcc = Inputs.range([0, 20], {label: "Minimum Acceleration", step: 1})
cars
Plot.plot({
marks: [
Plot.dot(cars, {filter: d => d.Acceleration > minAcc, 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({
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: 3, anchor: "middle", reduce: "mean"}, {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",
grid: true, labelAnchor: "center"
},
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"})
]
});
Plot.plot({
color: {
legend: true
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"Origin", tip:true, title:d=>d.Name+": "+d.Origin}),
Plot.linearRegressionX(cars, {x:"Horsepower", y:"Weight_in_lbs"})
]
});
myplot = Plot.plot({
title: "Car chart",
subtitle: htl.html`<em>Relationship between power and weight</em>`,
color: {
legend: true
},
marks: [
Plot.dot(cars, {x:"Horsepower", y:"Weight_in_lbs", fill:"Origin", tip:true}),
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.
