2e:null 2f:["$","title",null,{"children":"Week 2 | Drawing with data | UdG | Master's in Data Science | Observable"}] 34:T494,--- ### Can I see each year's trend individually? [Faceting](https://observablehq.com/plot/features/facets) allows for easy comparison each year's trend, patterns across different decades, and facilitates a comprehensive look at the long-term temperature rise. The line marks show temperature trends, and the text labels on the last day of each segment punctuate the last value —just to pick one, although perhaps we could have (should have) gone with the mean for each year. We're beyond composing simple charts. A few new things: * **`facet: { ... }`**: Defines how the data is segmented into different facets (small multiples). * **`y: "decade"`**: Facets are created along the `y-axis` based on the decade attribute of the data — now you understand that tweak to last week's data transformations. * **`x: (d) => (d.year - 1980) % 10`**: Calculates the `x-axis` positioning within each facet using the remainder. * **`fy: {label: ""}`**: Configures the `y-axis` for the facets, without a label. We've also added a `markerEnd` to add a `circle` of each trend line, and added a `text` mark with the `lastDay` data, which we've also faceted (`fx`, `fy` in the mark).35:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1687007020468.341,"size":13506}] 32:{"id":"3ced6b5636747964","slug":"week-2-drawing-with-data","title":"Week 2 | Drawing with data","thumbnail":"cb82d89b91384c40efad32edda3b86ea18d5314d85bd1bdfef4a9c10826c854b","access_level":"public","create_time":"$D2023-06-17T13:03:40.468Z","update_time":"$D2024-12-10T10:28:57.672Z","view_time":null,"first_public_time":"$D2023-06-17T13:03:40.468Z","has_unpublished_edits":null,"fork":{"id":"9551de4ced039cab","slug":"plot-histogram","title":"Plot: Histogram","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f6d094e91910d678","login":"udg-master-data-science","name":"UdG | Master's in Data Science","avatar_url":"https://avatars-next.observableusercontent.com/43ba1b8a69dd1722287c44e61dfee202393e63b350f5814991b6b0af9418435e","tier":"starter_2024"},"version":437,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cab874ceedc4fa","login":"xaquingv","name":"","avatar_url":"https://avatars-next.observableusercontent.com/964250a396a5c55f0dcee877939a870e04f9741dead22595f1d385b85883f4d6","tier":null}],"members":[{"type":"team","id":"f6d094e91910d678","login":"udg-master-data-science","name":"UdG | Master's in Data Science","avatar_url":"https://avatars-next.observableusercontent.com/43ba1b8a69dd1722287c44e61dfee202393e63b350f5814991b6b0af9418435e","tier":"starter_2024","role":"editor"},{"type":"individual","id":"37cab874ceedc4fa","login":"xaquingv","name":"","avatar_url":"https://avatars-next.observableusercontent.com/964250a396a5c55f0dcee877939a870e04f9741dead22595f1d385b85883f4d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":34,"collection":{"id":"535f2a4725b10597","slug":"information-visualization","title":"Information Visualization","owner":{"id":"f6d094e91910d678","login":"udg-master-data-science","name":"UdG | Master's in Data Science"}},"type":"notebook","body":{"title":"Week 2 | Drawing with data","cells":[{"id":4,"value":"# Week 2 | Drawing with data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"## Questions\n* How do the seasonal and overall trends compare for all years?\n* How does that compare to the mean for the period?\n* Can I see each year's trend individually?\n* How can I see when the yearly temperatures deviates from the mean?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"---\n### How do the seasonal and overall trend compare for all years?\nA multiline plot would show temperature trends over time, allowing viewers to compare seasonal changes within each year and across different years. The emphasis is dual:\n* how `temperature` changes seasonally (as indicated by the `x-axis` ticks set to months),\n* and annually (split by the `z:\"year\"` property). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"lineSimple = Plot.plot({\n y: {label: \"Temperature in ºC\"},\n marks:[\n Plot.lineY(data, {\n x:\"date\",\n y:\"temperature\",\n z:\"year\",\n tip: \"xy\",\n stroke: \"#808080\",\n strokeOpacity:.5,\n }),\n Plot.axisX({ticks: \"3 months\", tickFormat:\" %b\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"But the previous plot doesn't accurately answer the stated question.\n\n> **How do the seasonal and _overall trends_ compare for all years?**\n\nWe're not _really_ visualizing the overall _trend_ —only the overall _distribution_ is apparent. \n\nOne option is to use a sequential color scale for the years: 1980 2023. (Like in this [Google News Lab](https://newsinitiative.withgoogle.com/resources/google-news-lab/) + [Truth and Beauty](https://truth-and-beauty.net/) collaboration [The Rhythm of Food](https://rhythm-of-food.net/), which uses color to encode time.)\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"lineSimpleAlbert = Plot.plot({\n y: {label: \"Temperature in ºC\"},\n color: {\n type: \"sequential\",\n scheme: \"RdPu\",\n },\n marks:[\n Plot.lineY(data, {\n x:\"date\",\n y:\"temperature\",\n tip: \"xy\",\n z:\"year\",\n stroke: \"year\",\n }),\n Plot.axisX({ticks: \"3 months\" ,tickFormat:\" %b\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"---\n### How does that compare to the mean for the period?\nThis is a slightly more comprehensive view: \n* The **area mark** shows the data range and distribution,\n* the **tick marks** show individual temperature readings,\n* and the blue **line mark** shows the average trend.\n\nThis combination allows for a more rounded analysis of sea surface temperature data, making it easier to understand trends and anomalies over time, as well as compare different years.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"lineComposition = Plot.plot({\n x:{interval: d3.utcDay},\n marks:[\n Plot.areaY(dataSummary, {\n x:\"date\",\n y1:\"minus\",\n y2:\"plus\",\n fill: \"#eaeaea\",\n tip: \"xy\"\n }),\n Plot.tickY(data,{\n x: \"date\",\n y: \"temperature\",\n z: \"year\",\n stroke:\"#bdbdbd\",\n tip: \"xy\"\n }),\n Plot.lineY(dataSummary, {\n x:\"date\",\n y:\"mean\",\n stroke: \"#003366\",\n strokeWidth: 1.8,\n tip: \"xy\"\n }),\n Plot.axisX({ticks: \"3 months\" ,tickFormat:\" %b\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"linesFacetted = Plot.plot({\n width: width,\n x:{interval: d3.utcDay, tickFormat: \"%b\"},\n fy:{label:\"\"},\n facet: {\n data: data,\n y: \"decade\",\n x: (d)=> (d.year - 1980) % 10,\n },\n marks:[\n Plot.frame({fill: \"#f3f3f3\"}),\n Plot.lineY(data,{\n x: \"date\",\n y:\"temperature\",\n tip:\"xy\",\n stroke: \"#505050\",\n strokeWidth: 1,\n markerEnd: \"circle\",\n }),\n Plot.text(lastDay, {\n x:\"date\",\n y: \"temperature\",\n fy: \"decade\",\n fx: (d)=> (d.year - 1980) % 10,\n text: \"temperature\",\n textAnchor: \"end\",\n dy: -10,\n dx: 6,\n stroke: \"#f3f3f3\",\n strokeWidth: 5,\n fill: \"#000\",\n })\n ]\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"lastDay = Object.values(data.reduce((acc, item) => (acc[item.year] = item, acc), {}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"---\n### How can I see when the yearly temperatures deviate from the mean?\nWe can visually encode the distribution of temperature data across years on a heatmap: `temperature` along the `x-axis`,`years` along the `y-axis`. Thick ticks colored by temperature values, combined with a rule mark and label for the mean temperature, highlight deviations from the mean.\n\nWe also moved the `x-axis` to the top —from the default bottom— and added a `grid` to help with the reading.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"heatmap = Plot.plot({\n grid: true,\n y: { type: \"band\" },\n color: {\n scheme: \"BuYlRd\",\n legend: true,\n pivot: d3.mean(data, (d) => d.temperature)\n },\n marks: [\n Plot.tickX(data, {\n y: \"year\",\n x: \"temperature\",\n tip: \"xy\",\n stroke: \"temperature\",\n strokeWidth: 3\n }),\n Plot.ruleX([d3.mean(data, (d) => d.temperature)], { stroke: \"#808080\" }),\n Plot.textX([d3.mean(data, (d) => d.temperature)], {\n y: 0,\n textAnchor: \"start\",\n text: (d) => `Avg. temp. 1981-2023: ${d3.format(\".1f\")(d)}ºC`,\n fontWeight: \"bold\",\n dx: 10\n }),\n Plot.axisX({ anchor: \"top\" })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"But, in the chart above, if two ticks —two days, two temperature records in the same year— have the same value, they fall on the same position.\n\nWe could try binning the data to capture the frequency and have a better view of the temperature distribution.\n\nBelow is how the ticks and the `2010`'s density plot would look like. The method to create the gradient is beyond the scope of what we're learning, but it may be useful to have. It comes from [this notebook](https://observablehq.com/@observablehq/plot-area-chart-with-gradient).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":342,"value":"heatmap2010 = Plot.plot({\n y: { type: \"band\", label:\"\" },\n x: {domain: d3.extent(data, d=> d.temperature)},\n color: {\n scheme: \"BuYlRd\",\n domain: d3.extent(data, d=> d.temperature),\n pivot: d3.mean(data, (d) => d.temperature)\n },\n marks: [\n Plot.tickX(data.filter(d=> d.year === '2010'), {\n y: \"year\",\n x: \"temperature\",\n stroke: \"temperature\",\n strokeWidth: 3\n }),\n Plot.ruleX([d3.mean(data, (d) => d.temperature)], { stroke: \"#808080\" }),\n Plot.textX([d3.mean(data, (d) => d.temperature)], {\n y: 0,\n textAnchor: \"start\",\n text: (d) => `Avg. temp. 1981-2023: ${d3.format(\".1f\")(d)}ºC`,\n fontWeight: \"bold\",\n dx: 10\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"violin = Plot.plot({\n height:90,\n x: {domain: d3.extent(data, d=> d.temperature)},\n marks: [\n () => htl.svg`\n \n \nfilter \n \n \n `,\n Plot.areaY(data.filter(d=> d.year === '2010'),\n Plot.binX(\n {\n y: \"count\",\n },\n {\n x: \"temperature\",\n fill: \"url(#gradient)\",\n curve: \"basis\",\n offset: \"center\"\n }\n )),\n Plot.ruleX([d3.mean(data, (d) => d.temperature)], { stroke: \"#808080\" }),\n Plot.textX([d3.mean(data, (d) => d.temperature)], {\n y: 110,\n textAnchor: \"start\",\n text: (d) => `Avg. temp. 1981-2023: ${d3.format(\".1f\")(d)}ºC`,\n fontWeight: \"bold\",\n dx: 5\n }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"---\n#### Transformations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"Similar transformation to what we did last week. This time we're adding `decade` and `year` properties so we can use them for grouping and faceting. The `date` property is a fake date, so we can plot all lines in the same year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"data = {\n const dataZ = [];\n raw\n .filter((d) => d.name.length === 4)\n .forEach((yearData) => {\n const decade = Math.floor(yearData.name / 10) * 10 + \"s\";\n yearData.data.forEach((temperature, index) => {\n if (temperature !== null) {\n const date = new Date(\n d3.max(raw.map((d) => parseInt(d.name))) + 1,\n 0,\n index\n );\n dataZ.push({\n index,\n year: yearData.name,\n date,\n decade,\n temperature\n });\n }\n });\n });\n return dataZ;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"Keep just the data summaries — mean, and plus and minus 2σ.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"dataSummary = {\n const dataZ = [];\n\n const meanData = raw.find((d) => d.name === \"1982-2011 mean\").data;\n const plusData = raw.find((d) => d.name === \"plus 2σ\").data;\n const minusData = raw.find((d) => d.name === \"minus 2σ\").data;\n\n meanData.forEach((mean, index) => {\n if (mean !== null) {\n const date = new Date(\n d3.max(raw.map((d) => parseInt(d.name))) + 1,\n 0,\n index\n );\n dataZ.push({\n date,\n mean,\n plus: plusData[index] !== null ? plusData[index] : undefined,\n minus: minusData[index] !== null ? minusData[index] : undefined\n });\n }\n });\n return dataZ;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"---\n\n#### Data and imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"import {raw} from \"@udg-master-data-science/week-1-observablehq-and-plot-essentials\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"raw","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"