2f:[] 2d:{"title":"Zoom to Regions / Dynamic Narrative","cells":[{"id":0,"value":"# Zoom to Regions / Dynamic Narrative\nUsing narrative text on the page for directed navigation and visual story-telling.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"

\n \n \n \n

Dynamic Narrative

Use narrative text right on the page as an interface to both explain and direct reading of the visual by moving around from region1 to region2 to region3 and back to all or whatever you might need to explain things. This can be a very effective way of using dynamics, including highlighting and turning things on and off as a part of the directed navigation for story-telling and exploratory data.

","pinned":true,"hidden":false,"mode":"html"},{"id":117,"value":"svgContainer = d3.select(container).select(\"svg\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"circles = svgContainer.selectAll(\"circle\")\n .data(d3.range(10))\n .join(\"circle\")\n .attr(\"cx\", () => 50 + Math.random() * 400)\n .attr(\"cy\", () => 50 + Math.random() * 200)\n .attr(\"r\", 20)\n .style(\"fill\", d => d3.schemeCategory10[d])","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"{\n // attach dynamic instructions to the text markers\n // \n d3.select(\"#region1\").on(\"click\", () => zoomToRegion([[10,5],[100,100]]));\n d3.select(\"#region2\").on(\"click\", () => zoomToRegion([[200,50],[350,150]]));\n d3.select(\"#region3\").on(\"click\", () => zoomToRegion([[50,150],[150,300]]));\n d3.select(\"#fullview\").on(\"click\", () => zoomToRegion([[0,0],[svgContainer.attr(\"width\"),svgContainer.attr(\"height\")]]));\n\n d3.select(\"#highlight\").on(\"click\", highlight);\n d3.select(\"#turnOff\").on(\"click\", dimAll);\n d3.select(\"#turnOn\").on(\"click\", showAll);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"zoomToRegion = (coords) => {\n //[[x0, y0], [x1, y1]] // [[left,bottom],[right,top]]\n let minX = d3.min([coords[0][0],coords[1][0]]);\n let minY = d3.min([coords[0][1],coords[1][1]]);\n let maxX = d3.max([coords[0][0],coords[1][0]]);\n let maxY = d3.max([coords[0][1],coords[1][1]]);\n let viewBox = minX + \" \" + minY + \" \" + maxX + \" \" + maxY;\n \n svgContainer.transition().duration(1000).attr(\"viewBox\", viewBox);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"dimAll = () => {\n circles.style(\"opacity\",0.1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"showAll = () => {\n circles.style(\"opacity\", \"\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"highlight = () => {\n dimAll();\n circles.filter(d => d > Math.random()*10).style(\"opacity\",\"\");\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}