3f:null 40:["$","title",null,{"children":"Malaysia's Pulse in Pixels 🇲🇾 | Data Viz | Observable"}] 46:Td38,{ const filteredData = filterByYear(parseInt(year)) const width = 750 const height = 300 const margin = { top: 25, bottom: 25, left: 50, right: 25, } const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) const g = svg.append("g") .attr("width", width) .attr("height", height) .attr("transform", `translate(${margin.left}, ${margin.top})`) const cols = Array(31).fill().map((_, i) => i + 1) const rows = Array(12).fill().map((_, i) => formatShortMonth(i)) const xScale = d3.scaleBand(cols, [0, width]).padding(0.1) const yScale = d3.scaleBand(rows, [0, height]).padding(0.1) const colorScale = d3.scaleSequential( d3.extent(filteredData.map(d => d.births)), d3.interpolateRgb("#ffffff", "#CC0000") ) const tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0) .style("background-color", "white") .style("padding", "4px 8px 4px 8px") .style("font-size", "14px") .style("position", "absolute") .style("transform", "translate(-50%, 0)") .style("pointer-events", "none") .style("border-radius", "4px") .style("box-shadow", "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)") function mouseover() { tooltip.style("opacity", 1) d3.select(this) .style("stroke", "black") } function mousemove(event, d) { tooltip .html(`${formatDate(d.date)} - ${Intl.NumberFormat().format(d.births)} new heartbeats`) .style("left", event.pageX + "px") .style("top", `${event.pageY - 50}px`) } function mouseleave() { tooltip.style("opacity", 0) d3.select(this) .transition() .duration(250) .style("stroke", "transparent") } // axis bottom g.append("g") .style("font-size", "14px") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(xScale).tickSize(0)) .select(".domain") .remove() // axis left g.append("g") .style("font-size", "14px") .call(d3.axisLeft(yScale).tickSize(0)) .select(".domain") .remove() // heatmap tiles g.append("g") .selectAll("rect") .data(filteredData, (d) => formatDate(d.date)) .join("rect") .attr("x", d => xScale(d.date.getUTCDate())) .attr("y", d => yScale(formatShortMonth(d.date.getUTCMonth()))) .attr("rx", 6) .attr("ry", 6) .attr("width", xScale.bandwidth()) .attr("height", yScale.bandwidth()) .style("fill", d => colorScale(d.births)) .style("stroke", "transparent") .style("stroke-width", 4) .style("pointer-events", action === "View animation" ? "none" : "auto") .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave) // weekend dots if (showWeekends) { g.append("g") .selectAll("circle") .data(filteredData, (d) => formatDate(d.date)) .join("circle") .attr("cx", d => xScale(d.date.getUTCDate())) .attr("cy", d => yScale(formatShortMonth(d.date.getUTCMonth()))) .attr("r", 3) .style("fill", d => d.date.getUTCDay() === 0 || d.date.getUTCDay() === 6 ? "black" : "transparent") .style("transform", `translate(${xScale.bandwidth() / 2}px, ${yScale.bandwidth() / 2}px)`) } return svg.node() }47:[{"id":"b80f0510c57cd3a0070b3bbd9cbbb5fdcaf6ea50a575c918ad75c27eccec14278f1cbaba12065cb72e7f361824075f3760529e1a498479d24f3d463dbf47fb9e","href":"https://static.observableusercontent.com/files/b80f0510c57cd3a0070b3bbd9cbbb5fdcaf6ea50a575c918ad75c27eccec14278f1cbaba12065cb72e7f361824075f3760529e1a498479d24f3d463dbf47fb9e","name":"births.csv","type":"text/csv","lastModified":1696874088416.172,"size":927577}] 44:{"id":"92fb2a54c9004475","slug":"malaysias-pulse-in-pixels","title":"Malaysia's Pulse in Pixels 🇲🇾","thumbnail":"80494771c12fb1dc6307e592881f6bc99622a132c1ddf70f7bd8f1058e49483a","access_level":"public","create_time":"$D2023-10-09T17:54:22.926Z","update_time":"$D2023-11-09T04:48:08.228Z","view_time":null,"first_public_time":"$D2023-10-09T17:54:22.926Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"1c660fb032733c47","login":"datawizard","name":"Data Viz","avatar_url":"https://avatars-next.observableusercontent.com/82a864f18e2edc7beb9196bdaa393c009e55a3d32ca71ae51c76303d85aaf8bb","tier":"starter_2024","bio":"","following":false},"version":940,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce492f681ddef189","login":"itschrislow","name":"Chris Low","avatar_url":"https://avatars-next.observableusercontent.com/032ef5467662508d04e067fb58a56110e580b7595a1382ac3a8215d2350e5b5d","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"1c660fb032733c47","login":"datawizard","name":"Data Viz","avatar_url":"https://avatars-next.observableusercontent.com/82a864f18e2edc7beb9196bdaa393c009e55a3d32ca71ae51c76303d85aaf8bb","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ce492f681ddef189","login":"itschrislow","name":"Chris Low","avatar_url":"https://avatars-next.observableusercontent.com/032ef5467662508d04e067fb58a56110e580b7595a1382ac3a8215d2350e5b5d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Malaysia's Pulse in Pixels 🇲🇾","cells":[{"id":0,"value":"# Malaysia's Pulse in Pixels 🇲🇾","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":802,"value":"Inspired by [this Birthday Explorer dashboard](https://data.gov.my/dashboard/birthday-explorer), I created a heat map where each tile represents the number of births on that date.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":813,"value":"Data source: [Public Sector Open Data (Government of Malaysia)](https://data.gov.my/data-catalogue/demography_births_1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":492,"value":"viewof action = Inputs.radio([\"View animation\", \"Explore visualization\"], {label: \"I want to\", value: \"View animation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"viewof year = action === \"View animation\" \n ? Scrubber(getAllYears().map(year => year.toString()), { autoplay: true, delay: 125, loop: false }) \n : Inputs.range([1920, 2022], { label: \"Select year\", step: 1, value: 2022 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"**Controls**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":931,"value":"viewof showWeekends = Inputs.toggle({label: \"Display weekends\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"

Fun facts

Total 👶 in ${year}: ${Intl.NumberFormat().format(sortedBirthdays.reduce((a, b) => a + b.births, 0))}
Day with most 👶: ${formatDate(mostPopularBirthday)}
Day with least 👶: ${formatDate(leastPopularBirthday)}

On this blessed day, ${getBirthsByDate(birthday)} new lives began along with yours.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":710,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"### Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":644,"value":"sortedBirthdays = sortByMostPopularBirthdates(parseInt(year))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"mostPopularBirthday = sortedBirthdays[0].date","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"leastPopularBirthday = sortedBirthdays[sortedBirthdays.length - 1].date","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"function formatShortMonth(month) {\n return Plot.formatMonth(\"en-US\", \"short\")(month)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"function getAllYears() {\n return Array.from(new Set(births.map(d => d.date.getUTCFullYear()))).filter(year => year !== new Date().getUTCFullYear())\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"function filterByYear(year) {\n return births.filter(d => d.date.getUTCFullYear() === year)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"function sortByMostPopularBirthdates(year) {\n const filteredData = filterByYear(year)\n\n return filteredData.sort((a, b) => a.births > b.births ? -1 : 1)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"function formatDate(date) {\n return date.getUTCDate() + \" \" + formatShortMonth(date.getUTCMonth())\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"function getBirthsByDate(date) {\n return births.find(d => {\n return d.date.getUTCFullYear() === date.getUTCFullYear() &&\n d.date.getUTCMonth() === date.getUTCMonth() &&\n d.date.getUTCDate() === date.getUTCDate()\n })?.births\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"births = await FileAttachment(\"births.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"births","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"