Public
Edited
Jan 8, 2024
1 fork
viewof minOcc = Inputs.range([5, 390], { label: "inférieur à ", step:1, value: 390})
wordsAuteur = myData.map((d) => d.myAuteur)
Plot.plot({
height: 800,
width: 1000,
marginBottom: 50,
// marginTop: 50,
marginRight: 50,
marginLeft: 50,
color: {
range: d3.schemeDark2
.concat(d3.schemeAccent)
.concat(d3.schemeAccent)
.concat(d3.schemeAccent)
.concat(d3.schemeAccent)
},
x: {
tickFormat: (d) => `${d}`,
tickRotate: 45
//tickValues(domain().filter((date,i)=>i%60==0));
// tickValues(xScale.domain().filter(function(d,i){
// return !(i%10)
//}));
},
y: {
grid: true,
label: "Nombre d'exemples",
labelAnchor: "center"
},
marks: [
Plot.rectY(
myData,
Plot.binX(
{ y: "count", title: "first" },
{
//rx: 15,
rx: 1,
x: "date",
fill: "id",
title: (d) => `${d.myAuteur}: ${d.triDecade}`
}
)
),
Plot.ruleY([0, 1])
]
})
myData = FileAttachment("jsonToCsv@1.csv").csv()
Inputs.table(myData, { format: { Year: (d) => `${d}` } })
chartAuthors = {
const d3 = Object.assign(await require("d3@6"), {
cloud: await require("d3-cloud@1")
});
const fontFamily = "sans-serif";
const fontScale = 1.5;
const rotate = () => 0; // () => (~~(Math.random() * 6) - 3) * 30
const padding = 0;
const height = 250;
const width = 550;
const color = "rgb(21, 108, 132)";
const svg = d3
.create("svg")
//.style("background-color", "rgb(221, 204, 228)")
.style("background-color", "rgb(255, 255, 255)")
.style('fill', color)
//.style("fill", function(d, i) { return fill[i % 10]; })
.attr("viewBox", [0, 0, width, height])
.attr("font-family", fontFamily)
.attr("text-anchor", "middle");
const cloud = d3
.cloud()
.size([width, height])
//.words(dataAuteurs.map((d) => Object.create(d)))
.words(dataAuteurs.map((d) => Object.create(d)))
.padding(padding)
.rotate(rotate)
.font(fontFamily)
.fontSize((d) => Math.sqrt(d.value) * fontScale)
.on("word", ({ size, x, y, rotate, text }) => {
svg
.append("text")
.attr("font-size", size)
.attr("transform", `translate(${x},${y}) rotate(${rotate})`)
.text(text);
});
cloud.start();
invalidation.then(() => cloud.stop());
return svg.node();
}
listAuteursPerGenre = auteurs.map((d) => d.myAuteur)
selected_auteur = myData.filter((d) => d.myAuteur === auteur)
myData.columns
auteurs = aq.from(myData)
.filter(d => d.myAuteur != "")
.groupby(["myAuteur"])
.objects({grouped: "entries"});
Le nombre d'auteurs dans la base est de ${ auteurs.length }.
auteurs[6][0]
listAuteurs = {
let lstAuteurs = ""
for(let i=0; i<auteurs.length; i++){
lstAuteurs += auteurs[i][0] + ","
}
return lstAuteurs;
}
myVar = {let ind = 2;
return ind;
}
import {swatches as Swatches} from "@d3/color-legend"
zoom = {
if (minOcc > 150 ){
var myZoom = 1;
}
else if (minOcc > 100 ){
var myZoom = 2;
}
else if (minOcc > 50 ){
var myZoom = 3 ;
}
else if (minOcc > 20 ){
var myZoom = 4 ;
}
else{
var myZoom = 8;
}
return myZoom;
}
dataAuteurs = d3
.rollups(
listAuteurs,
(group) => group.length*zoom,
(w) => w
)
.sort(([, a], [, b]) => d3.descending(a, b))
.slice(0, 250)
.map(([text, value]) => ({ text, value}))
.filter(function(map) {
return map.value < minOcc*zoom })
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.
