chart = {
const svg = d3.select(DOM.svg(width, height))
.style("-webkit-tap-highlight-color", "transparent")
.style("overflow", "visible");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
//crée la courbe
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue") //couleur de la ligne
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
//ajoute des points sur la ligne
const dots = svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.style("fill", "steelblue") //couleur des points
.attr("class", "dot")
.attr("r", 3) //taille des points
.attr("cx", function(d) {
return x(d.d);
})
.attr("cy", function(d) {
return y(d.v);
});
//tout ce qui suit détermine l'interactivité --> suit le déplacement de la souris et affiche l'information contenue au point le plus proche
const tooltip = svg.append("g");
svg.on("touchmove mousemove", function(event) {
const {d, v} = bisect(d3.pointer(event, this)[0]);
tooltip
.attr("transform", `translate(${x(d)},${y(v)})`)
.call(callout, `${v}
${formatDate(d)}`);
});
svg.on("touchend mouseleave", () => tooltip.call(callout, null));
return svg.node();
}
md`
<figure>
<img src="${await FileAttachment("Nancy Holt_Sun Tunnels_1973-1976 _1_ Flickr.jpg").url()}">
<figcaption>Nancy Holt, Sun Tunnels, 1973-1976
Lucin, Utah</figcaption>
</figure>
`
data = donnees.slice(0,25).map(({date, vues}) => ({d: parseDate(date), v: vues}))
donnees= d3.csv("https://gist.githubusercontent.com/lenaMK/8fc8c87c87148266317b018fc56700ea/raw/16e3c69b5c2814244bb8a4c7fd2dc88b5ee7cc45/Fig2.csv")
parseDate= d3.timeParse("%Y-%m-%d")
x = d3.scaleUtc()
.domain(d3.extent(data, d => d.d))
.range([margin.left, width - margin.right])
d3.max(data, d => d.v)
line = d3.line()
.curve(d3.curveMonotoneY)
.defined(d => !isNaN(d.v))
.x(d => x(d.d))
.y(d => y(d.v))
function formatDate(date) {
return date.toLocaleString("en", {
month: "short",
day: "numeric",
year: "numeric",
timeZone: "UTC"
});
}
bisect = {
const bisect = d3.bisector(d => d.d).left;
return mx => {
const date = x.invert(mx);
const index = bisect(data, date, 1);
const a = data[index - 1];
const b = data[index];
return b && (date - a.date > b.date - date) ? b : a;
};
}
height = 500
margin = ({top: 50, right: 30, bottom: 30, left: 40})
d3 = require("d3@6")
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.
