2f:[{"id":"56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","href":"https://static.observableusercontent.com/files/56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","name":"hadcrut-annual.txt","type":"text/plain","lastModified":1668649624197.144,"size":17784},{"id":"831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","href":"https://static.observableusercontent.com/files/831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","name":"seattle-weather.csv","type":"text/csv","lastModified":1668997785034.835,"size":48219}] 2d:{"title":"Visual representations of time in interactive media (linear and non-linear)","cells":[{"id":0,"value":"# Visual representations of time in interactive media (linear and non-linear)\nWhat is time?\n\nIn a literal sense most of us experience the passage of time moving forward at exactly one second per second. We are all time travellers!\n\nHere's how we might visualise the number of seconds that have passed since opening this page.","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"{\n let count = 0;\n\n while (true) {\n yield count;\n count = addOne(count);\n await Promises.delay(1000);\n }\n\n function addOne(count) {\n return count + 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"But is there more to it than this?\n\nOur minds can move effortlessly through time, both forwards and backwards, imagining events that happened in a far distant past or what may come many years from now. In a stretch, we can also imagine all of time existing as one.\n\nTo represent a span of time we usually think about a simple time line. Something like this.","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"Plot.plot({\n x: {\n tickFormat: d3.utcFormat(\"%Y\"),\n domain: [d3.utcYear.offset(d3.utcYear(), -50), d3.utcYear()],\n line: true\n },\n width: width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"Here we can see the earlier years fall to the left and later years to the right.\n\nIf we place some data along this timeline we might be able to see some interesting patterns emerge. For example here's temperature anomaly data from 1850 to 2020, with blue being colder and red being hotter.","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"{\n const hadcrut = (await FileAttachment(\"hadcrut-annual.txt\").text())\n .trim()\n .split(/\\n/g) // split into lines\n .map((line) => line.split(/\\s+/g)) // split each line into fields\n .map(([year, anomaly]) => ({\n // extract the year and median anomaly\n year: +year, // convert to number\n anomaly: +anomaly // convert to number\n }));\n\n const plot = Plot.plot({\n x: {\n round: false,\n ticks: d3.ticks(...d3.extent(hadcrut, (d) => d.year), 20),\n domain: d3.range(\n d3.min(hadcrut, (d) => d.year),\n d3.max(hadcrut, (d) => d.year) + 1\n ),\n label: null,\n tickFormat: (d) => d\n },\n color: {\n type: \"diverging\",\n scheme: \"BuRd\"\n },\n marks: [Plot.cell(hadcrut, { x: \"year\", fill: \"anomaly\" })],\n width: width\n });\n\n yield plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"If we extend the y-axis we can visualise data in 2 dimensions.\n\nHere are the max temperatures for each day in Seattle, Washington all through 2012. Each square represents a single calendar day. Blue is colder, and red is hotter.","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"{\n const data = await FileAttachment(\"seattle-weather.csv\").csv({ typed: true });\n\n const plot = Plot.plot({\n height: 300,\n padding: 0,\n y: {\n tickFormat: Plot.formatMonth(\"en\", \"short\")\n },\n marks: [\n Plot.cell(\n data,\n Plot.group(\n { fill: \"max\" },\n {\n x: (d) => d.date.getUTCDate(),\n y: (d) => d.date.getUTCMonth(),\n fill: \"temp_max\",\n inset: 0.5\n }\n )\n )\n ]\n });\n\n yield plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"Let's try something a bit different next. If our project wants to express time in a more unique way, we can have a play with the timeline a bit and express it as a spiral. This could indicate a less linear view of time.\n\nHere I've [taken an example](https://observablehq.com/@analyzer2004/timespiral) that plots temperature data in a spiral shape.","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"viewof options3 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"chart3 = {\n const diameter = width * 0.7 || Math.min(screen.width, screen.height) * 0.8;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", diameter)\n .attr(\"viewBox\", [0, 0, diameter, diameter])\n .style(\"max-width\", \"100%\")\n .style(\"cursor\", \"default\");\n\n // TimeSpiral needs getBBox()\n document.body.append(svg.node());\n\n const data = weather[options3.city].map((d) => ({\n date: new Date(d[\"Date time\"]),\n temp: +d[\"Temperature\"]\n }));\n\n const chart = new TimeSpiral(svg)\n .size([diameter, diameter])\n .layers(3)\n .style({\n align: options3.align,\n reverseColor: true // reverse d3.interpolateRdYlBu\n })\n .palette(d3.interpolateRdYlBu)\n .field({ value: \"temp\" })\n .data(data)\n .render();\n\n svg.node().remove();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"## The passage of time\n\nThe previous few examples have been static representations of time. Now let's go back to our first example of the number of seconds ticking away. What if each dot was 100 years. What would 65,000 years look like? Maybe a bit like this.","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"{\n const limit = 650;\n const upperDelayLimit = 800;\n let count = [\". \"];\n\n while (true) {\n // Count to limit and then wait a while before resetting\n yield html`

${count.length <= limit ? count : count.slice(0, limit)}

`;\n count.push(\". \");\n if (count.length >= upperDelayLimit) count = [\". \"];\n await Promises.delay(100);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":331,"value":"... this is a work in progress. More examples will follow. Please feel free to comment or suggest other visualisations etc to me, either here or at [byrd.joshua@abc.net.au](mailto:byrd.joshua@abc.net.au)","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"## References\n\n- https://observablehq.com/@observablehq/plot-cell?collection=@observablehq/plot","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"## Notes & experiments\n\nBelow are just some notes and experiments, which may or may not make it into the notebook above.","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"## Imports etc.","pinned":false,"hidden":false,"mode":"md"},{"id":291,"value":"import { TimeSpiral } from \"@analyzer2004/timespiral\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"import { weather } from \"@analyzer2004/west-coast-weather-from-seattle-to-san-diego\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"import { form } from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}