Data visualisation with d3.js (2/3) / Arthur Katossky

xaxis = svg`

Income per inhabitant (dollars at purchasing power parity, logarithmic scale)

</text>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</svg>

`

md`

\`\`\`

svg

|- g

| |- text

| | |- "Income per ..."

| |- path

|- g

| |- line

|- text

|- "10"

-------------------> CONTINUE HERE <--------------------------

(you don't have to continue once have understood the principle)

\`\`\`

`

d3 = require("d3") // importation of the d3 library

{

const svg = d3.create("svg")

const a = 179.5 // ad-hoc values for scaling

const b = -119 // ad-hoc values for scaling

const domain = [10, 1000] // values for the income

const range = [10, 550] // x-positions

svg

.attr("width", 600)

.attr("height",40)

const g = svg.append("g") // create an alias so that I can refer to it

.attr("transform", "translate(-40,20)")

.attr("font-size", 10)

.attr("font-family", "sans-serif")

.attr("text-anchor", "right")

// add and style the text

g.append("text")

.attr('fill', 'grey')

.attr('y', -3)

.attr('x', "419")

.text('Income per inhabitant (dollars at purchasing power parity, logarithmic scale)')

.attr('text-anchor', "end")

// add and style path

g.append("path")

.attr("fill", "none")

.attr("stroke", "red")

//.attr("stroke", "black")

.attr("d", "M60.5,6V0.5H419V6") // could be computed from "range"

for(let i = 1; i<4; i++){

for(let j = 1; j<10; j++){ // the limits could be computed from "domain"

let number = j*10**i

// add the ticks here

let translation = "translate(" + (a * Math.log10(number) + b) + ",0)"

// The translation could be computed from "domain" and "range"

// and we could get rid of "a" and "b".

let tick = g.append("g").attr("transform", translation)

tick.append("line")

.attr("stroke", "black")

.attr("y2", 6)

if(j <= 3){

tick.append("text")

.attr("y", 16)

.attr("x", -3)

.text(number)

}

if(number >= domain[1]) break

}

return svg.node()

}

countries[4].income // your solution

countries.map(country => country.life_expectancy)

countries.map( function(country){ return( country.life_expectancy ) } )

countries.filter(country => country.name=="Brazil")

countries.filter(country => ["Brazil", "Colombia"].includes(country.name))

countries.filter(country => country.population > 100000000)

countries

.filter( country => country.population > 100000000)

.map( country => country.name) // you chain methods one to the other

{

let emissions = [] // empty array

for(let country of countries){

emissions.push(country.co2_emissions) // this goes into the loop, adds the emission number to the array

}

return emissions

}

x = d3.scaleLinear().domain(expectancy_domain).range(x_range)

x(50) // an life expectancy of 50 will be mapped to x=276

pop_max = d3.max(countries, country => country.population)

r2 = d3.scaleSqrt().domain([0, pop_max]).range([1, 30])

r2(0)

r2(30000000)

r2.invert(4)

{

const graph = d3.create("svg")

.attr("width", x_range[1]+10)

.attr("height", height_1d)

for(let country of countries){

graph.append("circle")

.attr("cx", x(country.life_expectancy)) // x() used for positionning the circles

.attr("cy", height_1d/2)

.attr("r", 10 )

}

return graph.node()

}

{

const graph = d3.create("svg")

.attr("width", x_range[1]+10)

.attr("height", height_1d)

const x_axis = graph.append("g") // create a container

const make_x_axis = d3.axisBottom(x) // create the axis factory – we can add options here

make_x_axis(x_axis) // transforms the countainer into a proper axis

// you will often see: x_axis.call(make_x_axis), which is the same

return graph.node()

}

r = d3.scaleSqrt().domain([0,d3.max(countries, c => c.population)]).range([0,20])

// in case of conflict with your earlier code, you can comment either definitions

{

const graph = d3.create("svg")

.attr("width", x_range[1]+10)

.attr("height", height_1d)

for(let country of countries){ // 2.2

graph.append("circle")

.attr("cx", x(country.life_expectancy))

.attr("cy", height_1d/3)

.attr("r", r(country.population))

}

const x_axis = graph.append("g") // 2.3

const make_x_axis = d3.axisBottom(x)

make_x_axis(x_axis)

x_axis

.attr("transform", "translate(0,40)") // <---------- THIS IS NEW.

// Change the "dy" translation to adjust the bar vertically.

.append("text")

.text("Life expectancy (years)")

.attr("x", x_range[1])

.attr("y", -3)

.attr("text-anchor","end")

.attr("fill","grey")

return graph.node()

}

function do_something(){

let circle = d3.select(this).selectAll('circle') // "this" is a special keyword

// Inside even callback functions,

// it refers to the "context" of the event

// i.e. the element that triggered the event.

let is_unselected = circle.attr("stroke-width") == 0.4 // circles start unselected with a stroke width of 0.4

circle.attr("stroke-width", is_unselected ? 4 : 0.4) // If it is unselected (thin border),

// then we select it (make it thicker)

// and conversely.

}

{

const inner_margin = 30

const outer_margin = 40

const margin = inner_margin+outer_margin

const graph = d3.create("svg")

.attr("width", width)

.attr("height", height_2d)

const x_domain = d3.extent(countries, country => country.life_expectancy)

const x_range = [margin, width-margin]

const y_domain = d3.extent(countries, country => country.income)

const y_range = [height_2d-margin, margin]

const r_domain = [0, d3.max(countries, country => country.population)]

const r_range = [0, 20]

const c_domain = ["americas", "asia", "europe", "africa"]

const c_range = ["#6EBB87", "#DA94CE", "#DE9D6C", "#2CB8EA"]

const x = d3.scaleLinear().domain(x_domain).range(x_range)

const y = d3.scaleLog().domain(y_domain).range(y_range)

const r = d3.scaleSqrt().domain(r_domain).range(r_range)

const c = d3.scaleOrdinal().domain(c_domain).range(c_range)

for(let country of countries){ // part 2

graph.append("circle")

.attr("cx", x(country.life_expectancy))

.attr("cy", y(country.income))

.attr("r", r(country.population))

.attr("fill", c(country.region))

.attr("stroke", "black")

.attr("stroke-width", 0.4)

.on("click", do_something) // <------- THIS IS THE ONLY NEW THING !

.style("cursor", "pointer") // <------- this is not 100% needed

// but it is nice to have a "pointer" mouse icon

// that will hint the user that some interaction is possible.

}

const make_x_axis = d3.axisBottom(x)

const make_y_axis = d3.axisLeft(y)

const x_axis = graph.append("g")

const y_axis = graph.append("g")

make_x_axis(x_axis)

make_y_axis(y_axis)

x_axis

.attr("transform", "translate(0,"+(height_2d-outer_margin)+")")

.append("text")

.text("Life expectancy (years)")

.attr("x", width-margin)

.attr("y", -3)

.attr("text-anchor","end")

.attr("fill","grey")

y_axis

.attr("transform", "translate("+outer_margin+",0)")

.append("text")

.text("Income per inhabitant (dollars PPP, logarithmic scale)")

.attr("transform", "rotate(-90) translate("+-250+","+-60+")")

.attr("x", 0)

.attr("y", margin)

.attr("text-anchor","start")

.attr("fill","grey")

.attr("font-size",8)

return graph.node()

}

import {markdown, svg_cheatsheet} from "@katossky/data-visualisation-with-d3-js-1-3"

// TO DO: how to build a simple legend for circles and colors

Purpose-built for displays of data