25:["$","title",null,{"children":"Bubble Pie Chart | instancia paris | Observable"}] 4b:Tb77,chart = { const svg = d3.create("svg") .attr("font-size", "10pt") .attr("cursor", "default") .attr("viewBox", [0, 0, width, height]); svg.append("g").call(g => drawGuidelines(g, chartData.map(d => d.year), d => d3.line()([[x(d) + hx, margin.top],[x(d) + hx, height - margin.bottom]])) ); svg.append("g").call(g => drawGuidelines(g, y.ticks().reverse().slice(1), d => d3.line()([[margin.left, y(d)],[width - margin.left - margin.right, y(d)]])) ); const g = svg.selectAll(".pie") .data(chartData) .join("g") .attr("class", "pie") .attr("transform", d => `translate(${x(d.year) + hx},${y(d.total)})`) .call(g => g.append("text") .attr("dy", "1em") .attr("text-anchor", "middle") .attr("transform", d => `translate(0,${r(d.total)})`) .text(d => toCurrency(d.total))); const pg = g.selectAll("g") .data(d => d3.pie()(d.values).map(p => ({pie: p, total: d.total}))) .join("g") .call(g => g.append("title") .text((d, i) => `${territories[i]}\n${toCurrency(d.pie.value)} (${(d.pie.value / d.total * 100).toFixed(1)}%)`)); const slice = pg.append("path") .attr("d", d => pie(d)()) .attr("opacity", 1) .attr("fill", (d, i) => color(territories[i])); const pct = pg.append("text") .attr("text-anchor", "middle") .attr("fill", "white") .attr("transform", (d, i) => { const c = pie(d).centroid(d.pie.value); return `translate(${c[0]},${c[1]})`; }) .attr("opacity", "0") .text(d => (d.pie.value / d.total * 100).toFixed(1) + "%"); svg.append("g").call(g => drawAxis(g, margin.left, 0, d3.axisLeft(y).ticks(height / 100, "s"))); svg.append("g").call(g => drawAxis(g, 0, height - margin.bottom, d3.axisBottom(x))); svg.append("g").call(drawLegend); return svg.node(); var legend; function drawLegend(g) { legend = g.attr("transform", `translate(${width - margin.right}, 15)`) .selectAll("g") .data(territories) .join("g") .attr("transform", (d, i) => `translate(0,${i * 20})`) .call(g => g.append("rect") .attr("rx", 3).attr("ry", 3) .attr("width", 20).attr("height", 15) .attr("fill", d => color(d))) .call(g => g.append("text").attr("dx", 25).attr("alignment-baseline", "hanging").text(d => d)) .on("mouseover", e => highlight(e)) .on("mouseout", () => highlight()); } function highlight(e) { const i = e ? legend.nodes().indexOf(e.currentTarget) : -1; slice.transition().duration(500).attr("opacity", (d, j) => i === -1 || j === i ? 1 : 0.3); pct.transition().duration(500) .attr("opacity", function(d, j) { if (j === i) { this.parentNode.parentNode.appendChild(this.parentNode); return 1; } else return 0; }); } } 4c:T1210,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Legend(color, { title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); } 4d:T739,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches(color, { columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${color.domain().map(value => { const label = format(value); return htl.html`

${label}

`; })}

`; return htl.html`

${color.domain().map(value => htl.html`${format(value)}`)}

`; } 4e:[{"id":"eb57972db6da70ce668f3b91ace1c7ac7c7dd51839b35efbb6f564d7b1b0573b8bb5f8eb648c3b297658c12d3f9147d7ace3251df8725d848a2776f1ef8d1e11","href":"https://static.observableusercontent.com/files/eb57972db6da70ce668f3b91ace1c7ac7c7dd51839b35efbb6f564d7b1b0573b8bb5f8eb648c3b297658c12d3f9147d7ace3251df8725d848a2776f1ef8d1e11","name":"stock_radar.json","type":"application/json","lastModified":1632579985547.649,"size":2636}] 47:{"id":"b9ba04e86c627d65","slug":"bubble-pie-chart","title":"Bubble Pie Chart","thumbnail":"d69c7e9f9faeff380ba30b178142dcf5808e39aa636f4f17d547be09cb3ea3e3","access_level":"public","create_time":"$D2021-09-25T14:26:13.664Z","update_time":"$D2021-09-25T17:34:23.043Z","view_time":null,"first_public_time":"$D2021-09-25T17:34:34.404Z","has_unpublished_edits":null,"fork":{"id":"8ea6b0975065edb4","slug":"bubble-pie-chart","title":"Bubble Pie Chart","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f525e1fa7de7eeea","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":573,"publish_version":573,"role":null,"authored":false,"authors":[{"type":"individual","id":"c720f06b17f65910","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c720f06b17f65910","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bubble Pie Chart","cells":[{"id":0,"value":"md`# Bubble Pie Chart\nBubble pie chart is a unique bubble chart that allows you to show/compare/relate performance across four paramenter sets instead of two. The third value determines the size of the bubble marker, the fourth by the % of pie while the other two are determined by the position on the axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"drawAxis = (g, x, y, axis) => \n g.attr(\"transform\", `translate(${x},${y})`)\n .call(axis)\n .selectAll(\".tick text\")\n .attr(\"font-size\", \"9pt\");\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"drawGuidelines = (g, data, line) => {\n g.selectAll(\"path\")\n .data(data)\n .join(\"path\")\n .attr(\"stroke\", \"#ddd\")\n .attr(\"stroke-dasharray\", \"5,5\")\n .attr(\"d\", line);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"//toCurrency = num => d3.format(\"$,.2f\")(num)\ntoCurrency = num => num\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"x = d3.scaleBand()\n .domain(chartData.map(d => d.year))\n .range([margin.left, width - margin.left - margin.right])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"hx = x.bandwidth() / 2\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"y = {\n const ext = d3.extent(chartData.map(d => d.total));\n // value(total) to length ratio of radius\n const f = (ext[1] - ext[0]) / (height - margin.bottom - margin.top * 2);\n // margin = 1.5 radius\n ext[0] -= hx * 1.5 * f;\n ext[1] += hx * 1.5 * f;\n \n return d3.scaleLinear().domain(ext).range([height - margin.top - margin.bottom, margin.top])\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"r = d3.scaleLinear()\n .domain(d3.extent(chartData.map(d => d.total)))\n .range([hx / 2, hx])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"pie = d => d3.arc()\n .innerRadius(0)\n .outerRadius(r(d.total))\n .startAngle(d.pie.startAngle)\n .endAngle(d.pie.endAngle)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"// color = d3.scaleOrdinal( d3.schemeTableau10).domain(territories);\ncolor = d3.scaleOrdinal(mycolors).domain(territories);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"mycolors = [\"#4e79a7\", \n \"#f28e2c\", \n \"#e15759\", \n \"#76b7b2\", \n \"#59a14f\", \n \"#edc949\", \n \"#af7aa1\", \n \"#ff9da7\", \n \"#9c755f\", \n \"#bab0ab\",\n \"#4e79a7\", \n \"#f28e2c\", \n \"#e15759\", \n \"#76b7b2\", \n \"#4e79a7\",\n \"#edc949\", \n \"#af7aa1\"\n ]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"//data = d3.csvParse(await FileAttachment(\"profit6yr.csv\").text(), d3.autoType)\njsonText = FileAttachment(\"stock_radar.json\").text()\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"data = JSON.parse(jsonText)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"sites = ['ENTREPOT1', 'ENTREPOT2', 'ENTREPOT3', 'ENTREPOT4', 'ENTREPOT5', 'ENTREPOT6']\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"// Array(6) [\"2015\", \"2016\", \"2017\", \"2018\", \"2019\", \"2020\"]\n/*\nchartData = data.columns.slice(1).map(y => {\n const values = data.map(d => d[y]);\n return {\n year: y,\n values: values,\n total: values.reduce((a, b) => a + b)\n }\n});\n*/\n\nchartData = sites.map(y => {\n const values = data.map(d => d[y]);\n return {\n year: y,\n values: values,\n total: values.reduce((a, b) => a + b)\n }\n});\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"//territories = data.map(d => d.territory)\nterritories = ['CARTE SON', 'CASQUE', 'CLAVIER', 'EDITIQUE', 'ORDINATEUR', 'SERVEURS', 'SOFTWARE', 'SOURIS', 'WEBCAM', 'ACCESSOIRES', 'CARTE RESEAU SANS FIL', 'CARTE VIDEO', 'CPU', 'DISQUE DUR INTERNE', 'MEMORY', 'OS', 'TELEPHONIE']\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"//width = 1024","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"height = width * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"margin = ({left: 40, bottom: 50, top: 50, right: 150})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"function legend({color, ...options}) {\n return Legend(color, options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"function swatches({color, ...options}) {\n return Swatches(color, options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`🌐[ericlo.dev](https://ericlo.dev) 🐱[GitHub Repositories](https://github.com/analyzer2004?tab=repositories) 🐦[Twitter](https://twitter.com/analyzer2004)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null