31:T4d3,viewof settings = ( Inputs.form( { waffleWidth: Inputs.range([0, 1000], {label: "Chart width (px)", step: 10, value: 1000}), waffleHeight: Inputs.range([0, 500], {label: "Chart height (px)", step: 10, value: 350}), wafflePaddingYears: Inputs.range([0, 0.8], {label: "Year spacing", step: 0.01, value: 0.05}), wafflePaddingMonths: Inputs.range([0, 0.8], {label: "Month spacing", step: 0.01, value: 0.05}), waffleLabel: Inputs.radio(["Show", "Hide"], {label: "Text labels", value: "Show"}), waffleLabelColor: Inputs.radio(["Phase color", "White", "Black"], {label: "Label fill", value: "Phase color"}), waffleLabelBorder: Inputs.radio(["White", "Black", "none"], {label: "Label border", value: "White"}), phaseFont: Inputs.range([7, 30], {label: "Label font size", step: 0.5, value: 17}), labelRotate: Inputs.range([360, 0], {label: "Label rotation", step: 1, value: 360}), includeYear: Inputs.radio(["Show", "Hide"], {label: "Year axis", value: "Show"}), includeMonths: Inputs.radio(["Show", "Hide"], {label: "Month axis", value: "Show"}), monthOrder: Inputs.radio(["Default", "Reverse"], {label: "Month order", value: "Default"}) }, {template} ) )32:T582,waffle = Plot.plot({ marks: [ Plot.cell( // Adds cells lifeFlat, { y: (d) => d.month.toLocaleString("default", { month: "short", timeZone: 'UTC'}), // y-position (months) US abbreviations x: (d) => d3.utcYear(d.month), // x-position (years) fill: (d) => d.color // Fill color for phase labels }), Plot.text( // Adds text labels midDatesArray, { x: (d) => d3.utcYear(d.midDates), y: (d) => d.midDates.toLocaleString("default", { month: "short", timeZone: 'UTC' }), text: settings.waffleLabel === "Show" ? (d) => d.place : "", stroke: settings.waffleLabelBorder === "none" ? null : settings.waffleLabelBorder, fill: settings.waffleLabelColor === "Phase color" ? d => d.color : settings.waffleLabelColor, strokeWidth: 3, fontSize: settings.phaseFont, fontWeight: 700, rotate: settings.labelRotate }) ], y: { domain: settings.monthOrder === "Default" ? monthDefault : d3.reverse(monthDefault), tickPadding: 5, tickSize: 0, padding: settings.wafflePaddingMonths, tickFormat: settings.includeMonths === "Show" ? d => d : null }, x: { tickFormat: settings.includeYear === "Show" ? "%Y" : null, tickSize: 0, tickPadding: 5, tickRotate: -90, type: "band", padding: settings.wafflePaddingYears }, width: settings.waffleWidth, height: settings.waffleHeight })33:[{"id":"f904b7c9f75b13bcd5e45a385b14b1a354a4e5c72fec6480e3703e7bec3b56c0618324fe11599355c9db5e7cdc5093f86084cc7ac3b36d9ae02a3e7b3425a9d5","href":"https://static.observableusercontent.com/files/f904b7c9f75b13bcd5e45a385b14b1a354a4e5c72fec6480e3703e7bec3b56c0618324fe11599355c9db5e7cdc5093f86084cc7ac3b36d9ae02a3e7b3425a9d5","name":"doctor-waffle.png","type":"image/png","lastModified":1680529753159.086,"size":121422}] 2f:{"title":"Maria's life in a waffle chart","cells":[{"id":0,"value":"# Maria's life in a waffle chart\n\nHello there! My name is Maria, and I'm working in this notebook to learn more about...what it's like to work with data in an Observable notebook. \n\nTo create this notebook, I forked [Allison's ](https://observablehq.com/@allisonhorst)[Life in a waffle chart](https://observablehq.com/@observablehq/life-in-waffle), and manually typed in the info in Step 2. (I didn't bother to delete Allison's original text, because as a new-ish user, it's useful for me to see that text and refer back to as I learn more about how to play around in Observable.)\n\nMy take: it's pretty cool to see how fast this chart renders, and how I can change the way it appears visually with the inputs below.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1241,"value":"With some quick updates to this notebook, you can create, customize and download waffle charts of your life. This notebook is inspired by [Isabella Benabaye](https://isabella-b.com/)’s blog post _[My life in months](https://isabella-b.com/blog/my-life-in-months/)_.\n\nHere’s an example made using this notebook, showing actors who have played the [series lead in Dr. Who](https://en.wikipedia.org/wiki/List_of_actors_who_have_played_the_Doctor): ","pinned":false,"hidden":false,"mode":"md"},{"id":1236,"value":"doctorWaffle = FileAttachment(\"doctor-waffle.png\").image({width: 900})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"---\n## Step 1. How to update this notebook","pinned":false,"hidden":false,"mode":"md"},{"id":1388,"value":"[Fork](https://observablehq.com/@observablehq/fork-suggest-merge) this notebook to make a copy in your account so that your changes are saved. \n\nIf you don’t have an Observable account, you can still create and download your waffle chart by working in [tinker mode](https://observablehq.com/@observablehq/tinker-mode) to make temporary edits.\n","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"---\n## Step 2. Make your timeline","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"Update the **phase**, **start** date and **color** values in the array below with information on phases in your life. Location is added here as a starter prompt, but you can change it to capture whatever phases you want (jobs, dogs, personal style evolution, music, schools, etc.). You can also update the colors to standard web color names or hexadecimal color codes to customize the color scheme. Add more phases as needed. \n\nThis chart doesn’t handle overlapping phases. The end of one phase is calculated by the beginning of the next phase. Each phase needs to be at least one month.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"// Update this array with information about phases in your life!\nlife = [\n { phase: \"Boston\", start: \"1983-12-23\", color: \"#9900FF\" },\n {phase: \"United Kingdom\", start: '1995-06-02', color: \"tomato\"},\n {phase: \"Italy\", start: '1995-08-02', color: \"turquoise\"},\n {phase: \"Spain\", start: '1995-09-12', color: \"steelblue\"},\n {phase: \"San Francisco\", start: '1996-10-15', color: \"orchid\"},\n {phase: \"UCLA\", start: '1997-08-10', color: \"purple\"},\n {phase: \"Smith College\", start: '1998-08-10', color: \"gold\"},\n {phase: \"Harvard Business School\", start: '2001-07-01', color: \"tomato\"},\n {phase: \"Boston Women in Comedy Festival\", start: '2003-07-10', color: \"turquoise\"},\n {phase: \"Los Angeles\", start: '2011-07-10', color: \"gold\"},\n {phase: \"Maine\", start: '2021-10-17', color: \"orchid\"},\n {phase: \"Chart End Date:\", start: '2023-02-20', color: \"NA\" } // Keep row (chart will extend to this date)\n] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"---\n## Step 3. Make it a custom waffle chart","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"Use the [inputs](https://observablehq.com/@observablehq/inputs) below to customize your waffle chart. Want to do even more bespoke customization? You can also edit the [Observable Plot](https://observablehq.com/@observablehq/plot) code in the JavaScript cell directly below the chart!","pinned":false,"hidden":false,"mode":"md"},{"id":1114,"value":"### Customize it:","pinned":false,"hidden":false,"mode":"md"},{"id":1056,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"---\n## Step 4. Download or embed it\nOnce you’re done customizing your waffle chart, click on the three dot menu (${getIcon('threeVertDots')}) in the left margin to download it as an SVG or PNG. If you’re working in a fork, you can also [embed your chart](https://observablehq.com/@observablehq/embeds) elsewhere by choosing the Embed option in the same menu.","pinned":false,"hidden":false,"mode":"md"},{"id":1247,"value":"---\n### Troubleshooting tips:\n\n- If any of your color names or codes aren’t understood, the default color palette is used. Here are a couple of things to check:\n - Are you using a recognized [color name](https://htmlcolorcodes.com/color-names/) or valid hexadecimal code?\n - If using a hexadecimal code, do you have a # in front (e.g. `#c0ff33`)?\n- If you see an error that midDates is undefined:\n - Are your entries in chronological order (non-overlapping?)\n - Are there entries shorter than 1 month? Expand all phases to > 1 month.","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"

\n---\n## See how we prep the data:","pinned":false,"hidden":false,"mode":"md"},{"id":1036,"value":"// Add unique id to each row: \nlifeDates = life.map((d, i) => ({\n id: i,\n phase: d.phase,\n start: d.start,\n color: d.color\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"Create a parsing function to convert the string dates (\"YYYY-MM-DD\") to a date:","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"parser = d3.utcParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"Iterate over the objects in the _lifeDates_ array, finding all months between the different phases endpoints using d3.utcMonths:","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"lifeFlat = {\n return lifeDates.flatMap((record, i) => {\n if(i === lifeDates.length) {\n return {...record, month: record.start}\n } else {\n const newArray = d3.utcMonths(lifeDates.map(month => d3.utcMonth(parser(month.start)))[i], \n lifeDates.map(month => d3.utcMonth(parser(month.start)))[i+1])\n return newArray.map(month => ({...record, month}))\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"Find the middle date of each phase (to add labels):","pinned":false,"hidden":false,"mode":"md"},{"id":692,"value":"// Find midpoint of each phase:\nmidPhase = d3.rollup(lifeFlat, v => new Date((d3.max(v, d => d.month).getTime() + d3.min(v, d => d.month).getTime()) / 2), d => d.id)","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"midDatesArray = lifeDates.map((d,i) => ({\n place: d.phase,\n midDates: Array.from(midPhase.values())[i],\n color: d.color\n})).slice(0, -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1108,"value":"Widgets layout template (adapted from from Martien van Steenbergen's [Horizontal inputs](https://observablehq.com/@martien/horizontal-inputs) notebook):","pinned":false,"hidden":false,"mode":"md"},{"id":1054,"value":"// Template credit: This layout is updated from Martien van Steenbergen @martien/horizontal-inputs\n\ntemplate = (inputs) => \nhtl.html`

${Object.values(inputs)}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"Months array (for domain), adjusts to user’s default language setting:","pinned":false,"hidden":false,"mode":"md"},{"id":1773,"value":"monthDefault = Array.from({length: 12}, (e, i) => {\n return new Date(null, i + 1, null).toLocaleDateString(\"default\", {month: \"short\"});\n}) // Thought: can I pass this array as a domain instead, & will it show up in default language for a user? (from: https://gist.github.com/seripap/9eb809268eb8026abd9f?permalink_comment_id=3274769#gistcomment-3274769)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1901,"value":"import {getIcon} from '@observablehq/product-education-icon-helpers'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}