margin = ({top: 25, right: 20, bottom: 35, left: 40})
height = 400
title = html `<h2>Line chart</h2>`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const dateFr = d => d.toLocaleString("fr-FR", {
day:'numeric',
month:'long',
})
const col_lenght = 10;
const padding_bottom = 40,
padding_left= 85,
circle_size = 5,
circle_padding = 12;
const parti_color = {
"RENAISSANCE": "#F6B923",
"MODEM" : "#ED9627",
"HORIZONS" : "#7D9BCB",
"LR" : "#1C4EA6",
"RN" : "#1D2344",
"FI" : "#E8182C",
"PS" : "#EE718A",
"ECOLOS" : "#42B38E",
"COMMUNISTES" : "#8F1F1B",
"LIOT" : "#D0B197",
"NI" : "#BBBABA"
}
svg.append("g")
.call(xAxis)
.attr('class', 'x_axis')
.classed('axis', true);
svg.append("g")
.call(yAxis)
.attr('class', 'y_axis')
.classed('axis', true);
svg.selectAll('path.domain')
.attr('stroke-width', 0)
svg.selectAll('g.x_axis g.tick line')
.attr('stroke-width', 0)
svg.selectAll('g.x_axis g.tick text')
.text(d => dateFr(d))
svg.selectAll('g.y_axis g.tick text')
.text(d => d)
svg.selectAll('g.y_axis g.tick line')
.attr('x1', -6)
.attr('x2', width)
.attr('stroke', '#ddd')
let g_bar = svg.append('g')
.selectAll('g.bar')
.data(modalites)
.enter()
.append('g')
.attr('class', d=> 'bar_' + d)
g_bar
.selectAll('circle')
.data(function (d) {
return data_par_dep.filter(e=>e.vote == d)
})
.enter()
.append('circle')
.attr('r', circle_size)
.attr('fill', function (d) {
console.log(d.vote)
return parti_color[d.parti]
})
.attr('cx', function (d,i) {
return x(d.vote) + padding_left + (i % col_lenght)*circle_padding
})
.attr('cy', function (d,i) {
return height - padding_bottom - (Math.floor(i/col_lenght)*circle_padding)
})
return svg.node();
}
data_r=
{
const text = await FileAttachment("comptage-maj-retraites@1.csv").text();
const parseDate = d3.utcParse("%Y-%m-%d %H:%M:%S");
return d3.csvParse(text, ({Parti, EFFECTIFS, POUR, RESERVES, ABSTENTION, CONTRE}) => ({
Parti : Parti,
effectifs: +EFFECTIFS,
pour:+POUR,
reserves:+RESERVES,
abstention:+ABSTENTION,
contre:+CONTRE
}));
}
data_par_dep = {
let arr01 = []
data_r.forEach(function(d) {
["pour","reserves","abstention","contre"].forEach(function(e) {
console.log(d.Parti)
console.log(e)
console.log(d[e])
if (d[e] > 0){
for (let i = 0; i <d[e]; i++) {
arr01.push({"parti":d.Parti, "vote":e});
}
}
})
});
return arr01;
}
modalites = ['pour', 'contre', 'reserves', 'abstention']
x = d3.scaleBand()
.domain(modalites)
.rangeRound([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, 200])
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(5))
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.
