Encoding & Decoding
Importing cell from another notebook
// Import into your own notebook first
import {addTooltips} from "@mkfreeman/plot-tooltip"
import {data2} from "@sudev/flights-datavis"
Inputs.table(data2)
indiaData = d3.filter(data2, d => d.Country == "India")
d3.map(new Set(data2), x => x.Country)
t1 = Array.from(d3.groupSort(data2, v => v.Country, d => d.Country))
Distibution of Indian airports based on altitude
addTooltips(
Plot.plot({
width: width,
color: { type: "quantile", scheme: "turbo"},
x: {type: "symlog", domain: d3.extent(indiaData, d => d.Altitude)},
r: {type: "sqrt", domain: d3.extent(indiaData, d => d.Altitude), range: [4, 12]},
marks: [
Plot.frame({stroke: "gainsboro"}),
Plot.dot(indiaData, {x: "Altitude", fill: d => d.Altitude, fillOpacity: 0.4, r: d => d.Altitude, title: d => `${d.Altitude} metres`})
],
grid: true
})
)
addTooltips(
Plot.plot({
width: width,
height: 500,
color: { type: "quantile", scheme: "turbo"},
x: {type: "linear", domain: [d3.extent(indiaData, d => d.Longitude)[0] - 20, d3.extent(indiaData, d => d.Longitude)[1] + 20]},
y: {type: "linear", domain: [d3.extent(indiaData, d => d.Latitude)[0] - 2 , d3.extent(indiaData, d => d.Latitude)[1] + 2]},
r: {type: "sqrt", domain: d3.extent(indiaData, d => d.Altitude), range: [4, 25]},
marks: [
Plot.frame({stroke: "gainsboro"}),
Plot.dot(indiaData, {x: "Longitude", y: "Latitude", fill: d => d.Altitude, fillOpacity: 0.6, r: d => d.Altitude, title: d => `${d.Altitude} metres`})
],
inset: 10,
grid: true
})
)
addTooltips(
Plot.plot({
width: width,
height: 500,
color: { type: "pow", scheme: "turbo"},
x: {type: "linear", domain: [d3.extent(data2, d => d.Longitude)[0] - 20, d3.extent(data2, d => d.Longitude)[1] + 20]},
y: {type: "linear", domain: [d3.extent(data2, d => d.Latitude)[0] - 2 , d3.extent(data2, d => d.Latitude)[1] + 2]},
r: {type: "sqrt", domain: d3.extent(data2, d => d.Altitude), range: [4, 8]},
marks: [
Plot.frame({stroke: "gainsboro"}),
Plot.dot(data2, {x: "Longitude", y: "Latitude", fill: d => d.Altitude, fillOpacity: 0.6, r: d => d.Altitude, title: d => `${d.Name} \n${d.Altitude} metres`})
],
grid: true
})
)
addTooltips(
Plot.plot({
width: width,
height: 500,
color: { type: "linear", scheme: "turbo"},
x: {type: "linear", domain: [d3.extent(data2, d => d.Longitude)[0] - 20, d3.extent(data2, d => d.Longitude)[1] + 20]},
y: {type: "linear", domain: [d3.extent(data2, d => d.Latitude)[0] - 2 , d3.extent(data2, d => d.Latitude)[1] + 2]},
r: {type: "sqrt", domain: d3.extent(data2, d => d.Altitude), range: [4, 8]},
marks: [
Plot.frame({stroke: "gainsboro"}),
Plot.dot(data2, {x: "Longitude", y: "Latitude", fill: "Timezone", fillOpacity: 0.6, r: d => d.Altitude, title: d => `${d.Name} \nTimezone : ${d.Timezone}`})
],
grid: true
})
)
addTooltips(
Plot.plot({
width: width,
height: 500,
color: { type: "categorical", scheme: "magma"},
x: {type: "linear", domain: [d3.extent(data2, d => d.Longitude)[0] - 20, d3.extent(data2, d => d.Longitude)[1] + 20]},
y: {type: "linear", domain: [d3.extent(data2, d => d.Latitude)[0] - 2 , d3.extent(data2, d => d.Latitude)[1] + 2]},
r: {type: "sqrt", domain: d3.extent(data2, d => d.Altitude), range: [4, 8]},
marks: [
Plot.frame({stroke: "gainsboro"}),
Plot.dot(data2, {x: "Longitude", y: "Latitude", fill: "Country", fillOpacity: 0.6, r: d => d.Altitude, title: d => `${d.Name} \n${d.Country} \n${d.Altitude} metres`})
],
grid: true
})
)
viewof cty = Inputs.select(t1, {multiple: false, label: "Countries"})
ctyData = d3.filter(data2, d => d.Country == cty)
addTooltips(
Plot.plot({
width: width,
height: 500,
color: { type: "linear", scheme: "viridis"},
x: {type: "linear", domain: [d3.extent(ctyData, d => d.Longitude)[0] - 20, d3.extent(ctyData, d => d.Longitude)[1] + 20]},
y: {type: "linear", domain: [d3.extent(ctyData, d => d.Latitude)[0] - 2 , d3.extent(ctyData, d => d.Latitude)[1] + 2]},
r: {type: "pow", domain: d3.extent(ctyData, d => d.Altitude), range: [4, 20]},
marks: [
Plot.frame({stroke: "gainsboro"}),
Plot.dot(ctyData, {x: "Longitude", y: "Latitude", fill: d => d.Altitude, fillOpacity: 0.6, r: d => d.Altitude, title: d => `${d.Name} \n${d.Country} \n${d.Altitude} metres`})
],
inset: 10,
grid: true
})
)
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.
