Untitled / ines-amine

ines-amine

Workspace

Published

Edited

Mar 11, 2021

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>

{

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")

g.append("path")

.attr("fill", "none")

.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()

}

{

const students = ['Guillaume','Sophie','Adele']

students.push("Ines : c'est son anniversaire")

return students[3]

}

{

const student = {

"firstname" : "Paul",

"lastname" : "Dupont",

"age":22,

"diploma":['bac','master']

}

student.gender="male"

student.age=23

return student.age

}

countries

countries[4]

countries[4].income

countries.map(country => country.life_expectancy)

lifeExpectArrayOldSchool = {

const array = []

for(let i=0; i<countries.length;i++){

array.push(countries[i].life_expectancy)

}

return array

}

richCountries= {

return countries.filter(country => country.income>6000).map(country => country.name)

}

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