40:null 41:["$","title",null,{"children":"Wk 3 pictograph/Dot Matrix | Nelia | Observable"}] 47:T9c2,svgDiet = { const dotRadius = 6; const dotSpacing = 14; const rowHeight = 60; const dietTypes = Array.from(new Set(dietGenderDots2.map(d => d.diet))); const width = 800; const height = 80 + rowHeight * dietTypes.length; const genderOrder = ["Male", "Female"]; const color = d3.scaleOrdinal() .domain(genderOrder) .range(["#4f81bd", "#c0504d"]); const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Title svg.append("text") .attr("x", 20) .attr("y", 30) .attr("font-size", 18) .attr("font-weight", "bold") .text("Diet type by gender (1 dot = 100 people)"); // Legend const legend = svg.append("g") .attr("transform", "translate(20, 50)"); genderOrder.forEach((g, i) => { const lg = legend.append("g") .attr("transform", `translate(${i * 140}, 0)`); lg.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", dotRadius) .attr("fill", color(g)); lg.append("text") .attr("x", 12) .attr("y", 4) .attr("font-size", 12) .text(g); }); // Rows dietTypes.forEach((diet, rowIndex) => { const yBase = 80 + rowIndex * rowHeight; // Background strip svg.append("rect") .attr("x", 0) .attr("y", yBase - 15) .attr("width", width) .attr("height", rowHeight) .attr("fill", rowIndex % 2 === 0 ? "#fafafa" : "#fff"); // Row group const rowGroup = svg.append("g") .attr("transform", `translate(20, ${yBase})`); // Diet label rowGroup.append("text") .attr("x", 0) .attr("y", 5) .attr("font-size", 14) .attr("font-weight", "bold") .text(diet); // Filtered data for this diet const rowData = dietGenderDots2.filter(d => d.diet === diet); // Male + Female subrows genderOrder.forEach((g, gi) => { const gData = rowData.find(d => d.gender === g); if (!gData) return; const gGroup = rowGroup.append("g") .attr("transform", `translate(160, ${gi * 20})`); gGroup.selectAll("circle") .data(d3.range(gData.dots)) .join("circle") .attr("cx", j => j * dotSpacing) .attr("cy", 0) .attr("r", dotRadius) .attr("fill", color(g)); // Count label gGroup.append("text") .attr("x", (gData.dots + 1) * dotSpacing) .attr("y", 4) .attr("font-size", 10) .text(`${g}: ${gData.count}`); }); }); return svg.node(); }48:[{"id":"bc58c0036933caf3c9859c8881bef9fa98bee830f2c54928f38f1997e134f707e6f53ade622aea174735c1f18a7c139971b85387916ca32fe4c5f86e57f00027","href":"https://static.observableusercontent.com/files/bc58c0036933caf3c9859c8881bef9fa98bee830f2c54928f38f1997e134f707e6f53ade622aea174735c1f18a7c139971b85387916ca32fe4c5f86e57f00027","name":"Final_data.csv","type":"text/csv","lastModified":1763946239745.351,"size":10326355}] 45:{"id":"df6bb05b075bfbbf","slug":null,"title":"Wk 3 pictograph/Dot Matrix","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-11-24T01:01:40.944Z","update_time":"$D2025-11-24T04:45:31.238Z","view_time":null,"first_public_time":"$D2025-11-24T03:14:37.393Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ba84dd97ecf04977","login":"neliaclaudino","name":"Nelia","avatar_url":"https://avatars-next.observableusercontent.com/7139fce4e999c1eb9c82edbeee3ba473f593f62dfb00a7a022c537e800550fe5","tier":"starter_2024","bio":"","following":false},"version":122,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b076e04e6a9b9f3e","login":"nelia2","name":"Nelia","avatar_url":"https://avatars-next.observableusercontent.com/13759b1d97626fc751ab1a96ad8423ecd1bf52e043aa072e93671ff7d03275da","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b076e04e6a9b9f3e","login":"nelia2","name":"Nelia","avatar_url":"https://avatars-next.observableusercontent.com/13759b1d97626fc751ab1a96ad8423ecd1bf52e043aa072e93671ff7d03275da","tier":null,"role":"editor"},{"type":"team","id":"ba84dd97ecf04977","login":"neliaclaudino","name":"Nelia","avatar_url":"https://avatars-next.observableusercontent.com/7139fce4e999c1eb9c82edbeee3ba473f593f62dfb00a7a022c537e800550fe5","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"98d55359fc313b57","slug":"final-assignments","title":"Final Assignments","owner":{"id":"ba84dd97ecf04977","login":"neliaclaudino","name":"Nelia"}},"type":"notebook","body":{"titling":"auto","title":"Wk 3 pictograph/Dot Matrix","cells":[{"id":0,"value":"# Wk 3 pictograph/Dot Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"data = FileAttachment(\"Final_data.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof dataTable = Inputs.table(data.slice(0, 20))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"genderCounts = d3.rollups(\n data,\n v => v.length,\n d => d.Gender\n).map(([gender, count]) => ({ gender, count }))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"genderDots = genderCounts.map(d => ({\n gender: d.gender,\n count: d.count,\n dots: Math.ceil(d.count / 100)\n}))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"svg = {\n const dotRadius = 6;\n const dotSpacing = 16;\n const width = 650;\n const height = 150;\n\n const color = d3.scaleOrdinal()\n .domain([\"Male\", \"Female\"])\n .range([\"#4f81bd\", \"#c0504d\"]); // blue and red\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n genderDots.forEach((d, rowIndex) => {\n\n // Label\n svg.append(\"text\")\n .attr(\"x\", 20)\n .attr(\"y\", 40 + rowIndex * 60)\n .attr(\"font-size\", 16)\n .attr(\"font-weight\", \"bold\")\n .text(`${d.gender} (${d.count})`);\n\n // Dots\n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(d3.range(d.dots))\n .join(\"circle\")\n .attr(\"cx\", (j) => 180 + j * dotSpacing)\n .attr(\"cy\", 35 + rowIndex * 60)\n .attr(\"r\", dotRadius)\n .attr(\"fill\", color(d.gender));\n });\n\n return svg.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"dietGenderCounts2 = d3.rollups(\n filteredData, // 🔹 use filtered data now\n v => v.length,\n d => d.diet_type,\n d => d.Gender\n)\n.flatMap(([diet, byGender]) =>\n byGender.map(([gender, count]) => ({\n diet,\n gender,\n count\n }))\n)\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"dietGenderCounts2\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"dietGenderDots2 = dietGenderCounts2.map(d => ({\n diet: d.diet,\n gender: d.gender,\n count: d.count,\n dots: Math.ceil(d.count / 100) \n}))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"dietGenderDots2\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof dotValue = Inputs.select(\n [1, 5, 10, 25, 50, 100, 250, 500],\n { value: 10, label: \"People per dot\" }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"dataWithAge = data.map(d => ({\n ...d,\n age_group:\n d.Age < 25 ? \"Under 25\" :\n d.Age < 35 ? \"25–34\" :\n d.Age < 45 ? \"35–44\" :\n d.Age < 55 ? \"45–54\" :\n \"55+\"\n}))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof workoutFilter = Inputs.select(\n [\"All\"].concat(\n Array.from(new Set(dataWithAge.map(d => d.Workout_Type)))\n .filter(Boolean)\n .sort(d3.ascending)\n ),\n { label: \"Workout type\" }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"viewof ageFilter = Inputs.select(\n [\"All\"].concat(\n Array.from(new Set(dataWithAge.map(d => d.age_group))).sort()\n ),\n { label: \"Age group\" }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"filteredData = dataWithAge.filter(d =>\n (workoutFilter === \"All\" || d.Workout_Type === workoutFilter) &&\n (ageFilter === \"All\" || d.age_group === ageFilter)\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"filteredData.slice(0, 10)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"dietGenderDots2.slice(0, 5)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"viewof dietDashboard = html`

Diet by Gender · Dot Matrix

\n Each dot represents 100 people. Use the filters below to explore workout type and age groups.\n

\n\n

\n Filters:\n Workout type: ${viewof workoutFilter}\n Age group: ${viewof ageFilter}\n

\n\n

\n ${svgDiet}\n

\n\n

\n Source: Final_data.csv (Kaggle lifestyle dataset · cleaned & visualized in Observable).\n

`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"This assignment finally helped the dot-matrix concept click for me. I understand how the visual should never exaggerate the data, and how choosing the right dot value keeps everything readable and honest—especially with a huge dataset. That part made sense.\n\nWhere I struggled most was the coding. Observable is powerful, but the smallest syntax issue can break everything, and that part was intimidating. Still, working through the errors helped me see how each step connects: the data rolls up into counts, the counts become dots, and the SVG turns it into a visual story.\n\nOverall, I learned how to apply the concept, make design choices that stay true to the data, and push myself through the technical challenges to get something I’m proud of.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"