3e:null 3f:["$","title",null,{"children":"How do Data Viz Wizards spend their time in hours? | SayehGorjifard | Observable"}] 45:T7b5,drawStartLines = g => { const starts = g.selectAll(".start") .data(chartData) .join("g") .attr("opacity", 1) .attr("fill", d => color(d.Task)) .attr("transform", (d, i) => `translate(${bar.width},${innerRadius(numOfBars - 1 - i) - minRadius + margin.top})`) .call(g => g.append("circle").attr("cy", bar.width / 2).attr("r", bar.width / 2)) .call(g => g.append("rect").attr("width", start.left).attr("height", bar.width)) .call(title) .on("mouseover", highlight) .on("mouseout", restore); const texts = starts.append("text") .attr("class", "start") .attr("font-weight", "bold") .attr("alignment-baseline", "hanging") .attr("dx", start.left + start.padding) .attr("dy", 4) .text(d => `${d.Task} ${d3.format(".2f")(d.values[year])}`); var widths = texts.nodes().map(d => d.getComputedTextLength()); const ext = d3.extent(widths); const min = ext[0], max = ext[1]; starts.append("rect") .attr("width", (d, i) => start.right + (max - widths[i])) .attr("height", bar.width) .attr("transform", (d, i) => `translate(${widths[i] + start.left + start.padding * 2},0)`) const startLength = start.left + start.right + start.padding * 2 + max + bar.width + (triangle.num ? 3 : 0); starts.append("g") .selectAll("polygon") .data(seq(triangle.num)) .join("polygon") .attr("points", `0,2 ${triangle.width},${triangle.width} 0,${triangle.height - 2}`) .attr("transform", (d, i) => `translate(${startLength - bar.width + i * (triangle.width + triangle.padding)},0)`); const y = d => innerRadius(d) - bar.padding / 2 - minRadius + margin.top, tspace = startLength + (triangle.width + triangle.padding) * triangle.num; g.selectAll("line") .data(seq(numOfBars + 1)) .join("line") .attr("stroke", "#ccc") .attr("x1", bar.width).attr("y1", y) .attr("x2", tspace).attr("y2", y); parts.start = starts; return tspace; }46:T553,drawRadialBars = (g, tspace) => { const ticks = x.ticks(15).slice(1, -1); ticks.push(maxValue * 1.05); g.attr("transform", `translate(${tspace},${maxRadius + margin.top})`); const marks = g.append("g") .selectAll(".tick") .data(ticks) .join("g") .attr("class", "tick") .attr("transform", d => `rotate(${deg(x(d)) - 90})`) .call(g => g.append("line").attr("x1", minRadius - bar.padding / 2).attr("x2", maxRadius + bar.padding / 2)) .call(g => g.append("text") .attr("class", "tick") .attr("transform", d => `translate(${maxRadius + bar.padding * 1.5},0)`) .text(x.tickFormat(1, ".1f"))); const bars = g.selectAll(".bar") .data(chartData) .join("g") .attr("class", "bar") .attr("opacity", 1) .attr("fill", d => color(d.Task)) .call(g => g.append("path").attr("d", arc)) .call(g => g.append("circle") .attr("r", bar.width / 2) .attr("cx", (d, i) => innerRadius(i) + bar.width / 2) .attr("transform", (d, i) => `rotate(${deg(x(d.values[year])) - 90})`)) .call(title) .on("mouseover", highlight) .on("mouseout", restore); g.selectAll(".track") .data(seq(chartData.length + 1)) .join("path") .attr("class", "track") .attr("stroke", "#ccc") .attr("d", axisArc); parts.bar = bars; }47:[{"id":"782f3529dc23b7b575466fdce0bb95f5967480d64dbd493041d46f1d8c20bc90375b48fbcbd0f2717b0d7308ed02be9df98882e6b0e6aa87d42f6557af9fdba2","href":"https://static.observableusercontent.com/files/782f3529dc23b7b575466fdce0bb95f5967480d64dbd493041d46f1d8c20bc90375b48fbcbd0f2717b0d7308ed02be9df98882e6b0e6aa87d42f6557af9fdba2","name":"radial.csv","type":"text/csv","lastModified":1685472873218.081,"size":951},{"id":"7f3d971257be9fabe0c77653f47dba11e34454b687c78d7b6df4695a81e566a73eac0a62b481ce74b2e1b25a77162dbcaa1d939a32e1747494a97c8c1bf905a9","href":"https://static.observableusercontent.com/files/7f3d971257be9fabe0c77653f47dba11e34454b687c78d7b6df4695a81e566a73eac0a62b481ce74b2e1b25a77162dbcaa1d939a32e1747494a97c8c1bf905a9","name":"radial@1.csv","type":"text/csv","lastModified":1685474762851.038,"size":951}] 43:{"id":"62a2d3891c819dd3","slug":null,"title":"How do Data Viz Wizards spend their time in hours?","thumbnail":"d848c84efbaf972cf60a4f0adb866f5c067163b34cf56d560f4152bc199a789d","access_level":"public","create_time":"$D2023-05-30T18:15:55.925Z","update_time":"$D2023-06-01T19:47:31.127Z","view_time":null,"first_public_time":"$D2023-05-30T18:15:55.925Z","has_unpublished_edits":null,"fork":{"id":"ccdbd9fbcf45f6e4","slug":"fancy-radial-bars","title":"Fancy Radial Bar Chart","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"82e226ff2d97eb51","login":"sayehgorjifard","name":"SayehGorjifard","avatar_url":"https://avatars-next.observableusercontent.com/ba6e7b24cd306775ac8aac045b532736a5294787a0fd89b338be88fcd65d5480","tier":"starter_2024","bio":"","following":false},"version":922,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a7b189ac7adae6f","login":"lampoona","name":"Sayeh Gorjifard","avatar_url":"https://avatars-next.observableusercontent.com/4c4c7bebf452b0686fd6cc121048974da6589f69a16c4f0762e61529af481678","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"2a7b189ac7adae6f","login":"lampoona","name":"Sayeh Gorjifard","avatar_url":"https://avatars-next.observableusercontent.com/4c4c7bebf452b0686fd6cc121048974da6589f69a16c4f0762e61529af481678","tier":null,"role":"editor"},{"type":"team","id":"82e226ff2d97eb51","login":"sayehgorjifard","name":"SayehGorjifard","avatar_url":"https://avatars-next.observableusercontent.com/ba6e7b24cd306775ac8aac045b532736a5294787a0fd89b338be88fcd65d5480","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How do Data Viz Wizards spend their time in hours?","cells":[{"id":0,"value":"md`# How do Data Viz Wizards spend their time in hours?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof options = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"chart = {\n const svg = d3.create(\"svg\") \n .attr(\"font-size\", \"10pt\") \n .attr(\"cursor\", \"default\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n document.body.append(svg.node());\n \n var tspace = 0;\n svg.append(\"g\").call(g => tspace = drawStartLines(g));\n svg.append(\"g\").call(g => drawRadialBars(g, tspace));\n\n svg.node().remove();\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"parts = ({ start: null, bar: null })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"highlight = (e, d) => {\n parts.start.transition().duration(500).attr(\"opacity\", a => a === d ? 1 : 0.5);\n parts.bar.transition().duration(500).attr(\"opacity\", a => a === d ? 1 : 0.5);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"restore = () => {\n parts.start.transition().duration(500).attr(\"opacity\", 1);\n parts.bar.transition().duration(500).attr(\"opacity\", 1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"title = g => g.append(\"title\").text(d => `${years[year]} - ${d.Task}\\n${d3.format(\".2\")(d.values[year])}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"x = d3.scaleLinear()\n .domain([0, maxValue * 1.05])\n .range([0, 1.5 * Math.PI])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"color = d3.scaleOrdinal(d3.schemeTableau10)\n .domain(chartData.map(d => d.Task))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"seq = (length) => Array.apply(null, {length: length}).map((d, i) => i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"innerRadius = i => minRadius + (bar.width + bar.padding) * i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"outerRadius = i => innerRadius(i) + bar.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"deg = a => a * 180 / Math.PI;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"arc = (d, i) => d3.arc()\n .innerRadius(innerRadius(i))\n .outerRadius(outerRadius(i))\n .startAngle(0)\n .endAngle(x(d.values[year]))()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"axisArc = i => d3.arc()\n .innerRadius(innerRadius(i) - bar.padding / 2)\n .outerRadius(innerRadius(i) - bar.padding / 2)\n .startAngle(0)\n .endAngle(1.5 * Math.PI)()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = d3.csvParse(await FileAttachment(\"radial@1.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":13,"value":"chartData = data.map(d => { \n return {\n Task: d[\"Task\"],\n values: data.columns.slice(0).map(y => d[y])\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"maxValue = d3.max(chartData.map(d => d.values[year]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"year = options.Role","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"years = data.columns.slice(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"width = 1024","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 768","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"margin = ({top: 30, left: 0, bottom: 0, right: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"minRadius = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"maxRadius = outerRadius(numOfBars - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"bar = ({width: 20, padding: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"triangle = ({width: bar.width / 2, height: bar.width, padding: 2, num: 3})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"start = ({left: 100, right: 350, padding: 5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"numOfBars = chartData.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"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"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"