2a:null 2b:["$","title",null,{"children":"State of Dataviz Charts | Victor Fuentes | Observable"}] 31:Te2b,pieChart = (data, xColumn, yColumn, interpolatecolores) => { const height = 640; const radius = height / 2; const total = d3.sum(data, (d) => d[yColumn]); const d = data .map((d, i) => { return { label: d[xColumn], value: d[yColumn] / total }; }) .sort((a, b) => d3.ascending(a.label, b.label)) .sort((a, b) => d3.ascending(+a.value, +b.value)); // color scale const primaryD = d; primaryD.forEach((d, i) => { d.color = d3[interpolatecolores](0.25 + (0.75 * i) / (primaryD.length - 1)); }); // Arcs let arc = d3 .arc() .innerRadius(radius * 0.6) .outerRadius(radius - 10) .cornerRadius(4); const pie = d3 .pie() .padAngle(0) .sort(null) .value((d) => d.value); const arcs = pie(d); // Main const div = d3.create("div"); const container = div .append("div") .classed("container", true) .style("width", "100%"); const header = container.append("div").classed("header", true); const gridAreas = width < 600 ? `"b b c" "b b a"` : `"a b c"`; const body = container .append("div") .classed("body", true) .style("display", "grid") .style("max-width", "640px") .style("grid-template-columns", "160px 1fr 160px") .style("grid-template-areas", gridAreas) .style("gap", "10px"); // Legend const legend2div = body .append("div") .classed("legend2", true) .style("grid-area", "a"); const response2 = legend2div .selectAll(".response") .data(arcs.reverse()) .join("div") .classed("response", true) .style("display", "flex") .style("line-height", "1.2em") .style("gap", "8px") .style("font-family", "var(--sans-serif)") .style("font-size", "12px") .style("margin-bottom", "8px"); response2 .append("div") .style("width", "14px") .style("height", "14px") .style("flex-grow", "0") .style("flex-basis", "14px") .style("border-radius", "4px") .style("background", (d) => d.data.color); response2 .append("div") .text((d) => d.data.label + ": " + d3.format("0.1%")(d.data.value)) .style("flex-grow", "1") .style("flex-basis", "0") .style("color", (d) => "black"); //Pie const svg = body .append("svg") .style("grid-area", "b") .attr("width", "100%") .attr("viewBox", [-height / 2, -height / 2, height, height]); const defs = svg.append("defs"); svg .selectAll("path") .data(arcs) .join("path") .attr("fill", (d) => d.data.color) .attr("stroke", "white") .attr("d", arc); defs .append("marker") .attr("id", "survey-arrowhead") .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("viewBox", "0 0 6 6") .attr("refX", 1) .attr("refY", 4.5) .attr("orient", "auto") .append("path") .style("stroke", "#aaa") .style("fill", "none") .attr("cx", 5) .attr("cy", 5) .attr("r", 5) .attr("d", "M 5 1 L 1 5 L 5 9"); svg .append("g") .attr("font-family", "var(--sans-serif)") .attr("font-size", 20) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .style("pointer-events", "none") .attr("transform", (d) => `translate(${arc.centroid(d)})`) .call((text) => text .filter((d) => d.endAngle - d.startAngle > 0.2) .append("tspan") .attr("x", "0.1em") .attr("y", "0.1em") .attr("fill", "white") .attr("font-weight", "bold") .attr("dominant-baseline", "middle") .text((d) => d3.format(".0%")(d.data.value)) ); return div.node(); }32:T628,bigPercentage = (pct, c) => { const width = 130; const height = width; const color = c ? c : "steelblue"; const radius = Math.min(width, height) / 2; let arc = d3.arc().innerRadius(radius * 0.85).outerRadius(radius - 1).cornerRadius(4); const pie = d3.pie() .padAngle(0) .sort(null) .value(d => d.value) const arcs = pie([ {value: pct, fg: true}, {value: (100 - pct), fg: false} ]); const div = d3.create("div") .style("width", width + "px") .style("position", "relative"); //Pie const svg = div.append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]); svg.selectAll("path") .data(arcs) .join("path") .attr("fill", d => d.data.fg ? color : "rgba(0, 0, 0, 0.2)") .attr("stroke", "white") .attr("d", arc) svg.append("g") .attr("font-family", "var(--sans-serif)") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs); const bigNumber = div.append("div") .style("position", "absolute") .style("display", "flex") .style("align-items", "center") .style("top", "0") .style("left", "0") .style("text-align", "center") .style("font-size", "36px") .style("font-weight", "bold") .style("width", width + "px") .style("height", height + "px") .style("color", color) .append("div") .style("width", width + "px") .text(d3.format(".0%")(pct / 100)) return div.node(); }33:Te19,surveyCompareBars = function(data, labelCol, rowCols, rowLabels, annotation ) { const pctFormat = d3.format(".0%") const nested = rowCols.map((col, ci) => { const label = rowLabels[ci]; const total = d3.sum(data, d => d[col]) const values = data.map(d => ({ label: d[labelCol], value: d[col], ratio: d[col] / total })) return { label, data: values } }); const gridColumns = width < 500 ? "75px 1fr" : "160px 1fr" const color = d3.scaleOrdinal() .domain(d3.range(data.length)) .range(d3.quantize(t => d3.interpolateBlues((1 - t) * 0.6 + 0.4), data.length)); const container = d3.create("div") .style("display", "flex") .style("max-width", "640px") .style("flex-direction", "column") .style("gap", "4px") .style("font-family", "var(--sans-serif)") .style("font-size", "13px") .style("line-height", "13px") const header = container.append("div") .style("display", "grid") .style("grid-template-columns", gridColumns) .style("gap", "20px") header.append("div") const barsHeader = header.append("div") .style("display", "flex") .style("align-items", "flex-end") barsHeader.selectAll(".bars-header") .data(nested[0].data).join("div") .attr("class", "bars-header") .style("width", d => d.ratio * 100 + "%") .style("border-left", "solid 1px #ddd") .append("div") .style("margin", "0px 0 6px 6px") .text(d => d.label) const question = container.selectAll(".question") .data(nested).join("div") .attr("class", "question") .style("display", "grid") .style("grid-template-columns", gridColumns) .style("gap", "20px") .style("align-items", "center") question.append("div") .style("text-overflow", "ellipsis") .style("white-space", "nowrap") .style("overflow", "hidden") .text(d => d.label) const bars = question.append("div") .style("display", "flex") .style("border-radius", "5px") .style("align-items", "center") .style("overflow", "hidden") const bar = bars.selectAll("div") .data(d => d.data).join("div") .style("background", (d, i) => color(i)) .style("border-left", "solid 1px rgba(255, 255, 255, 0.6)") .style("width", d => d.ratio * 100 + "%") .style("color", "rgba(255, 255, 255, 1.0)") .style("line-height", "28px") .style("font-weight", "bold") .style("text-overflow", "ellipsis") .style("white-space", "nowrap") .style("overflow", "hidden") .style("padding", "0 0 0 8px") .style("box-sizing", "border-box") .text(d => pctFormat(d.ratio)) const annotations = container.append("div") .style("display", "grid") .style("font-family", "var(--serif)") .style("font-size", "14px") .style("line-height", "1.4em") .style("color", "#666") .style("grid-template-columns", gridColumns) .style("gap", "20px") annotations.append("div") const a = annotations.append("div").style("display", "flex"); const swoopy = a.append("svg") .attr("width", 30) .attr("height", 35) .style("margin", "4px 4px") swoopy.append("path") .attr("stroke", "#aaa") .attr("fill", "none") .attr("d", ` M 25 18 C 10 18, 10 10, 10 0 M 6 4 L 10 0 L 14 4 `) a.append("div") .style("max-width", "250px") .style("font-style", "italic") .style("line-height", "1.5em") .style("margin", "10px 0 0 0") .text(annotation) return container.node() }34:Ta2d,surveyHistograms = (data, labelCol, valueCol, sort, highlight, labelWidth) => { const margin = ({top: 2, right: 0, bottom: 10, left: 150}); labelWidth = labelWidth ? labelWidth : 140; const pctFormat = d3.format(".0%") const commaFormat = d3.format(",") const rowHeight = 14; const barHeight = 14; const rowPadding = 4; const numResponses = d3.sum(data, d => d[valueCol]); const maxValue = d3.max(data, d=> d[valueCol]); const gap = 20 const h = Math.ceil((numResponses + 0.2) * rowHeight) + margin.top + margin.bottom const w = width / 2 - gap; if (sort) { data = data.slice().sort((a, b) => d3.descending(a[valueCol], b[valueCol])) } const x = d3.scaleLinear() .domain([0, 70]) .range([0, 100]) const y = d3.scaleBand() .domain(d3.range(numResponses)) .rangeRound([margin.top, h - margin.bottom]) .padding(0.2) const chart = d3.create("div") .style("display", "grid") .style("max-width", "640px") .style("grid-template-columns", "1fr") .style("gap", `0 ${gap}px`) .style("padding-bottom", "16px") const question = chart.append("div") .style("font-family", "var(--sans-serif)") .style("font-size", "13px") .style("line-height", "1.2em") .attr("class", "question") const highlightComparator = (d, i) => { if (Array.isArray(highlight)) { return highlight.includes(i) } else { return d[valueCol] === maxValue && highlight } } const row = question.selectAll(".row") .data(data) .join("div") .attr("class", "row") .style("align-items", "flex-start") .style("padding-top", `${rowPadding}px`) .style("margin-top", `${rowPadding}px`) .style("border-top", (d, i) => i === 0 ? "" : "dotted 1px rgba(0, 0, 0, 0.1)") .style("display", "flex") .style("gap", "20px") .style("font-weight", (d, i) => highlightComparator(d, i) ? "600" : "normal") row.append("div") .text(d => d[labelCol]) .style("color", d => d[labelCol]) .style("width", labelWidth ? labelWidth + "px" : "220px") row.append("div") .text(d => pctFormat(d[valueCol] / 100)) .style("width", "40px") .style("text-align", "right") row.append("div") .attr("class", "bar") .style("flex", "1 0") .append("div") .style("border-radius", "2px") .style("background", "rgb(70 130 180)") .style("opacity", (d, i) => highlightComparator(d, i) || !highlight ? 1 : 0.5) .style("height", `${barHeight}px`) .style("width", d => x(d[valueCol]) + "%") return chart.node(); }35:Ta85,longList = function(tools, description) { const categories = [...new Set(tools.map(tool => tool.category))].map(id => ({id, label: id})) return html`

${tools.sort().map(tool => html`${tool.tool}`)}

` }36:[] 2e:{"id":"1d6feccd60e00592","slug":"state-of-dataviz-charts","title":"State of Dataviz Charts","thumbnail":"53b3de3fc5f3027ececfdb2f541246d3e779f7e43908250e9279f7edc3a3cda6","access_level":"public","create_time":"$D2024-01-23T06:42:52.564Z","update_time":"$D2024-01-23T08:39:14.060Z","view_time":null,"first_public_time":"$D2024-01-23T06:42:52.564Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"29a4dfa992066803","login":"vfuentesc","name":"Victor Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/1d1eef43546c42d5f4083ce7815440acf431e2e8a9a8eaf7113fcde29e34826e","tier":"starter_2024"},"version":1287,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e69cc332aa690cb","login":"vfuentesc","name":"Victor Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/ea82c90a64af21d1a51a98787faf2a737de8ac4d0a996468c8025a9adb671a2f","tier":null}],"members":[{"type":"individual","id":"7e69cc332aa690cb","login":"vfuentesc","name":"Victor Fuentes","avatar_url":"https://avatars-next.observableusercontent.com/ea82c90a64af21d1a51a98787faf2a737de8ac4d0a996468c8025a9adb671a2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"State of Dataviz Charts","cells":[{"id":0,"value":"# State of Dataviz Charts\n\nImplementations of charts used in [State of Dataviz](https://observablehq.com/@observablehq/state-of-dataviz-2021)","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"data = d3.tsvParse(`Sector\tPBI\nAgricultura\t600\nServicio\t300\nMineria\t1000\nComercio\t500\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"pieChart(\n data,\n \"Sector\",\n \"PBI\",\n \"interpolateViridis\",\n \"Madre de Dios: Distribución del PBI real, 2022\",\n \"Fuente: INEI\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"bigPercentage(72)","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":828,"value":"bigPercentageWithDescription(87, html`hello world this is a short description about the number`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"bigPercentageWithDescription = function(value, description) {\n return html`\n\n

\n ${bigPercentage(value, \"steelblue\")}\n

\n ${description}\n

\n \n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"yearsOfExperience = d3.tsvParse(`Years of Experience\tH2 '20\tH1 '21\nLess than 1 year\t20.1\t19.7\n1 – 3 years\t25.0\t25.8\n3 – 5 years\t19.8\t20.2\nMore than 5 years\t35.2\t34.3`, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"surveyCompareBars(yearsOfExperience, \"Years of Experience\", [\"H2 '20\", \"H1 '21\"], [\"H2 '20\", \"H1 '21\"], \"During each survey, 20 percent of the practitioners had just entered the field.\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"collaborationFrequency = d3.tsvParse(`Frequency\tpct\n0-25% of the time\t58.7\n25-50% of the time testing a long answer for wrapping\t24.5\n50-75% of the time\t7\n75-100% of the time\t9.7`, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"surveyHistograms(collaborationFrequency, \"Frequency\", \"pct\", true, true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1048,"value":"tools = d3.tsvParse(\n`category\ttool\nDeveloper\tPython\nAnalytics\tJupyter\nAnalytics\tR\nDeveloper\tVisual Studio\nAnalytics\tExcel\nDeveloper\tReact\nDeveloper\tD3\nDeveloper\tPython\nAnalytics\tJupyter\nAnalytics\tR\nDeveloper\tVisual Studio\nAnalytics\tExcel\nDeveloper\tReact\nDeveloper\tD3\nDeveloper\tPython\nAnalytics\tJupyter\nAnalytics\tR\nDeveloper\tVisual Studio\nAnalytics\tExcel\nDeveloper\tReact\nDeveloper\tD3\nDeveloper\tPython\nAnalytics\tJupyter\nAnalytics\tR\nDeveloper\tVisual Studio\nAnalytics\tExcel\nDeveloper\tReact\nDeveloper\tD3\nDeveloper\tPython\nAnalytics\tJupyter\nAnalytics\tR\nDeveloper\tVisual Studio\nAnalytics\tExcel\nDeveloper\tReact\nDeveloper\tD3`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"longList(tools, \"unique tools reported, ordered by popularity\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":921,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"