Notebooks 2.0 is here.
A Big Data Cocktail with a twist of Social Sciences
Data visualisation with d3.js (1/3)
Math.sqrt( 4**2 + 3**2 ) // this is JavaScript, the result is shown just above
my_string + " is " + my_string
// 1. note that references to other cells are underlined in blue
// 2. + on strings means concatenate in JavaScript
my_number_plus_3 = 3 + my_number // my_number is not defined yet ! We'll get to it...
... here is an exemple of Makdown-formatted text, with some bold statements and some cautious statements. We may also get wild and make a bullet list:
some interesting facts
some weird facts
my_number = 28
|- svg
|- circle (the circle element is nested inside the SVG element)
[PLEASE COMPLETE!]
svg`<svg width=48 height=48>
<circle cy="24" cx="24" r="24" fill="blue"/>
<g fill="white">
<circle cx="24" cy="11.6" r="4.7"/>
<path d="m17.4 18.8v2.15h1.13c2.26 0 2.26 1.38 2.26 1.38v15.1s0 1.38-2.26 1.38h-1.13v2.08h14.2v-2.08h-1.13c-2.26 0-2.26-1.38-2.26-1.38v-18.6"/>
</g>
</svg>`
blue_icon = {
const icon = d3.create("svg") // create a svg element and refer to this element as "icon"
.attr("width", 48) // change the attributes
.attr("height", 48)
icon.append("circle") // add a circle nested in the svg element
.attr("fill", "blue") // change the attributes
.attr("cx", 24)
.attr("cy", 24)
.attr("r", 24)
const i = icon.append("g") // add a g nested in the svg element, after the circle
// and refer to this element as "i" (this is NOT a copy, but rather an alias)
i.append("circle") // add a circle nested in the g element aliased as "i"
.attr("fill", "white") // change the attributes
.attr("cx", 24)
.attr("cy", 11.6)
.attr("r", 4.7)
i.append("path") // add a path nested in the g element aliased as "i"
.attr("fill", "white")
.attr("d", "m17.4 18.8v2.15h1.13c2.26 0 2.26 1.38 2.26 1.38v15.1s0 1.38-2.26 1.38h-1.13v2.08h14.2v-2.08h-1.13c-2.26 0-2.26-1.38-2.26-1.38v-18.6")
return icon.node() // return the proper SVG
}
{
const icon = d3.create("svg")
.attr("width", size) // I replace all the 48 by "size"
.attr("height", size)
icon.append("circle")
.attr("fill", "blue")
.attr("cx", size/2) // ... and all the 24 by "size/2"
.attr("cy", size/2)
.attr( "r", size/2)
const i = icon.append("g")
i.append("circle")
.attr("fill", "white")
.attr("cx", size/2)
.attr("cy", size*11.6/48) // a little bit of proportionality here
.attr( "r", size* 4.7/48)
i.append("path")
.attr("fill", "white")
.attr("transform", "scale("+size/48+")") // -------- NEW ----------
// using transform smartly here prevents me from
// messing with the obscure "d" attribute !
.attr("d", "m17.4 18.8v2.15h1.13c2.26 0 2.26 1.38 2.26 1.38v15.1s0 1.38-2.26 1.38h-1.13v2.08h14.2v-2.08h-1.13c-2.26 0-2.26-1.38-2.26-1.38v-18.6")
return icon.node()
}
{
const icon = d3.create("svg")
.attr("width", 48)
.attr("height", 48)
.attr("transform", "translate("+ roll + ")") // a translation here
icon.append("circle")
.attr("fill", "blue")
.attr("cx", 24)
.attr("cy", 24)
.attr( "r", 24)
const i = icon.append("g")
.attr("transform", "rotate(" + roll + " 24 24)") // a rotation there
i.append("circle")
.attr("fill", "white")
.attr("cx", 24)
.attr("cy", 11.6)
.attr( "r", 4.7)
i.append("path")
.attr("fill", "white")
.attr("d", "m17.4 18.8v2.15h1.13c2.26 0 2.26 1.38 2.26 1.38v15.1s0 1.38-2.26 1.38h-1.13v2.08h14.2v-2.08h-1.13c-2.26 0-2.26-1.38-2.26-1.38v-18.6")
return icon.node()
}
/* YOUR CODE GOES HERE */
dist(a,b) // verification that your function works
{
let result = ""
// YOUR CODE GOES HERE
return result
}
countries.map(x => x.color) // The map method takes each element one by one
// and applies the specified anonymous function.
// The map method does NOT modify the original array.
['China', 'India', "Russia"].join(", ")
['China', 'India', "Russia"].reverse().join(", ") // You are allowed to chain methods to one another !
/* YOUR CODE GOES HERE */
{
let svg = d3.create("svg")
.attr("height", 300)
.attr("width", 300)
// YOUR CODE GOES HERE
return svg.node()
}
{
let svg = d3.create("svg")
.attr("height", 300)
.attr("width", 300)
.style("cursor", "pointer") // cherry on the cake: make the mouse pointer know something can happen
// question M
const g = svg.append("g") // "const" because the objet does not change
g.append("circle").attr("r", 10).attr("cx", 20).attr("cy", 40)
g.append("circle").attr("r", 5).attr("cx", 100).attr("cy", 10)
g.append("circle").attr("r", 30).attr("cx", 50).attr("cy", 130).attr("fill", "pink")
// question N
g.selectAll("circle").attr("stroke", "red").attr("stroke-width", "2")
// question O
const text = svg.append("text") // "const" because the objet does not change
.text("Number of circle: 3, click for more.")
.attr("x", 3)
.attr("y", 180)
.attr("font-size", 10)
// Question P
let counter=3 // "let" because the counter's value is going to change
let radius = 10
function random(min, max) { // helper function, generates random bumbers between min and max
return Math.random() * (max - min) + min;
}
function add_circle(){
// good approaches:
// let random_x = Math.floor(Math.random() * 200)
// let random_x = random(0, 200)
// even better approach:
// (prevents the circle to lend outside the viewing window)
let random_x = random(radius, 200-radius)
let random_y = random(radius, 200-radius)
g.append("circle").attr("cx", random_x).attr("cy", random_y).attr("r", radius)
counter = counter + 1
text.text("Number of circle: "+counter+", click for more.")
}
add_circle() // test
// Question Q
svg.on("click", add_circle)
return svg.node()
}
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.
