Published
Edited
Jun 5, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
tooltip = {
listAgeRank
const tooltip = d3.select("body").append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.text("I'm a circle!");

d3.selectAll('circle')
.on("mouseover", function(){
return tooltip.style("visibility", "visible");
})
.on("mousemove", function(){
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function(){
return tooltip.style("visibility", "hidden");
});
}
Insert cell
Insert cell
{
let h = 360

let region = regions[0]
let list = region.lists[1]
let c = candidates.filter(c => c['Libellé de la région'] == region.name && c['Libellé Etendu Liste'] == list)

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, h]);

let x = d3.scaleLinear()
.domain([d3.min(c, c=>c['N° candidat']), d3.max(c, c=>c['N° candidat'])])
.range([20, width - 20])

let y = d3.scaleBand()
.domain([ ...new Set(c.map(c => c['Libellé section électorale']))])
.range([20, h - 20])
let r = d3.scaleLog()
.domain([d3.min(c, c => c['N° candidat']), d3.max(c, c => c['N° candidat'])])
.range([15,3])

svg.append('g')
.selectAll('circle')
.data(c)
.join('circle')
.attr('cx', d => x(d['N° candidat']))
.attr('cy', d => y(d['Libellé section électorale']))
.attr('r', d => r(d['N° candidat']))
.attr('fill', d => color(d['Nuance candidat']))
return svg.node()
}
Insert cell
height = 1200
Insert cell
Insert cell
sortLists(regions[0].listsShort, "Grand Est")
Insert cell
function sortLists(listsShort, regionName){
return listsShort
.map(l => candidates.filter(c => c['Libellé abrégé liste'] == l && c['Libellé de la région'] == regionName))
.map(l => [l[0]['Libellé abrégé liste'], d3.group(l, c => c['Nuance candidat'])])
.map(l => [l[0], d3.greatest(l[1], n => n[1].length)[0]])
.sort((a,b) => Object.keys(nuanceColors).indexOf(a[1]) > Object.keys(nuanceColors).indexOf(b[1]))
.map(n => n[0])
}
Insert cell
regions[0]
Insert cell
ysub = d3.scaleBand()
.domain(listsNuances.map(n=>n.name))
.range([0, y.bandwidth() ])
Insert cell
y = d3.scaleBand()
.domain(regions.map(r => r.name))
.range([0, height-20])
Insert cell
Insert cell
swatches({ color, columns: '180px' })
Insert cell
color = d3.scaleOrdinal()
.domain(Object.keys(nuanceColors))
.range(Object.values(nuanceColors))
Insert cell
age(candidates[10])
Insert cell
function age(candidate){
let now = new Date()
let parse = d3.timeParse("%d/%m/%Y");
let birthday = parse(candidate['Date naissance candidat'])
let age = d3.timeYear.count(birthday, now)
return age
}
Insert cell
Insert cell
Inputs.table(candidates)
Insert cell
import {
lists,
listsNuances,
candidatesNuances,
regions,
raw as candidates
} from '@taniki/regionales2021-donnees-minint'
Insert cell
//import { candidatColors as nuanceColors } from '@taniki/regionales2021-colors'
Insert cell
d3
Insert cell
import { candidateColors as nuanceColors } from '@taniki/regionales2021-colors'
Insert cell
import { swatches } from '@d3/color-legend'
Insert cell
import { dodge } from '@d3/beeswarm'
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