2c:null 2d:["$","title",null,{"children":"2026 ECS272 Workshop - Visual Data Storytelling | yunhsinkuo | Observable"}] 32:Tb3e,--- # Story Organization Typically, there are three stages in the data storytelling process: Story Identification, Story Organization, and Story Presentation. The workshop today mainly focuses on Story Organization. For simplicity, the genre of your story will be a **slideshow**. The narrative structure naturally can be a **martini glass** or an **interactive presentation**. Your group will discuss and determine the following for your story:
1) What would be the communicative goal?
2) What is the through-line (core message/meta concept) of your story?
3) What is the sequence of the story pieces for your story?
4) What user interactions you may provide in each story piece if there are any?
## Starters We have provided some story pieces for you to start with.
**Depending on what story you would like to tell**, you may or may not use some of these story pieces. You also **may only use some** of the data attributes, instead of all of them. You may have to **edit or create** some story pieces, which you can utilize [Observable Plot](https://observablehq.com/@observablehq/plot-gallery), [AI assist](https://observablehq.com/@observablehq/introduction-to-ai-assist), or draw on paper.
Here are three directions that may inspire you to draft the story you want to tell: - You are about to buy your very first house for your family and are lucky enough to have job offers in both San Francisco and New York. As you explore options, you’re overwhelmed by the factors involved in house hunting. Then, you stumble across a data story that just might help you make sense of it all... - You are a journalist working on a data story that covers the housing development in major US cities. The goal of the story is to inform the public and raise awareness. Your intern had already done some preliminary analysis, but one day they rage quit and ghosted you. So, now you have to salvage their work and complete the story... - You are a machine learning instructor preparing to teach classification. You’re looking for a relatable dataset to introduce your students to the basics. You come across a housing data story that could serve as a practical example to break down some core ML concepts... (You are not limited to these directions, these are just for inspiration) **External information can be included if it helps illustrate your story better.** ### Expectations Ideally, we hope the group can use their observable notebook to share their story with the class.
For user interactions, you don't have to implement them, verbal descriptions are good enough.
It is also fine to just draw the story piece design on paper, but remember to upload the pictures to the observable notebook.
Our focus in this workshop is (3) the sequence of the story pieces, i.e., your story.
33:T7a8,ScatterplotMatrix = function( data, { dimensions = Array.from(d3.intersection(...data.map(Object.keys)).keys()), z = undefined, color = {}, } = {} ){ const flatten = data.map((d) => dimensions.map((dim) => ({dim, val: d[dim]}))).flat() const scales = d3.rollup(flatten, v => d3.scaleLinear().domain(d3.extent(v, d => d.val)).range([0.05, 0.95]), d => d.dim) const dots = d3.cross(scales.keys(), scales.keys()) .filter(([dimx, dimy]) => dimensions.indexOf(dimx) < dimensions.indexOf(dimy) ) // lower triangular matrix .map(([dimx, dimy]) => (data.map(d => { return { dimx, dimy, posX: scales.get(dimx)(d[dimx]), posY: scales.get(dimy)(d[dimy]), // mapping for facets for consistency color: d[z], type: 'dot', } }))).flat() const labels = Array.from(scales.keys(), (dim) => ({label: dim, type: "label", dimx: dim, dimy: dim})) return Plot.plot({ facet: { data: dots, x: 'dimx', y: 'dimy', }, fx: { domain: dimensions, label: null, axis: null, }, fy: { domain: dimensions, label: null, axis: null, }, x: { axis: null, nice: true, domain: [0, 1], // facet domain consistent across dimensions }, y: { axis: null, nice: true, domain: [0, 1], // facet domain }, color: {legend: true, type: 'categorical', domain: [...Object.keys(color).map(d => +d)], range: [...Object.values(color)], tickFormat: (d) => ((d == 0) ? "NY" : "SF"), }, marks: [ //Plot.frame({opacity: 0.1}), Plot.dot(dots, { x: "posX", y: "posY", fill: "color", r: 2, fillOpacity: 0.5, }), Plot.text(labels, { fx: "dimx", fy: "dimy", x: 0.5, y: 0.5, text: "label", textAnchor: "middle", }), ], margin: 10, aspectRatio: 1, }) }34:[{"id":"8fccb7494cc81d296df78d341252758902a815cdaa8d433f30070997a8a80f0d1f4070102bc94ae63f01f9647653b61e70937ce4930ddf08693da48471f28ef3","href":"https://static.observableusercontent.com/files/8fccb7494cc81d296df78d341252758902a815cdaa8d433f30070997a8a80f0d1f4070102bc94ae63f01f9647653b61e70937ce4930ddf08693da48471f28ef3","name":"performance.png","type":"image/png","lastModified":1770905289922.632,"size":109609},{"id":"5c14c6459e37668f88cea65cfdd0fc49be0f47a66021862388b67a72281a17e145b3e8cfcadb00a21ad8147c633293589851ad3c194be3f97ff36a130b2591e4","href":"https://static.observableusercontent.com/files/5c14c6459e37668f88cea65cfdd0fc49be0f47a66021862388b67a72281a17e145b3e8cfcadb00a21ad8147c633293589851ad3c194be3f97ff36a130b2591e4","name":"models.png","type":"image/png","lastModified":1770905289918.645,"size":84347},{"id":"d7088f43f9615e488b1ad6c2f95ce46cc7d4de55185f7d05689dbe86e14b127a1ee8dde110677b959fe824f4b2bfc1ba57adbb6d7585d369b30a8c7a63ae57c6","href":"https://static.observableusercontent.com/files/d7088f43f9615e488b1ad6c2f95ce46cc7d4de55185f7d05689dbe86e14b127a1ee8dde110677b959fe824f4b2bfc1ba57adbb6d7585d369b30a8c7a63ae57c6","name":"housing-1.csv","type":"text/csv","lastModified":1770905289854.844,"size":15240},{"id":"e72e19fd35292feb20efdae2ac271726d58bf2d868e889f811b69027d95f01e77900ee47000ff404edca8d987febe81916012a4a0d27f44fc9112c9976a9b9d1","href":"https://static.observableusercontent.com/files/e72e19fd35292feb20efdae2ac271726d58bf2d868e889f811b69027d95f01e77900ee47000ff404edca8d987febe81916012a4a0d27f44fc9112c9976a9b9d1","name":"decision_tree.png","type":"image/png","lastModified":1770905289981.21,"size":207170}] 30:{"id":"44a09ae3394d92bc","slug":"2026-ecs272-workshop-visual-data-storytelling","title":"2026 ECS272 Workshop - Visual Data Storytelling","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-02-12T14:06:38.172Z","update_time":"$D2026-02-12T14:15:48.290Z","view_time":null,"first_public_time":"$D2026-02-12T14:15:25.554Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8866ec4562bf16d9","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":"starter_2024"},"version":76,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd5bcf6548c41c14","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":null}],"members":[{"type":"individual","id":"bd5bcf6548c41c14","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":null,"role":"editor"},{"type":"team","id":"8866ec4562bf16d9","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2026 ECS272 Workshop - Visual Data Storytelling","cells":[{"id":0,"value":"# 2026 ECS272 Workshop - Visual Data Storytelling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"In this workshop, you will work with your classmates to create a data story using a given dataset.\n\nEach group will share their story with the class in the very end.\n\n**Submission**: Each group has one person who **forks** this notebook (set to public) and shows their work in that fork. Then you good.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"**Group members**: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"---\n\n## Data\n\nThis is a dataset about homes in San Francisco and New York.\n - in_sf - Boolean, representing whether the home is in SF or NY. 1 if it is in SF, otherwise in NY.\n - beds - Number of beds in the home.\n - bath - Number of bath in the home.\n - price - The price of the home.\n - year_built - The year which the home is built.\n - sqft - The size of the home.\n - price_per_sqft - Price / Sqft.\n - elevation - The elevation of the home.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"housing1 = await FileAttachment(\"housing-1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"housing1","database":"$undefined"},{"id":12,"value":"housing = FileAttachment(\"housing-1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"color = { // Color mapping for \"in_sf\"\n return {0: '#164883', 1: '#459c2d'}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"---\n\n# Story Pieces\n\n## Piece 1. Housing Overview\nThe following scatter plot matrix is generated by the function `ScatterplotMatrix` using Observable Plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"ScatterplotMatrix(housing, {dimensions: [ // You can update this list to modify the SPLOM\n \"beds\",\n \"bath\",\n \"price\",\n \"year_built\",\n \"sqft\",\n \"elevation\",\n \"price_per_sqft\"\n ],\n z: \"in_sf\", color: color})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## Piece 2. Correlation between Price per sqft and Price","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"Plot.plot({ \n color: {legend: true, type: 'categorical',\n domain: [...Object.keys(color).map(d => +d)], range: [...Object.values(color)],\n tickFormat: (d) => ((d == 0) ? \"NY\" : \"SF\"),\n },\n y: {label: \"Pirce per sqft\"},\n marks: [ // Change x and y to show different attributes\n Plot.dot(housing, {x: \"price\", y: \"price_per_sqft\", fill: \"in_sf\", fillOpacity: 0.5, r: 4, tip: true, channels: {bed: \"beds\", bath: \"bath\"}})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"## Piece 3. Side-by-Side Comparison in Elevation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"Plot.plot({\n y: {label: \"Elevation →\", labelAnchor: \"center\"},\n x: {label: null, tickFormat: (d) => ((d == 0) ? \"NY\" : \"SF\"),},\n color: {legend: true, type: 'categorical',\n domain: [...Object.keys(color).map(d => +d)], range: [...Object.values(color)],\n tickFormat: (d) => ((d == 0) ? \"NY\" : \"SF\"),\n },\n marks: [\n Plot.tickY(\n housing, // change y to show different attributes\n {x: \"in_sf\", y: \"elevation\", strokeOpacity: 0.1, stroke: \"in_sf\", strokeWidth: 4}\n ),\n Plot.crosshairY(housing, {y: \"elevation\", color: \"red\", opacity: 1}),\n ],\n marginLeft: 50,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"## Piece 3. Housing Size Distribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"Plot.plot({\n color: {legend: true, type: 'categorical',\n domain: [...Object.keys(color).map(d => +d)], range: [...Object.values(color)],\n tickFormat: (d) => ((d == 0) ? \"NY\" : \"SF\"),\n },\n marks: [\n Plot.dotX(housing, Plot.dodgeY({x: \"sqft\", fill: \"in_sf\", anchor: \"bottom\"})),\n Plot.crosshairX(housing, {x: \"sqft\", color: \"red\", opacity: 1}),\n ],\n height: 320,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"## Piece 4. Bed Layout Comparison","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"Plot.waffleY(housing, Plot.groupZ(\n {y: \"sum\"},\n {fill: \"in_sf\", y: d => d.in_sf === 0 ? 1 : -1, sort: \"in_sf\", fx: \"beds\", unit: 1,}\n)).plot({\n color:{legend: true, type: 'categorical',\n domain: [...Object.keys(color).map(d => +d)], range: [...Object.values(color)],\n tickFormat: (d) => ((d == 0) ? \"NY\" : \"SF\")}\n ,})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"## Piece 5. Trend of Price per sqft","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"Plot.plot({\n color: {legend: true, type: 'categorical',\n domain: [...Object.keys(color).map(d => +d)], range: [...Object.values(color)],\n tickFormat: (d) => ((d == 0) ? \"NY\" : \"SF\"),\n },\n y: {label: \"Price per sqft.\"},\n x: {tickFormat: d => d.toString(), label: \"Year built\"},\n marks: [\n Plot.lineY(housing, // k is window size\n Plot.windowY(Plot.sort(\"year_built\", {x: \"year_built\", y: \"price_per_sqft\", z: \"in_sf\", k: 25, reduce: \"mean\", stroke: \"in_sf\" })))\n ],\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"## Piece 6. Bed Layout Distribution in SF over time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"getTicks = (startYear, endYear, interval = 10) => {\n const years = [];\n \n for (let year = startYear; year <= endYear; year += interval) {\n years.push(year);\n }\n \n if (years[years.length - 1] !== endYear) {\n years.push(endYear);\n }\n \n return years;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"{\n let showNY = false;\n let colorScheme = (showNY) ? \"Blues\" : \"Greens\"\n let targetVal = (showNY) ? 0 : 1 // this is showing SF city, 0 for NY city\n return Plot.plot({\n width: 1000,\n color: {legend: true, scheme: colorScheme, \n zero: true, label: 'House counts'},\n x: {tickFormat: d => d.toString(), ticks: getTicks(1880, 2016), label: \"Year built\"},\n marks: [\n Plot.cell(housing.filter(d => d.in_sf === targetVal), \n Plot.group(\n {fill: \"sum\"},\n {x: \"year_built\", y: \"beds\", inset: 0.5, tip: true},\n )\n )\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## Piece 7. Decision Tree Classifier","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"decision_tree = FileAttachment(\"decision_tree.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"## Piece 8. Decision Tree Classifier Performance","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"tree_performance = FileAttachment(\"performance.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"## Piece 9. Different Models","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"models = FileAttachment(\"models.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"---\n\n\n## HERE TO ADD YOUR WORK","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"