2b:null 2c:["$","title",null,{"children":"Tokyo Map | Alastair Tse | Observable"}] 31:T50b,map = { const outline = geoOutline; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const background = svg .append("g") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", bgColor); // Draw the map const mapGroup = svg.append("g"); const translateX = translateRatioX * width; const translateY = translateRatioY * height; mapGroup.attr( "transform", `scale(${scale}, ${scale}) translate(${translateX}, ${translateY})` ); function drawOutline(offsetX, offsetY, color, fill, i) { mapGroup .append("g") .append("path") .attr("fill", fill ? d3.color(fill) : "none") .attr("stroke", bgColor) .attr("stroke-width", 4) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("d", path(outline)) .attr("transform", `translate(${offsetX} ${offsetY})`); } drawOutline(0, 0, "#262626", "#eeeeee"); // Zooming. // svg.call(zoomer); // zoomer.on("zoom", zoomed); // function zoomed(event) { // const { transform } = event; // const children = mapGroup.selectChildren(); // children.attr("transform", transform).attr("stroke-width", 1 / transform.k); // } return svg; }32:[{"id":"e72b902a1b3e8e0e24bf0195da5e395a3781d8e1604d0a2c46e12ce377cc3c9aee40109c3fc1e98ff6c73eb3e3cafff7aed9617fad39f5a0299fb3fd36116f25","href":"https://static.observableusercontent.com/files/e72b902a1b3e8e0e24bf0195da5e395a3781d8e1604d0a2c46e12ce377cc3c9aee40109c3fc1e98ff6c73eb3e3cafff7aed9617fad39f5a0299fb3fd36116f25","name":"tokyo-mainland@2.geojson","type":"application/geo+json","lastModified":1655099126716.549,"size":1709496}] 2f:{"id":"969b1a7d7693a71f","slug":"tokyo-map","title":"Tokyo Map","thumbnail":"a26c1894615ecfe86bcb467c8aff32cd084af61c9705273ebba6ecfba727bbab","access_level":"public","create_time":"$D2022-06-13T05:45:26.716Z","update_time":"$D2022-06-13T12:34:17.445Z","view_time":null,"first_public_time":"$D2022-06-13T12:34:38.183Z","fork":{"id":"6faf5ff1834304d1","slug":"rotating-japan","title":"Rotating Japan","owner":{"id":"c71b06cccf28890c","login":"liquidx","name":"Alastair Tse"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c71b06cccf28890c","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":"starter_2024"},"version":535,"publish_version":535,"role":null,"authored":false,"authors":[{"type":"individual","id":"58e7d28c7a5e95b2","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":null}],"members":[{"type":"individual","id":"58e7d28c7a5e95b2","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tokyo Map","cells":[{"id":0,"value":"md`# Tokyo Map\nPlayground for applying transforms to Tokyo using d3.geo projections and SVG.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"bgColor = d3.color('#262626');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"

${map}

the Hive Jinnan

35°39'51.5''N 139°41'58.5”E

Wed, June 29

18:30

@geo_tokyo

GEO

KYO

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":280,"value":"map.node()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"zoomer = d3.zoom().extent([\n [0, 0],\n [width, height]\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"layout = {\n margin: 20\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"viewof canvasHeight = Range([0, 1000], {value: 700, label: \"canvasHeight\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"viewof canvasWidth = Range([0, 2000], {value: 1200, label: \"canvasWidth\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"viewof height = Range([0, 1000], {value: 500, label: \"Height\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"viewof width = Range([0, 2000], {value: 600, label: \"Width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"viewof angle = Range([-90, 90], {value: 0, label: \"Angle\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"viewof scale = Range([0.5, 3.0], {\n value: 1,\n step: 0.01,\n label: \"Scale\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"viewof translateRatioX = Range([-1, 1], {\n value: 0,\n label: \"translateRatioX\",\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"viewof translateRatioY = Range([-1, 1], {\n value: 0.1,\n label: \"translateRatioY\",\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"viewof colorScheme = Inputs.select(\n [\n \"BrBG\",\n \"PRGn\",\n \"PiYG\",\n \"PuOr\",\n \"RdBu\",\n \"RdGy\",\n \"RdYlBu\",\n \"RdYlGn\",\n \"Spectral\",\n \"BuGn\",\n \"BuPu\",\n \"GnBu\",\n \"OrRd\",\n \"PuBuGn\",\n \"PuBu\",\n \"PuRd\",\n \"RdPu\",\n \"YlGnBu\",\n \"YlGn\",\n \"YlOrBr\",\n \"YlOrRd\",\n \"Cividis\",\n \"Viridis\",\n \"Inferno\",\n \"Magma\",\n \"Plasma\",\n \"Warm\",\n \"Cool\",\n \"CubehelixDefault\"\n ],\n { label: \"Color scheme\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"projectionAngle = projection.angle()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"projectionScale = projection.scale()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"projection = d3.geoMercator().angle(angle).fitSize([width, height], geoOutline)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":410,"value":"tokyoOutline = FileAttachment(\"tokyo-mainland@2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"geoOutline = tokyoOutline","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"svgRotationTransform = (width, height, transform) => {\n const centerX = width / 2;\n const centerY = height / 2;\n return `\n scale(${transform.scaleX} ${transform.scaleY}) \n translate(${transform.translateX}, ${transform.translateY})\n rotate(${transform.rotationAngle} ${centerX} ${centerY})`;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"import { Input, Range, Button, bind, html } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require(\"d3-geo@1\", \"d3-selection\", \"d3-zoom\", \"d3-transition\", \"d3-color\", \"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"