Published
Edited
Jun 7, 2021
1 fork
md `visualisation basée sur le code de Mike Bostock: https://observablehq.com/@d3/bar-chart`
md` ajout d'un titre etc.`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
chart = {
<!-- crée l'espace dans lequel on va mettre la visualisation-->
<!--on peut changer la largeur et la hauteur en modifiant width et height-->
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("fill", color)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.v))
.attr("height", d => y(0) - y(d.v))
.attr("width", x.bandwidth());
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
md `changer le format de la date
fonction qui prend le contenu et transforme le texte en une date pour la machine
Fonctionne pas pour le moment`
parseTime = d3.timeParse("%Y-%B-%d");
data = Object.assign(d3.csvParse(await FileAttachment("Fig2-dateVues.csv").text(), ({date, vues}) => ({d: date.replace('T00:00:00Z', ''), v: vues})), {y: "Nombre de vues", x: "Date"})
md `définit la largeur des barres pour que le graphique fitte dans la largeur prédéterminée`
md` ## Axes
x est une fonction pour créer un axe, se base sur le nombre d'éléments dans data
range = où commence l'axe et où il se termine
padding = définit l'espacement entre chaque élément dans x
xAxis = élément qui crée l'axe dans le graphique
- .attr --> les coordonnées du point de départ pour tracer l'axe
- .call --> va utiliser ce qu'on a défini dans x pour tracer l'axe avec la fonction axisBottom
- .tickFormat : légende dans l'axe X, utilise la propriété d de chaque élément dans data, donc la date
<!-- ajouter l'angle pour que le texte soit lisible-->
y
- range devrait se calculer avec une fonction exemple (0, d3.max(data, d => d.v)) mais étrangement d3.max ne veut pas fonctionner. Nous la définissons donc manuellement.
- basé sur d.v = nombre de vues
`
x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.1)
md `axe X basé sur data.d = la date
il faut orienter le texte à 60° pour qu'il soit lisible`
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => data[i].d).tickSizeOuter(0))
y = d3.scaleLinear()
.domain([0, 12500]).nice()
.range([height - margin.bottom, margin.top])
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y))
md `## interactivité du graphique
réaction à la souris qui "plane" = hover par dessus un élément du graphique
issu de: https://observablehq.com/@giorgiofighera/histogram-with-tooltips-and-bars-highlighted-on-mouse-over`
styles = html`
<style>
.svg-tooltip {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: rgba(69,77,93,.9);
border-radius: .1rem;
color: #fff;
display: block;
font-size: 14px;
max-width: 320px;
padding: .2rem .4rem;
position: absolute;
text-overflow: ellipsis;
white-space: pre;
z-index: 300;
visibility: hidden;
}
</style>`
tooltip = {
chart;
const tooltip = d3
.select("body")
.append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
// select all rect
d3.selectAll("rect")
.on("mouseover", function(d) {
// change the selection style
d3.select(this)
.attr('stroke-width', '2')
.attr("stroke", "black");
// make the tooltip visible and update its text
tooltip
.style("visibility", "visible")
.text(`vues: ${this.v}`);
})
.on("mousemove", function() {
tooltip
.style("top", d3.event.pageY - 10 + "px")
.style("left", d3.event.pageX + 10 + "px");
})
.on("mouseout", function() {
// change the selection style
d3.select(this).attr('stroke-width', '0');
tooltip.style("visibility", "hidden");
});
}
color = "#366daf"
height = 500
margin = ({top: 80, right: 0, bottom: 50, left: 50})
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.
