Mémoire de maîtrise de Valentine Desmorat « L'entrée des femmes artistes dans la collection du Musée d'art contemporain, de 1964 à nos jours : analyse statistique et facteurs déterminants » (2024)
Co-créations avec Lena Krause
Public
Edited
Oct 4, 2023
radialStackedBarChart = {
const style = `
style {
visibility: hidden;
}
.tooltip {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: ${jaune};
border-radius: .1rem;
color: ${noir};
display: block;
font-size: 11px;
max-width: 320px;
padding: .2rem .4rem;
position: absolute;
text-overflow: ellipsis;
white-space: pre;
z-index: 300;
visibility: hidden;
}
`;
d3.select("body")
.append("style")
.html(style);
const svg = d3.select(DOM.svg(width, height))
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
.style("width", "100%")
.style("height", "auto")
.style("font", "10px sans-serif");
svg.append("g")
.selectAll("g")
.data(d3.stack().keys(dataGraphique.columns)(dataGraphique))
.join("g")
.attr("fill", d => z(d.key))
.selectAll("path")
.data(d => d)
.join("path")
.attr("d", arc)
.on("mouseover", function(event, d) {
let text = "Total en "+d.data.Annee+": "+d.data.Total+"\n"+" - Femmes: "+d.data.Femmes+"\n"+" - Hommes: "+d.data.Hommes;
showToolTip(text, [event.pageX, event.pageY])
})
.on("mousemove", function(event) {
d3.select(".tooltip")
.style("top", event.pageY - 10 + "px")
.style("left", event.pageX + 10 + "px")
})
.on("mouseout", function() {
d3.select(".tooltip").style("visibility", "hidden")
});
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.call(legend);
/*test tooltip*/
//zone d'information associée à la souris
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
/*test tooltip*/
return svg.node();
}
categories = Array.from(new Set (oeuvresMacEtudiees.map (oeuvre => oeuvre.categorie)))
innerRadius = 180
outerRadius = Math.min(width, height) / 2
width = 975
height = width
arc = d3.arc()
.innerRadius(d => y(d[0]))
.outerRadius(d => y(d[1]))
.startAngle(d => x(d.data.Annee))
.endAngle(d => x(d.data.Annee) + x.bandwidth())
.padAngle(0.01)
.padRadius(innerRadius)
x = d3.scaleBand()
.domain(dataGraphique.map(d => d.Annee))
.range([0, 2 * Math.PI])
.align(0)
xAxis = g => g
.attr("text-anchor", "middle")
.call(g => g.selectAll("g")
.data(dataGraphique)
.join("g")
.attr("transform", d => `
rotate(${((x(d.Annee) + x.bandwidth() / 2) * 180 / Math.PI - 90)})
translate(${innerRadius},0)
`)
.call(g => g.append("line")
.attr("x2", -5)
.attr("stroke", "#000"))
.call(g => g.append("text")
.attr("transform", d => (x(d.Annee) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI
? "rotate(90)translate(0,16)"
: "rotate(-90)translate(0,-9)")
.attr("text-anchor", "end")
.attr("transform", "rotate(0.02)")
.attr("dx", "-.75em")
.text(d => d.Annee)))
// This scale maintains area proportionality of radial bars
y = d3.scaleRadial()
.domain([0, d3.max(dataGraphique, d => d.Total)])
.range([innerRadius, outerRadius])
yAxis = g => g
.attr("text-anchor", "middle")
.call(g => g.append("text")
.attr("y", d => -y(y.ticks(5).pop()))
.attr("dy", "-1em")
.text("Acquisitions"))
.call(g => g.selectAll("g")
.data(y.ticks(5).slice(1))
.join("g")
.attr("fill", "none")
.call(g => g.append("circle")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.5)
.attr("r", y))
.call(g => g.append("text")
.attr("y", d => -y(d))
.attr("dy", "0.35em")
.attr("stroke", "#fff")
.attr("stroke-width", 5)
.text(y.tickFormat(5, "s"))
.clone(true)
.attr("fill", "#000")
.attr("stroke", "none")))
dataGraphique.columns
z = d3.scaleOrdinal()
.domain(["Hommes", "Femmes"])
.range([noir, bordeau])
legend = g => g.append("g")
.selectAll("g")
.data(dataGraphique.columns)
.join("g")
.attr("transform", (d, i) => `translate(-40,${(i - (dataGraphique.columns.length - 1) / 2) * 20})`)
.call(g => g.append("rect")
.attr("width", 18)
.attr("height", 18)
.attr("fill", z))
.call(g => g.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", "0.35em")
.text(d => d))
showToolTip = (text, coords) => {
d3.select(".tooltip")
.text(text)
.style("top", coords[1] + "px")
.style("left", coords[0] + "px")
.style("visibility", "visible");
}
import {oeuvresMacEtudiees} from "1cd6c83a4402c258"
import {couleurs} from "26cecfbef9723965"
noir = couleurs[3]
bordeau = couleurs[2]
jaune = couleurs[0]
import {artistesMac} from "9672f0ddecee73e3"
import {interval} from '@mootari/range-slider@1781'
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.
