3f:null 40:["$","title",null,{"children":"VisDa8 Interactive Observable Tutorial | Joshua Reibert | Observable"}] 46:Ta6f,tempChart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("path") .datum(data) .attr("fill", "steelblue") .attr("opacity", 0.2) .attr( "d", d3 .area() .x(d => x(d.date)) .y0(d => y(d.min_temperature_200cm)) .y1(d => y(d.max_temperature_200cm)) ); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .x(d => x(d.date)) .y(d => y(d.mean_temperature)) ); const grid = svg .append("g") .attr("stroke", "black") .attr("stroke-opacity", 0.1); grid .append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom); grid .append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", margin.left) .attr("x2", width - margin.right); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .call(g => g.select(".domain").remove()); svg .append("g") .attr("transform", `translate(${width - margin.right},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", -3) .attr("text-anchor", "end") .attr("font-weight", "bold") .text("temperature (°C)") ); const marker = svg.append("g").style("display", "none"); const markerLine = marker .append("line") .attr("stroke", "black") .attr("stroke-opacity", 0.8) .attr("y2", -(height - margin.top - margin.bottom)); const markerDateLabel = marker .append("text") .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", 12); const markerValue = marker .append("circle") .attr("r", 3) .attr("fill", "red"); svg.on("touchmove mousemove", function(event) { const item = bisect(d3.pointer(event, this)[0]); marker .style("display", null) .attr( "transform", `translate(${x(item.date)},${height - margin.bottom})` ); markerDateLabel.text(formatDate(item.date)); markerValue.attr("cy", y(item.mean_temperature)); }); svg.on("touchend mouseleave", () => { marker.style("display", "none"); }); return svg.node(); }47:[{"id":"0182835956c790adcbcc11fe617327e031a9df9489f02b29ab18dc453e96e55b54d5de9b7bd710b958b9f50b40061311c48cd258e1f476d45c2afc6de5c5cdcc","href":"https://static.observableusercontent.com/files/0182835956c790adcbcc11fe617327e031a9df9489f02b29ab18dc453e96e55b54d5de9b7bd710b958b9f50b40061311c48cd258e1f476d45c2afc6de5c5cdcc","name":"bremerhaven_daily.csv","type":"text/csv","lastModified":1605084488293.309,"size":22936}] 44:{"id":"746aa3d4e56d7e5a","slug":"visda8-interactive-observable-tutorial","title":"VisDa8 Interactive Observable Tutorial","thumbnail":"5267efa4eaabdd087bc10c3a40ae5e269b9a9fd9f0fcd220c721f30774e86421","access_level":"public","create_time":"$D2020-11-11T08:33:13.762Z","update_time":"$D2020-11-11T14:06:50.247Z","view_time":null,"first_public_time":"$D2020-11-11T08:36:18.409Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ea762ddd72c8c7b8","login":"joshua-r","name":"Joshua Reibert","avatar_url":"https://avatars-next.observableusercontent.com/7f6a140519922c83143bb824d9d6722ca822eabaf7410d899a3489ae9c4f29a9","tier":"starter_2024","bio":"","following":false},"version":191,"publish_version":191,"role":null,"authored":false,"authors":[{"type":"individual","id":"91c1642cd0965f85","login":"joshua-r","name":"Joshua Reibert","avatar_url":"https://avatars-next.observableusercontent.com/7f6a140519922c83143bb824d9d6722ca822eabaf7410d899a3489ae9c4f29a9","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"91c1642cd0965f85","login":"joshua-r","name":"Joshua Reibert","avatar_url":"https://avatars-next.observableusercontent.com/7f6a140519922c83143bb824d9d6722ca822eabaf7410d899a3489ae9c4f29a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"VisDa8 Interactive Observable Tutorial","cells":[{"id":0,"value":"md`# VisDa8 Interactive Observable Tutorial\nIn this short, interactive tutorial we're going to have a look at observable notebooks.\n\nFor more information see these introductory notebooks:\n- [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable)\n- [Learn D3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3)\n- [Observable’s not JavaScript](https://observablehq.com/@observablehq/observables-not-javascript?collection=@observablehq/introduction)\n- [Observable for Jupyter Users](https://observablehq.com/@observablehq/observable-for-jupyter-users)\n- [Charting with Vega-Lite](https://observablehq.com/@observablehq/vega-lite?collection=@observablehq/observable-for-vega-lite)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`## Code Cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"b = a + 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"message = \"Hello World!\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"html`

${message}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"a = 5 + 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`## Creating Charts with HTML Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"daysInAYear = 365.24","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"daysLeftThisYear = daysInAYear -\n (now - new Date(new Date(now).getFullYear(), 0, 0)) / (1000.0 * 60 * 60 * 24)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"{\n let margin = 30;\n let size = 300;\n const ctx = DOM.context2d(size, size);\n let startAngle = 1.5 * Math.PI;\n\n function drawSlice(angle, color) {\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.moveTo(size / 2, size / 2);\n ctx.arc(\n size / 2,\n size / 2,\n size / 2 - 2 * margin,\n startAngle,\n startAngle + angle\n );\n ctx.closePath();\n ctx.fill();\n }\n\n drawSlice(2 * Math.PI, \"blue\");\n drawSlice((daysLeftThisYear / daysInAYear) * 2 * Math.PI, \"red\");\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`## Working with Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"attributes = [\n \"mean_temperature\",\n \"min_temperature_200cm\",\n \"max_temperature_200cm\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"html`

\n\n \n ${attributes.map(attribute => html``)}\n\n${data\n .slice(-14)\n .map(\n item =>\n html`${attributes.map(\n attribute => html``\n )}`\n )}\n\n

date	${attribute}
${formatDate(item.date)}	${item[attribute]}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`Winter is coming ${sparkline(\n data.slice(-14).map(item => item.min_temperature_200cm)\n)}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`## Importing Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"meanTemps = data.map(item => item.mean_temperature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"import { chart as histogram } with { meanTemps as data } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"histogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`## Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof heatmap = vl\n .markRect({ tooltip: { content: \"data\" }, clip: true })\n .data(data)\n .encode(\n vl\n .y()\n .fieldO(\"date\")\n .timeUnit(\"month\"),\n vl\n .x()\n .fieldO(\"date\")\n .timeUnit(\"date\"),\n vl\n .color()\n .average(\"mean_temperature\")\n .scale({ scheme: \"redyellowblue\", reverse: true })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`## Creating Charts with D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"dateExtent = d3.extent(data, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"margin = ({ top: 10, right: 70, bottom: 50, left: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"x(new Date(\"2020-07-01\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"x = d3\n .scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"y = d3\n .scaleLinear()\n .domain([\n d3.min(data, d => d.min_temperature_200cm),\n d3.max(data, d => d.max_temperature_200cm)\n ])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"xAxis = d3.axisBottom(x).tickSizeOuter(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"yAxis = d3.axisRight(y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n return b && date - a.date > b.date - date ? b : a;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"data = d3.csvParse(\n await FileAttachment(\"bremerhaven_daily.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function sparkline(values, width = 64, height = 17) {\n const x = d3\n .scaleLinear()\n .domain([0, values.length - 1])\n .range([0.5, width - 0.5]);\n const y = d3\n .scaleLinear()\n .domain(d3.extent(values))\n .range([height - 0.5, 0.5]);\n const context = DOM.context2d(width, height);\n const line = d3\n .line()\n .x((d, i) => x(i))\n .y(y)\n .context(context);\n context.beginPath();\n line(values);\n context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"