Published
Edited
Oct 9, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vl({ // tous les points sont au même endroit
"data": {
"values": values
},
"mark": "point"
})
Insert cell
vl({
"data": {
"values": values
},
"mark": "point",
"encoding": { // on rajoute l'info pour dire sur quel canal mettre les données
"x" : {"field": "a", "type" : "nominal"},
"y" : {"field": "b", "type" : "quantitative"}
}
//,"width": 400
})
Insert cell
vl({
"data": {
"values": values
},
"mark": "point",
"encoding": {
"x" : {"field": "a", "type" : "nominal"},
"y" : {"field": "b", "type" : "quantitative", "aggregate": "average"} // on peut agréger les données
}
})
Insert cell
vl({
"data": {
"values": values
},
"mark": "bar", // modifier le type de diagramme
"encoding": { // et inverser les canaux facilement
"y" : {"field": "a", "type" : "nominal"},
"x" : {"field": "b",
"type" : "quantitative",
"aggregate": "average",
"axis": {"title": "the avg. of b"}
}
}
})
Insert cell
Insert cell
weather_data = d3.csv("https://raw.githubusercontent.com/domoritz/maps/master/data/seattle-weather.csv")
Insert cell
vl({
"data": {
"values": weather_data},
"mark": "tick",
"encoding": {
"x": {
"field": "temp_max",
"type": "quantitative"
}
}
})
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
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