2d:null 2e:["$","title",null,{"children":"April 11, 2022 #30DayChartChallenge - Circular | Advaith Venkatakrishnan | Observable"}] 33:Tcb3,chart = { // boilerplate start const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const margin = { top: 25, bottom: 25, left: 0, right: 0 } const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom // arc with 7 slices const centerX = plotWidth / 2 const centerY = plotHeight / 2 const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) // boilerplate end const pathGenerator = d3.arc().padAngle(0) const yScale = d3.scaleBand() .domain(Object.keys(data).map(col => col.toString())) .range([7.5, Math.min(centerX, centerY)]) const xScale = d3.scaleLinear() .domain([0, DAYS]) .range([-Math.PI, Math.PI]) const cells = Object.keys(data).map((rowKey, rowIndex) => { return data[rowKey].map((cell, cellIndex) => { const label = { startAngle: xScale(cellIndex), endAngle: xScale(cellIndex + 1), innerRadius: yScale(rowKey.toString()), outerRadius: yScale(rowKey.toString()) + yScale.bandwidth(), } return { properties: { ...label }, fill: cell, centroid: d3.arc().centroid(label), id: `t-${rowIndex}-${cellIndex}` } }) }).flat() const cellGroups = g.selectAll('.cellGroups') .data(cells) .join('g') .attr('transform', `translate(${centerX}, ${centerY})`) .attr('class', 'cellGroups') cellGroups.selectAll('.cellPaths') .data(d => [d]) .join('path') .attr("class", "cellPaths") .attr("d", d => pathGenerator(d.properties)) .attr('stroke', 'white') .attr('stroke-width', '0.25px') .attr('fill', d => d.fill) .attr('id', d => `${d.id}`) const labelData = cells.filter((cell, cellIndex) => cellIndex >= 161) const labelGroup = g.selectAll('.labelGroups') .data(labelData) .join('g') .attr('transform', `translate(${centerX}, ${centerY})`) .attr('class', 'labelGroups') labelGroup.selectAll('.dayLabel') .data((d, i) => [{index: i, path: d}]) .join('text') .attr('class', 'dayLabel') .text(d => DAYS_LIST[d.index]) .attr('x', d => d.path.centroid[0]) .attr('y', d => { const offset = d.path.centroid[1] > 0 ? 20 : -10 return d.path.centroid[1] + offset }) .attr('transform', d => { const t = ((xScale(d.index) + xScale(d.index + 1)) / 2) * (180/Math.PI) const offset = d.path.centroid[1] > 0 ? 180 : 0 return `rotate(${t + offset}, ${d.path.centroid[0]}, ${d.path.centroid[1]})` }) .attr('text-anchor', 'middle') .attr('font-size', '10px') // text - 0 const legendGroup = g.append('g').attr('transform', `translate(${centerX}, ${centerY})`) legendGroup.append('text') .text('0') .attr('dy', 4) .attr('text-anchor', 'middle') .attr('font-size', '10px') .attr('font-weight', 'lighter') // text - 0 legendGroup.append('text') .text('24 hours') .attr('y', centerY) .attr('dy', 12) .attr('text-anchor', 'middle') .attr('font-size', '10px') .attr('font-weight', 'lighter') return svg.node(); }34:[{"id":"10fa7e40621e709d1a862e74743779a88f288fcf61a5865d3313a426620158e9287af46ce47ed5c78286a0ea738a821e14d35673f93ff83302ee957aa4da7285","href":"https://static.observableusercontent.com/files/10fa7e40621e709d1a862e74743779a88f288fcf61a5865d3313a426620158e9287af46ce47ed5c78286a0ea738a821e14d35673f93ff83302ee957aa4da7285","name":"TIME_BUDGET@1.csv","type":"text/csv","lastModified":1649699543860.844,"size":1459}] 31:{"id":"7826c86c091aab8f","slug":"april-11-2022-30daychartchallenge-circular","title":"April 11, 2022 #30DayChartChallenge - Circular","thumbnail":"12564fbcdb9b8d93f2bb548222a642cc909ac2260deb7daa8bc5a40406e14efe","access_level":"public","create_time":"$D2022-04-11T15:16:17.916Z","update_time":"$D2022-04-11T19:57:06.382Z","view_time":null,"first_public_time":"$D2022-04-11T20:01:01.166Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"20079c8e956535fa","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":"starter_2024"},"version":329,"publish_version":329,"role":null,"authored":false,"authors":[{"type":"individual","id":"6016059babd9176a","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":null}],"members":[{"type":"individual","id":"6016059babd9176a","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"April 11, 2022 #30DayChartChallenge - Circular","cells":[{"id":0,"value":"# April 11, 2022 #30DayChartChallenge - Circular","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"Idea: Use a circular plot to represent a cycle. Days in a week. Show how time is spent (work, sleep, free time)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"style = html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"Data: 7 days broken up into 24 hour intervals","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"viewof HOURS = Inputs.range([1, 100], {\n value: 24,\n step: 1,\n precision: 1,\n label: \"Number of Hours\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof DAYS = Inputs.range([1, 100], {\n value: 7,\n step: 1,\n precision: 1,\n label: \"Number of Days\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"TIME_BUDGET_DATA = FileAttachment(\"TIME_BUDGET@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"TIME_BUDGET_MAP = ({\n \"WORK\": {\n fill: \"#969696\"\n },\n \"SLEEP\": {\n fill: \"#74c476\"\n },\n \"FREEDOM\": {\n fill: \"#74a9cf\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"DAYS_LIST = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"data = _.mapValues(_.groupBy(TIME_BUDGET_DATA, 'Hour'), d => {\n return DAYS_LIST.map(day => TIME_BUDGET_MAP[d[0][day]].fill)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"

\n Rings in a Day\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"

Buckets of Time

${Object.keys(TIME_BUDGET_MAP).map((type) => htl.html`

${type}

`)}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"