The avatar for @antonbardera
antonbardera
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.
Published
2020-21 MVTEC Dataviz programming course
Edited
Oct 22, 2020
2 forks
5
2020-21 MVTEC Dataviz programming course
A first introduction to ObservableTask of week 1 (15th-21st October)Task of week 1 (15th-21st October) Solution
A first introduction to D3
Solution for the daily task of Week 2Task of week 2 (22nd-28th October)Task of week 2 (22nd-28th October) - SolutionTemporal dataSolution of the daily task 3Task of week 3 (29th October - 4th November)Task of week 3 (29th October - 4th November) - SolutionInteractionDaily task of week 4Task of week 4 (5th - 11th November)Task of week 4 (5th - 11th November) - SolutionHierarchical dataHierarchical data - Daily solutionTask of week 5 (12th - 18th November)Graph VisualizationTask of week 6 (19th - 25th November)Multidimensional visualizationMultidimensional visualization: Linked viewsTask of week 7 (26th November - 2nd December)Geographic visualizationVoronoi (SVG)ArcsFinal Projects
Insert cell
Insert cell
Insert cell
d3 = require("d3@6");
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
height = 300;
Insert cell
width = 800;
Insert cell
firstchart = {
const svg = d3.select(DOM.svg(width, height));
svg.selectAll('rect')
.data(desiredData)
.join('rect')
.attr('x', (d, i) => i * 25)
.attr('y', d => height - d.cases/30000)
.attr('width', 20)
.attr('height', d => d.cases/30000)
.attr('fill', 'purple');

// Specific to Observable
return svg.node();
}
Insert cell
Insert cell
Insert cell
heightScale = d3.scaleLinear()
.domain([0,d3.max(desiredData, d => d.cases)])
.range([0, height]);
Insert cell
d3.max(desiredData, d => d.cases);
Insert cell
heightScale(0);
Insert cell
heightScale(7916100);
Insert cell
heightScale(1000000);
Insert cell
Insert cell
heightLogScale = d3.scaleLog()
.domain(d3.extent(desiredData, d => d.cases)) //extent returns an Array[2] as [min, max]
.range([0, height]);
Insert cell
d3.extent(desiredData, d => d.cases);
Insert cell
heightLogScale(d3.min(desiredData, d => d.cases));
Insert cell
heightLogScale(7916100);
Insert cell
heightLogScale(1000000);
Insert cell
Insert cell
color = d3.scaleLinear()
.domain([10, 100])
.range(["brown", "steelblue"]);
Insert cell
color(20);
Insert cell
color(50);
Insert cell
Insert cell
widthScale = d3.scaleBand()
.domain(d3.range(desiredData.length))
.range([0, width])
.padding(0.1);
Insert cell
Insert cell
chartwithscales = {
const svg = d3.select(DOM.svg(width, height));
svg.selectAll('rect')
.data(desiredData)
.join('rect')
.attr('x', (d, i) => widthScale(i))
.attr('y', d => height - heightScale(d.cases))
.attr('width', widthScale.bandwidth())
.attr('height', d => heightScale(d.cases))
.attr('fill', 'purple');

// Specific to Observable
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {chart as barchart} with {adaptedData as data, margin} from "@d3/bar-chart"
Insert cell
margin = ({top: 30, right: 0, bottom: 30, left: 50});
Insert cell
barchart
Insert cell
Insert cell
Insert cell
html`<svg id="main-chart"></svg>`
Insert cell
Insert cell
{
const svg = d3.select('#main-chart')
.attr('width', width) // add attribute width to svg
.attr('height', height); // add attribute height to svg

svg.selectAll('rect')
.data(desiredData)
.join('rect')
.attr('x', (d, i) => widthScale(i))
.attr('y', d => height - heightScale(d.cases))
.attr('width', widthScale.bandwidth())
.attr('height', d => heightScale(d.cases))
.attr('fill', 'purple');
}
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