3e:null 3f:["$","title",null,{"children":"Projet final | Sekkari Aamer | Observable"}] 45:T15d5,function LineChart(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = "currentColor", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines voronoi // show a Voronoi overlay? (for debugging) } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, d => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y, d => typeof d === "string" ? +d : d)]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); // An optional Voronoi display (for fun). if (voronoi) svg.append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr("d", d3.Delaunay .from(I, i => xScale(X[i]), i => yScale(Y[i])) .voronoi([0, 0, width, height]) .render()); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(voronoi ? () => {} : g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const path = svg.append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, i => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point path.style("stroke", ([z]) => Z[i] === z ? null : "#ddd").filter(([z]) => Z[i] === z).raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) dot.select("text").text(T[i]); svg.property("value", O[i]).dispatch("input", {bubbles: true}); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", mixBlendMode).style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", {bubbles: true}); } return Object.assign(svg.node(), {value: null}); }46:T4f9,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))) }47:T557,chart = { const svg = d3.create("svg").attr("viewBox", `0, 0, ${width}, ${height}`) const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") svg.selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", path) .attr("stroke", "#111") .attr("stroke-width", 0.5) .attr("fill", d => d.properties.data?.get(year) ? cScale(d.properties.data.get(year)[0].co2_growth) : "lightgrey") .on("mouseover", function(event, d) { let text = d.properties.name const co2_growths = d.properties.data.get(year)[0].co2_growth const populations = d.properties.data.get(year)[0].population const emission = d.properties.data.get(year)[0].emission text = text + "\nCO2_emission: " +(emission) text = text + "\nPopulation: " + (populations) text = text + "\nCO2_growth: " +(co2_growths) 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") }) return svg.node() }48:T51b,function colorLegend(container) { const titlePadding = 14; // padding between title and entries const entrySpacing = 16; // spacing between legend entries const entryRadius = 5; // radius of legend entry marks const labelOffset = 4; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size const keys = csv.columns.slice(4,7) const color = d3.scaleOrdinal() .domain(co2.map(d => d.label)) .range(d3.schemeTableau10) // try other schemes, too! const entries = container.selectAll('g') .data(co2) .join('g') .attr('transform', d => `translate(0, ${titlePadding + d.index * entrySpacing})`); const symbols = entries.append('circle') .attr('cx', entryRadius) // <-- offset symbol x-position by radius .attr('r', entryRadius) .attr('fill', d => color(d.label)); const labels = entries.append('text') .attr('x', 2 * entryRadius + labelOffset) // <-- place labels to the left of symbols .attr('y', baselineOffset) // <-- adjust label y-position for proper alignment .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-size', '11px') .style('user-select', 'none') // <-- disallow selectable text .text(d => d.label); }49:T7e5,chart_actual = { const margin = {top: 20, right: 120, bottom: 30, left: 60}, height = 400; const keys = csv.columns.slice(4,7); const series = d3.stack().keys(keys)(data2); const x = d3.scaleLinear() .domain([d3.min(csv, d => d.year), d3.max(csv, d => d.year)]) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice() .range([height - margin.bottom, margin.top]) const area = d3.area() .x(d => x(d.data.year)) .y0(d => y(d[0])) .y1(d => y(d[1])) const color = d3.scaleOrdinal() .domain(csv.columns.slice(4,7)) .range(d3.schemeTableau10) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(10, ".0f")) .append('text') .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '14px') .attr('font-weight', 'bold') .attr('x', width - margin.right) .attr('y', 30) .text('Year') const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr('font-size', '14px') .text('Emission CO2 par secteur d activité')) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .selectAll("path") .data(series) .join("path") .attr("fill", ({key}) => color(key)) .attr("d", area) .append("title") .text(({key}) => key); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append('g') .attr('transform', `translate(${width - 0.9 * margin.right}, ${height/10})`) .call(colorLegend); // <-- our legend helper is invoked just like an axis generato return svg.node() }4a:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m (2).json","type":"application/json","lastModified":1678010153891.978,"size":107761},{"id":"71da1f0fea86268921718585f4cb28c6404ae13cc4c7788da554d23b162262591f7c05d78de4cca1a4951532a1d93e437791164061b3dca1bac2a248fa22cd7b","href":"https://static.observableusercontent.com/files/71da1f0fea86268921718585f4cb28c6404ae13cc4c7788da554d23b162262591f7c05d78de4cca1a4951532a1d93e437791164061b3dca1bac2a248fa22cd7b","name":"co2_pr.csv","type":"text/csv","lastModified":1678008889403.65,"size":156590},{"id":"13999898ccb3b46b4adbf25de9ece34b6ada4879b8553e17496452b7a5d84edbefba489885da836f50968a26ddc231a2a7b703bd8fbabbbebfdae8c9458aa42d","href":"https://static.observableusercontent.com/files/13999898ccb3b46b4adbf25de9ece34b6ada4879b8553e17496452b7a5d84edbefba489885da836f50968a26ddc231a2a7b703bd8fbabbbebfdae8c9458aa42d","name":"co2_pr3.csv","type":"text/csv","lastModified":1678022555098.867,"size":162498}] 43:{"id":"ef02669b456a6810","slug":null,"title":"Projet final","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-03-05T09:33:54.541Z","update_time":"$D2023-03-13T09:34:00.500Z","view_time":null,"first_public_time":"$D2023-03-05T09:33:54.541Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7e146cbe0bb08695","login":"amesekkari","name":"Sekkari Aamer","avatar_url":"https://avatars-next.observableusercontent.com/c046906ba1de78c2a8789980ff03f6579da977af81c2a74d667d9c8476b0e882","tier":"starter_2024","bio":"","following":false},"version":244,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"454371bbc9ed37ab","login":"amesekkari","name":"Sekkari Aamer","avatar_url":"https://avatars-next.observableusercontent.com/c046906ba1de78c2a8789980ff03f6579da977af81c2a74d667d9c8476b0e882","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"454371bbc9ed37ab","login":"amesekkari","name":"Sekkari Aamer","avatar_url":"https://avatars-next.observableusercontent.com/c046906ba1de78c2a8789980ff03f6579da977af81c2a74d667d9c8476b0e882","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Projet final","cells":[{"id":0,"value":"# Projet final","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"rawdata = d3.csvParse(await FileAttachment(\"co2_pr.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data= rawdata.map(d=>{\n d.co2=+d.co2\n d.population=+d.population,\n d.country=d.country\n d.iso_code=d.iso_code\n const parseDate2= d3.timeParse(\"%Y\")\n d.year= parseDate2(d.year)\n return d\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof voronoi = Inputs.toggle({label: \"Show voronoi\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"focus = Generators.input(chart1) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"chart1 = LineChart(data, {\n x: d => d.year,\n y: d => d.co2,\n z: d => d.country,\n yLabel: \"↑ Co2_emission (%)\",\n width,\n height: 500,\n color: \"steelblue\",\n voronoi // if true, show Voronoi overlay\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof replay = html`