The avatar for @rinziv
Salvo Rinzivillo
Published
DVVA-2020
Edited
Mar 20, 2020
Importers
DVVA-2020
Introduzione al corso DVVA
Introduction to JS and Observable
Data VisualizationVisualization of Covid-19 Cases in Italy - Part 1 (data loading)Visualization of Covid-19 Cases in Italy - Part 2 (data cleaning)Visualization of Covid-19 Cases in Italy - Part 3 (country level charts)Visualization of Covid-19 Cases in Italy - Part 4 (regional level charts)Visualization of Covid-19 Cases in Italy - Part 5 (interactive selection of region)Crash course on SVGCanvas introductionFirst D3.js visualizationVisualization of Covid-19 Cases in Italy - Part 6 (D3.js Advanced Visualization)Hierarchical data visualizationNetwork visualizationVisualize word metrics - P.4Geographic DataVisualization of Covid-19 Cases in Italy - Part 7 (D3.js Geography)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Pippo+500
Insert cell
Insert cell
{
let a = 0;
for (let i = 1; i <= 10; ++i) {
a += i;
}
return a;
}
Insert cell
md`Le variabili definite all'interno di un blocco sono variabili locali e non possono essere viste all'esterno `
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Pippo + val
Insert cell
viewof val = slider({
min: 0,
max: 100,
step: 1,
description: "Seleziona un valore tra 1 e 100"
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svg`<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>`
Insert cell
tex`-b \pm \sqrt{a + b} \over c`
Insert cell
html`<div style="border: solid 10px gray; text-align: center; width: 300px">Questo è un DIV</div>`
Insert cell
Insert cell
Insert cell
import {table} from "@tmcw/tables@513"
Insert cell
Insert cell
Insert cell
{
console.log("Hello world");
}
Insert cell
Insert cell
Insert cell
Insert cell
+"1.23"
Insert cell
Insert cell
a = NaN
Insert cell
Math.random()
Insert cell
Insert cell
Math.round(213.53434225*100)/100
Insert cell
Insert cell
Insert cell
!true
Insert cell
Insert cell
true || false
Insert cell
Insert cell
true && false
Insert cell
Insert cell
stringa = "I can concat two strings "+'using plus (+) operator'
Insert cell
Insert cell
stringa.length
Insert cell
Insert cell
stringa.toUpperCase()
Insert cell
stringa.replace("e", "3");

Insert cell
stringa.split(' ')
Insert cell
Insert cell
stringa.indexOf("c")
Insert cell
Insert cell
stringa.slice(2,5);
Insert cell
name = "Daniele Fadda"
Insert cell
Insert cell
md`Mi presento sono ${name}`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
array = [2, 3, 5, 7, 11, 13]
Insert cell
array[0]
Insert cell
Insert cell
// come definire un oggetto (in Observable)
id = ({"nome":"James","cognome":"Bond"})
/* javascript
id = {
id.nome = 'James'
id.cognome = 'Bond'
}*/
Insert cell
md`Il mio nome è ${id.cognome}, ${id.nome} ${id.cognome}.`
Insert cell
dataTest = [
{nome:'Daniele',cognome:'Fadda'},
{nome:'Salvo',cognome:'Rinzivillo'}
]
Insert cell
Insert cell
Insert cell
printTable(dataTest)
Insert cell
Insert cell
Insert cell
function sommami(a, b){ // function signature: name and input arguments
return a+b; // function body, with return statement for output
}
Insert cell
Insert cell
sommami("Daniele ","Fadda")
Insert cell
Insert cell
sommami2 = (a,b) => a+b
Insert cell
sommami2(3,6)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
onlineFile = 'https://raw.githubusercontent.com/danielefadda/dvva2017/master/dipinti/assets/joined_data_definitivo.csv'
Insert cell
Insert cell
d3.csv(onlineFile, d3.autoType)
Insert cell
Insert cell
paintings = d3.text(onlineFile).then(
(txt) => d3.dsvFormat(";").parse(txt))
Insert cell
Insert cell
jsonData = d3.json("https://cdn.rawgit.com/vlandham/js_data/master/data/employees.json")
Insert cell
Insert cell
viewof localFile = html`<input type=file>`
Insert cell
localFile.text()
Insert cell
function parseLocalFile(file, separatore){
return file.text().then(txt => d3.dsvFormat(separatore).parse(txt, d3.autoType));
}
Insert cell
Insert cell
iris = parseLocalFile(localFile,',')
Insert cell
parseDateTime = d3.timeParse("%Y-%m-%d %H:%M:%S");
Insert cell
paintingManualParsing = localFile.text()
.then(txt => d3.dsvFormat(',').parse(txt, d => {
return {
...d,
SepalLenght: +d.SepalLenght,
SepalWidth: +d.SepalWidth,
PetalLenght: +d.PetalLenght,
PetalWidth: +d.PetalWidth,
}
})
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
printTable(iris.slice(0,2))
Insert cell
Insert cell
colonne = iris.columns
Insert cell
Insert cell
d3.mean(iris.map(d => d.SepalWidth))
Insert cell
Insert cell
function dataDescribe (data) {
let descrittore = {};
data.columns.map(d => {
descrittore[d] = {};
descrittore[d]["type"] = typeof(data[0][d]);
if(typeof(data[0][d]) === "number"){
descrittore[d]["count"] = data.filter(e => e[d]).length;
descrittore[d]["mean"] = d3.mean(data.map(e => e[d]));
descrittore[d]["min"] = d3.min(data.map(e => e[d]));
descrittore[d]["max"] = d3.max(data.map(e => e[d]));
descrittore[d]["median"] = d3.median(data.map(e => e[d]));
descrittore[d]["deviation"] = d3.deviation(data.map(e => e[d]));
}
})
return descrittore
}
Insert cell
dataDescribe(iris)
Insert cell
Insert cell
Insert cell
Insert cell
aree = iris.map(d => d.SepalWidth * d.SepalLength)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
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