The avatar for @udg-master-data-science
UdG | Master's in Data Science
Public
Information Visualization
Edited
Nov 22
Importers
6
Information Visualization
Module guidelinesWeek 1 | ObservableHQ and Plot essentialsWeek 2 | Drawing with dataWeek 3 | Let's talk about colorWeek 4 | Make it interactiveExercise 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: Template
Data playground
Grades (so far)
Insert cell
Insert cell
Insert cell
Insert cell
ordersByProductDay
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
daily_orders
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
california_daily_orders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
stores
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
california_stores
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
ine-imcv.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
_ineIMCVNarrow = aq.from(ineIMCV)
.fold(aq.not(['ccaa', 'year']), { as: ['dim', 'value'] })
Insert cell
_ineIMCVNarrow
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
yearly_full_release_long_format.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: {type:"equal-earth", rotate: [-10,0]},
width,
marks: [
Plot.geo(world, {stroke: "#505050"}),
Plot.graticule(),
Plot.sphere()
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: ({width, height}) => d3_composite.geoConicConformalSpain().fitSize([width, height], spainPostalMap),
width:width,
height: width * 0.45,
marks: [
Plot.frame({marginBottom: 16, stroke: 'none', fill: '#f5f4ee'}),
Plot.geo(spainPostalMap, { stroke: "#222224", strokeWidth: 0.2 })
]
})
Insert cell
Insert cell
spainPostalCodes = FileAttachment("spainPostalCodes.json").json()
Insert cell
spainPostalMap = topojson.feature(spainPostalCodes, spainPostalCodes.objects.espania)
Insert cell
spainPostalMapCentroids = spainPostalMap.features.map((d) => {
d.coords = d3.geoCentroid(d);
const codigo_postal = d.properties.COD_POSTAL;
d.properties.textData = spainPostalCodesNames.find(d => d.codigo_postal === codigo_postal);
return d;
})
Insert cell
spainPostalCodesNames@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more