Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
dfTemp = FileAttachment("temp_anomalies_data.csv").csv({
typed: true
})
Inputs.table(dfTemp)
Plot.plot({
width: width, // Try to fit the width to the web browser width.
marks: [
Plot.line(dfTemp,
{
x: "Year",
y: "Value"
})
]})
dfSeattleWeather = FileAttachment("seattle_weather.csv").csv({typed: true})
dfCars = FileAttachment("cars.json").json({typed: true})
Inputs.table(dfCars)
Plot.plot({
grid: true,
color: {
type: "categorical",
scheme: "Oranges"
},
marks: [
Plot.dot(dfCars, {
x: "Horsepower",
y: "Miles_per_Gallon",
filter: d => d["Name"].includes("amc"), // We only want AMC cars!
fill: "salmon"
}),
Plot.dot(dfCars, {
x: "Horsepower",
y: "Miles_per_Gallon",
filter: d => d["Name"].includes("chevrolet"),
fill: "steelblue"
})
]
})
Plot.plot({
grid: true,
color: {
scheme: "Turbo"
},
marks: [
Plot.dot(dfCars, {
x: "Horsepower",
y: "Miles_per_Gallon",
sort: d => d["Name"].includes("chevrolet"), // Comment this out and see
filter: d => d["Name"].includes("amc") || d["Name"].includes("chevrolet"),
fill: "Name"
}),
Plot.ruleY([20], {strokeOpacity: 0.2}),
Plot.ruleX([90], {strokeOpacity: 0.2})
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barX(dfCars,
Plot.groupY({x: "count"},
{
y: d => d["Name"].split(" ")[0]
}))
]
})
function extractName(text) {
return text["Name"].split(" ")[0]
}
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barX(dfCars,
Plot.groupY({x: "count"},
{
y: d => extractName(d),
fill: d => extractName(d),
filter: d => {
let name = extractName(d)
let wanted = ["amc", "chevrolet", "ford"]
return wanted.includes(name)
}
}))
]
})
Plot.plot({
color: {
scheme: "category10", // What color schemes are there?
legend: true // Is there a difference if we remove it?
},
marks: [
Plot.dot(dfCars, {
x: "Horsepower",
y: "Origin",
fill: "Origin"
})]
})
Plot.plot({
grid: true,
caption: "Horsepower and Origin of Cars",
color: {
scheme: "category10", // What color schemes are there?
legend: true // Is there a difference if we remove it?
},
marks: [
Plot.dot(dfCars, {
x: "Horsepower",
y: "Origin",
fill: "Origin"
})]
})
plot = Plot.plot({
grid: true,
color: {
scheme: "category10", // What color schemes are there?
legend: true // Is there a difference if we remove it?
},
marks: [
Plot.dot(dfCars, {
x: "Horsepower",
y: "Origin",
fill: "Origin"
})]
})
<div>
${
plot
}
</div>
<div>
<h2 style="text-align:left; font-family:sans-serif">Horsepower of Cars by Origin</h1>
${ plot }
</div>
plot1 = Plot.plot({
grid: true,
color: {
type: "categorical",
scheme: "Oranges"
},
width: 400,
height: 200,
marks: [
Plot.dot(dfCars, {
x: "Horsepower",
y: "Miles_per_Gallon",
filter: d => d["Name"].includes("amc"), // We only want AMC cars!
fill: "salmon"
}),
Plot.dot(dfCars, {
x: "Horsepower",
y: "Miles_per_Gallon",
filter: d => d["Name"].includes("chevrolet"),
fill: "steelblue"
})
]
})
plot2 = Plot.plot({
grid: true,
color: {
type: "categorical",
scheme: "Oranges"
},
width: 400,
height: 200,
marks: [
Plot.dot(dfCars, {
x: "Horsepower",
y: "Displacement",
filter: d => d["Name"].includes("amc"), // We only want AMC cars!
fill: "salmon"
}),
Plot.dot(dfCars, {
x: "Horsepower",
y: "Displacement",
filter: d => d["Name"].includes("chevrolet"),
fill: "steelblue"
})
]
})
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 5px;
}
</style>
<html>
<h3 style="font-family:sans-serif;text-align:left">Investigating Horsepower, MPG and Displacement</h1>
<div class="row">
<div class="column">
${plot1}
</div>
<div class="column">
${plot2}
</div>
</div>
</html>
viewof myText = Inputs.text({label: "Message"}) // Try changing input.
myText
There are all sorts of inputs from buttons to sliders to dates. You can check out the entire gamut of them over herehttps://observablehq.com/@observablehq/inputs.
Plot.plot({
grid: true,
width: width, // This is how you extend the graph sideways to fit the web page
marks: [
Plot.line(dfSeattleWeather, {x: "date", y: "temp_max", stroke: "salmon"}),
Plot.line(dfSeattleWeather, {x: "date", y: "temp_min", stroke: "steelblue"}),
]
})
Plot.plot({
grid: true,
width: width,
marks: [
Plot.areaY(dfSeattleWeather, {x: "date", y1: "temp_min", y2: "temp_max", fill: "olive", curve: "step"})
]
})
viewof kValue = Inputs.range([0, 80], {label: "k"})
Plot.plot({
grid: true,
width: width, // This is how you extend the graph sideways to fit the web page
marks: [
Plot.line(dfSeattleWeather,
Plot.windowY({x: "date", y: "temp_max", k: kValue, stroke: "salmon"})),
Plot.line(dfSeattleWeather,
Plot.windowY({x: "date", y: "temp_min", k: kValue, stroke: "steelblue"})),
Plot.areaY(dfSeattleWeather,
Plot.windowY({x: "date", y1: "temp_min", y2: "temp_max", k: kValue, fill: "lightgray", curve: "step"}))
]
})
Plot.plot({
grid: true,
width: width, // This is how you extend the graph sideways to fit the web page
marks: [
Plot.line(dfSeattleWeather,
Plot.windowY({x: "date", y: "temp_max", k: kValue, stroke: "salmon"})),
Plot.line(dfSeattleWeather,
Plot.windowY({x: "date", y: "temp_min", k: kValue, stroke: "steelblue"})),
Plot.areaY(dfSeattleWeather,
Plot.windowY({x: "date", y1: "temp_min", y2: "temp_max", k: kValue, fillOpacity: 0.2, fill: "lightgray", curve: "step"})),
Plot.line(dfSeattleWeather,
Plot.windowY({x: "date",
y: d => {
return (d["temp_max"] + d["temp_min"]) / 2
},
k: kValue}))
]
})
Inputs.table(dfSeattleWeather)
viewof myColor = Inputs.select(["lightsteelblue", "pink", "lightgray", "crimson"], {label: "Select one"})
Plot.plot({
grid: true,
width: width, // This is how you extend the graph sideways to fit the web page
marks: [
Plot.line(dfSeattleWeather,
Plot.windowY({x: "date", y: "temp_max", k: kValue, stroke: "salmon"})),
Plot.line(dfSeattleWeather,
Plot.windowY({x: "date", y: "temp_min", k: kValue, stroke: "steelblue"})),
Plot.areaY(dfSeattleWeather,
Plot.windowY({x: "date", y1: "temp_min", y2: "temp_max", k: kValue, fill: myColor, curve: "step"}))
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
dfHollywood = FileAttachment("hollywood.csv").csv({typed:true})
Inputs.table(dfHollywood)
hollywoodMakers = new Set()
dfHollywood.forEach(movie => {
console.log(movie)
hollywoodMakers.add(movie["Distributor"])
})
hollywoodMakers
viewof selectedDistributor = Inputs.checkbox(hollywoodMakers, {label: ""})
selectedDistributor
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barX(dfHollywood,
Plot.groupY({x: "count"},
{
y: "Distributor",
fill: "Distributor",
filter: d => selectedDistributor.includes(d["Distributor"])
}))
]
})
Plot.plot({
x: { grid: true },
y: { grid: true },
width: width,
marks: [
Plot.dotX(dfHollywood,
Plot.groupY({x: "max"},
{
x:"International Sales (in $)",
y:"Distributor",
filter: d => selectedDistributor.includes(d["Distributor"])
})),
Plot.ruleX([800000000,1800000000], { strokeOpacity: 0.2 })
]
})
Plot.plot({
x: { grid: true },
y: { grid: true },
width: width,
marks: [
Plot.barX(dfHollywood,
Plot.groupY({x: "max"},
{
x:"International Sales (in $)",
y:"Distributor",
filter: d => selectedDistributor.includes(d["Distributor"]),
fill: 'steelblue',
fillOpacity: 0.2
})),
Plot.barX(dfHollywood,
Plot.groupY({x: "min"},
{
x:"International Sales (in $)",
y:"Distributor",
filter: d => selectedDistributor.includes(d["Distributor"]),
fill: 'salmon',
fillOpacity: 0.2
})),
]
})
viewof selectedDistributor2 = Inputs.select(hollywoodMakers, {label: "Select one"})
selectedDistributor2
Plot.plot({
x: { grid: true },
y: { grid: true },
width: width,
marks: [
Plot.dot(dfHollywood,
{
x:"License",
y:"International Sales (in $)",
fill: 'salmon',
fillOpacity: 0.5,
filter: d => selectedDistributor2.includes(d["Distributor"])
}
)
]
})
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.
