3e:null 3f:["$","title",null,{"children":"My data career in a waffle chart | Nicole Designs Data | Observable"}] 45: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} ) )46:T675,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 })47:[{"id":"f904b7c9f75b13bcd5e45a385b14b1a354a4e5c72fec6480e3703e7bec3b56c0618324fe11599355c9db5e7cdc5093f86084cc7ac3b36d9ae02a3e7b3425a9d5","href":"https://static.observableusercontent.com/files/f904b7c9f75b13bcd5e45a385b14b1a354a4e5c72fec6480e3703e7bec3b56c0618324fe11599355c9db5e7cdc5093f86084cc7ac3b36d9ae02a3e7b3425a9d5","name":"doctor-waffle.png","type":"image/png","lastModified":1741046042093.759,"size":121422}] 43:{"id":"5b7743d9a13625ba","slug":null,"title":"My data career in a waffle chart","thumbnail":"1f746e48406e4ce308d8fbb9a38645edebdc9c06f736773229e0f674d8dd52c9","access_level":"public","create_time":"$D2025-03-03T23:54:02.093Z","update_time":"$D2025-07-08T19:35:56.044Z","view_time":null,"first_public_time":"$D2025-03-03T23:54:02.093Z","has_unpublished_edits":null,"fork":{"id":"5bab60a4b4bc5dbc","slug":null,"title":"My career in a waffle chart","owner":{"id":"14a810c076bb557c","login":"nicolelily","name":"Nicole Lillian Mark"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d103af2824e69b4c","login":"nicoledesignsdata","name":"Nicole Designs Data","avatar_url":"https://avatars-next.observableusercontent.com/d1cbccc1b93a828a17856f97b04fa2dd8bbefebff0b23550a07ad419a80b758f","tier":"starter_2024","bio":"","following":false},"version":1975,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16ca2b2ddb06adec","login":"nicolelily","name":"Nicole Lillian Mark","avatar_url":"https://avatars-next.observableusercontent.com/13ae6eb1e526671bc80a343de7594613b8919a924304099b6bb8c9240f1bbf35","tier":null,"bio":"Principal, Nicole Designs Data LLC | Founder, U.S. Breed-Specific Legislation Database Project","following":false}],"members":[{"type":"team","id":"d103af2824e69b4c","login":"nicoledesignsdata","name":"Nicole Designs Data","avatar_url":"https://avatars-next.observableusercontent.com/d1cbccc1b93a828a17856f97b04fa2dd8bbefebff0b23550a07ad419a80b758f","tier":"starter_2024","role":"editor"},{"type":"individual","id":"16ca2b2ddb06adec","login":"nicolelily","name":"Nicole Lillian Mark","avatar_url":"https://avatars-next.observableusercontent.com/13ae6eb1e526671bc80a343de7594613b8919a924304099b6bb8c9240f1bbf35","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"My data career in a waffle chart","cells":[{"id":1957,"value":"

My data career in a waffle chart

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"// Update this array with information about phases in your life!\nlife = [\n { phase: \"UNC Health\", start: \"2008-04-20\", color: \"#9900FF\" },\n { phase: \"Mission Health\", start: \"2011-12-01\", color: \"tomato\" },\n { phase: \"CCNC\", start: \"2016-05-06\", color: \"royalblue\" },\n { phase: \"WellCare\", start: \"2018-07-01\", color: \"gray\" },\n { phase: \"Aspen RxHealth\", start: \"2019-02-01\", color: \"#330099\" },\n { phase: \"Olive AI\", start: \"2021-06-01\", color: \"orange\" },\n { phase: \"Cart.com\", start: \"2022-05-30\", color: \"yellowgreen\" },\n { phase: \"Nicole Designs Data\", start: \"2023-01-05\", color: \"magenta\" },\n { phase: \"Chart End Date:\", start: \"2025-07-01\", color: \"NA\" } // Keep row (chart will extend to this date)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1114,"value":"### Customize it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1056,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"

\n---\n## See how we prep the data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"Create a parsing function to convert the string dates (\"YYYY-MM-DD\") to a date:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"parser = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"Find the middle date of each phase (to add labels):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1901,"value":"import {getIcon} from '@observablehq/product-education-icon-helpers'","pinned":false,"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"