data analyst • mediapart
tweets-groups@1.ano.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
groups = d3
.sort(
d3.groups(tweetsGroupsAno, (d) => d.group).filter((d) => d[0]),
(d) => d[1].length
)
.filter((d) => d[1].length > 1)
.reverse()
Plot.dotX([...new Set(tweetsGroupsAno.map((d) => d.rank))], {
fill: (d) => user_scale(d)
}).plot()
user_scale = d3
.scaleLinear()
.domain([0, d3.max(tweetsGroupsAno, (d) => d.rank) - 1])
.range(["#FF4136", "#FFDC00"])
Plot.ruleY(
groups.map((d, i) => i),
{ stroke: (d) => group_scale(d), strokeWidth: 5, opacity: 0.5 }
).plot({ height: 1000 })
group_scale = d3
.scaleLinear()
.domain([0, groups.length - 1])
.range(["#B10DC9", "#0074D9"])
chart_group(0)
chart_group = (id) => {
return Plot.plot({
height: 300,
x: {
nice: true,
type: "time",
format: (x) => x.toLocaleString("fr")
},
y: {
axis: null
},
marks: [
Plot.ruleY([0], { stroke: "#bbb" }),
Plot.line([groups[id][1][0], groups[id][1][groups[id][1].length - 1]], {
x: (d) => d3.utcParse("%s")(d.timestamp_utc),
y: 0,
stroke: (d) => group_scale(id),
...line_options
}),
Plot.dotX(groups[id][1], {
x: (d) => d3.utcParse("%s")(d.timestamp_utc),
fill: (d) => user_scale(d.rank),
...dot_options
})
]
});
}
block_group(0)
block_group = (id) => {
let content = "";
let sample = groups[id][1][0];
const heading = `### groupe ${id}
premier tweet :
> ${sample.text_nourl}
>
> bot ${sample.rank}
`;
return md`${[heading, chart_group(id)]}`;
}
general_timeline = (options) =>
Plot.plot({
...options,
caption: "source : twitter/X · calculs et infographie : tam kien duong",
width,
height: 650,
marginTop: 40,
marginBottom: 40,
x: {
axis: "top",
tickSize: 0,
stroke: "#bbb",
line: true
},
y: {
//reverse: true,
domain: [-1, [...new Set(tweetsGroupsAno.map((d) => d.rank))].length],
axis: null
},
marks: [
...groups.map((g, i) =>
Plot.line(g[1], {
x: (d) => d3.utcParse("%s")(d.timestamp_utc),
y: "rank",
stroke: (d) => group_scale(i),
...line_options
})
),
Plot.dotX(
tweetsGroupsAno,
{
x: (d) => d3.utcParse("%s")(d.timestamp_utc),
y: "rank",
...dot_options
}
//}),
)
]
})
dot_options = ({
r: 3,
stroke: "white",
strokeWidth: 1,
strokeOpacity: 0.8,
fill: (d) => user_scale(d.rank),
tip: true,
title: (d) =>
d3.timeParse("%s")(d.timestamp_utc) +
"\n\n" +
d.text_nourl +
"\n\nbot : " +
d.rank
})
line_options = ({
strokeWidth: 10,
opacity: 0.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.
