Module guidelinesWeek 1 | ObservableHQ and Plot essentialsWeek 2 | Drawing with dataWeek 3 | Let's talk about colorExercise 1: Load the data and chart it with PlotExercise 2: Data questions, visual answersExercise 4: Look ma! It's interactiveExercise 3: UnPleasantville your charts!Final exercise: GuidelinesFinal exercise: TemplateData playgroundGrades (so far)
Week 4 | Make it interactive
Plot.plot({
projection: ({ width, height }) =>
d3_composite
.geoConicConformalSpain()
.fitSize([width, height], zoom > 0 ? dataForTable : spainPostalMap),
width: width,
height: width * 0.45,
marks: [
Plot.frame({ marginBottom: 16, stroke: "none", fill: "#333332" }),
Plot.raster(fullData, { x: "x", y: "y", fill: "id" }),
// Plot.raster(filteredData, { x: "x", y: "y", fill: "id" }),
Plot.text(numbersOverlay, { x: "x", y: "y", dy: -10, text: "text", fill: "id" }),
Plot.dot(dotOverlay, { x: "x", y: "y", fill: "id", r: postalCode.length / 2 }),
Plot.text(textOverlay, { x: "x", y: "y", dy: -10, text: "name", fill: "id", fontSize: 14 })
]
})
dataForTable = ({
type: "FeatureCollection",
features: spainPostalMap.features.filter(item => item.properties.COD_POSTAL.contains(postalCodeForTable))
})
fullData = spainPostalMapCentroids
.map((d) => ({
x: d.coords[0],
y: d.coords[1],
id: '#8c8b64'
}));
filteredData = spainPostalMapCentroids
.filter((d) => d.properties.COD_POSTAL.startsWith(postalCode))
.map((d) => ({
x: d.coords[0],
y: d.coords[1],
id: postalCode.length > 0 ? "#eeeeee" : "#8c8b64",
text: d.properties.COD_POSTAL.slice(postalCode.length - 5),
name: d.properties.textData ? `${d.properties.textData.entidad_singular_nombre}, ${d.properties.textData.municipio_nombre}` : ''
}))
numbersOverlay = postalCode.length >= 3 && postalCode.length < 5 ? filteredData : []
textOverlay = postalCode.length === 5 ? filteredData : []
dotOverlay = postalCode.length > 1 ? filteredData : []
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.
