Introduction to ObservablesLearning D3.js - Part 1 - From the Top!Learning D3.js - Part 3 - Styles and ShapesLearning D3.js - Part 4 - Line ChartLearning D3.js - Part 4 - Line Chart - minifiedLearning D3.js - Part 5 - Bar ChartLearning D3.js - Part 5 - Bar Chart - minifiedBasic JavaScript/D3 functions
Learning D3.js - Part 2 - Now with data!
groceryList = []
list = {
var groceryList = []
groceryList.push("apples")
groceryList.push("bananas")
groceryList.push("coffee")
return groceryList
}
list[1]
list[0]
listOfThings = ["item1", 42, 3.14, ["pb","j"]]
listOfThings[0]
listOfThings[1]
listOfThings[2]
listOfThings[3]
drawingCircles = [3, 5, 5, 6, 15, 18]
d3 = require('d3')
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
canvas.append("circle")
.attr("cx", 160)
.attr("cy", 280)
.attr("r", 80)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
// Observe
canvas.selectAll("circle")
// Collect
.data(drawingCircles)
// Update
.join("circle")
.attr("cx", 160)
.attr("cy", 280)
.attr("r", 80)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
// Observe
canvas.selectAll("circle")
// Collect
.data(drawingCircles)
// Update
.join("circle")
.attr("cx",
function(d,i) {
return i*20
}
)
.attr("cy", 280)
.attr("r",
function(d,i) {
return d
}
)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
// Observe
canvas.selectAll("circle")
// Collect
.data(drawingCircles)
// Update
.join("circle")
.attr("cx", (d,i)=> i*20)
.attr("cy", 280)
.attr("r", (d,i)=> d)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
canvas.selectAll("circle")
.data(drawingCircles)
.join("circle")
.attr("cx", (d,i)=> i*30)
.attr("cy", (d,i)=> i*20)
.attr("r", (d,i)=> d)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
canvas.selectAll("circle")
.data(drawingCircles)
.join("circle")
.attr("cx", (d,i)=> i*30)
.attr("cy", (d,i)=> height - (i*20))
.attr("r", (d,i)=> d)
return canvas.node();
}
yourCircles = []
{
// define the canvas
// remember 1) Observe 2) Collect 3) Update
// Observe (no circles on the canvas)
// Collect (add yourCircles data)
// Update (update the canvas with your data)
// return your canvas
}
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.
