2b:null 2c:["$","title",null,{"children":"SVG Map | Yin Shanyang | Observable"}] 31:T416,map = { let selected = null const width = 960 const height = 960 const map = d3.select(DOM.svg(width, height)) map.attr('width', '100%') const viewport = map.append('g') const layer = viewport.append('g') const x = width / 2 - meta.width / 2 const y = height / 2 - meta.height / 2 layer.attr('transform', `translate(${x}, ${y})`) layer.html(base) const baseLayer = layer.select('svg') const nodes = baseLayer.selectAll('svg > g') map.on('click', () => update(null)) nodes.on('click', (_, index) => update(index), false) const zoom = d3.zoom() .scaleExtent([0.5, 40]) .translateExtent([[-100, -100], [width + 100, height + 100]]) .clickDistance(10) .on('zoom', () => viewport.attr('transform', d3.event.transform)) map.call(zoom) function update (selection) { d3.event.stopPropagation() selected = selected === selection ? null : selection nodes.attr('opacity', (_, index) => selected !== null ? selected === index ? 1 : 0.25 : 1) } return map.node() }32:T632b,base = ` `33:[] 2f:{"id":"a583d6dc65b94ad9","slug":"svg-map","title":"SVG Map","thumbnail":"8a75820c073565d970c85ca77c83c3f173a9abbc10eaa98eda828b0e1773a951","access_level":"public","create_time":"$D2018-08-15T09:40:51.542Z","update_time":"$D2018-08-15T15:43:02.185Z","view_time":null,"first_public_time":"$D2018-08-15T15:38:34.613Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"b42ac8f55e8d78d5","login":"yinshanyang","name":"Yin Shanyang","avatar_url":"https://avatars-next.observableusercontent.com/8f9792778aa7da8974c2b5d32ed6619496c1a4877e1474e9c1b1e6f9649e10a7","tier":"starter_2024"},"version":136,"publish_version":136,"role":null,"authored":false,"authors":[{"type":"individual","id":"3492c6abc44dfe72","login":"yinshanyang","name":"Yin Shanyang","avatar_url":"https://avatars-next.observableusercontent.com/8f9792778aa7da8974c2b5d32ed6619496c1a4877e1474e9c1b1e6f9649e10a7","tier":null}],"members":[{"type":"individual","id":"3492c6abc44dfe72","login":"yinshanyang","name":"Yin Shanyang","avatar_url":"https://avatars-next.observableusercontent.com/8f9792778aa7da8974c2b5d32ed6619496c1a4877e1474e9c1b1e6f9649e10a7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"SVG Map","cells":[{"id":0,"value":"md`\n# SVG Map\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`\n### imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"md`\n### data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"data = Array(meta.nodes).fill(0).map((_, index) => ({ id: index, title: `unit ${index}` }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"meta = {\n const container = d3.select(DOM.element('div'))\n container.html(base)\n const svg = container.select('svg')\n const width = +svg.attr('width').replace('px', '')\n const height = +svg.attr('height').replace('px', '')\n const nodes = svg.selectAll('svg > g').nodes().length\n \n return { width, height, nodes }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"