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.
A first introduction to ObservableTask of week 1 (15th-21st October)Task of week 1 (15th-21st October) SolutionA first introduction to D3Solution for the daily task of Week 2Task of week 2 (22nd-28th October)Temporal 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
Task of week 2 (22nd-28th October) - Solution
gapminder = d3.json("https://vega.github.io/vega-datasets/data/gapminder.json")
fertilityScale = d3.scaleLinear()
.domain([0,d3.max(desiredData, d => d.fertility)])
.range([margin, width - margin]);
lifeExpectScale = d3.scaleLinear()
.domain([0,d3.max(desiredData, d => d.life_expect)])
.range([height - margin, margin]);
lifeExpectScale(d3.max(desiredData, d => d.life_expect))
populationScale = d3.scaleSqrt()
.domain([0,d3.max(desiredData, d => d.pop)])
.range([0, 40]);
viewof parameters = form(html`<form>
<div>
<i>year: </i><label><input name="year" type=range min="1955" max="2005" value="1970" step="5" oninput="this.nextElementSibling.value = this.value">
<output>1970</output> </label>
</div>
</div>
</form>`)
scatterplot = {
const svg = d3.select(DOM.svg(width, height));
svg.selectAll('circle')
.data(desiredData)
.join('circle')
.attr('cx', d => fertilityScale(d.fertility))
.attr('cy', d => lifeExpectScale(d.life_expect))
.attr('r', d => populationScale(d.pop))
.attr('fill', d => d3.schemeCategory10[d.cluster])
.attr('fill-opacity', 0.4)
.attr('stroke', d => d3.schemeCategory10[d.cluster])
// Specific to Observable
return svg.node();
}
d3.schemeCategory10
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.
