2b:null 2c:["$","title",null,{"children":"World Heritage in World Map | Daniel's Workspace | Observable"}] 31:T10d9,chart = { const container = d3.select(html`

${tooltipTemplate}

`) const tooltipDiv = container.select(".tooltip") const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;") .on("click", reset) const g = svg.append("g") let lastK = 1 const zm = d3.zoom() .on("zoom", function(e) { // change size of displayed circles g.selectAll("circle[display=true]") .attr("r", 1.0 * rad / e.transform.k) .attr("stroke-width", 0.5 / e.transform.k) d3.select("g").attr("transform", e.transform) lastK = e.transform.k // console.log(e) }) .scaleExtent([1, 10]) .translateExtent([[0, 0], [width, height]]) svg.call(zm) const countries = g.append("g") .selectAll("path") .data(land.features) .join("path") .attr("fill", "LightGray") .attr("cursor", "pointer") .attr("d", path) .on("click", clicked) g.append("path") .datum(land) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path) let lastYear = -Infinity const groups = g.selectAll("g") .data(sites) .join("g") .each(function (d) { let elem = d3.select(this) if (d.category === "Cultural") { elem.append("path") .attr("d", 'M 100 100 L 300 100 L 200 300 z') .attr('transform','scale(0.04) translate(-150,-130)') } if (d.category === "Natural") { elem.append("rect") .attr("fill", d => (d.danger === 1 ? "red" : "yellow")) .attr("stroke", "black") .attr("stroke-width", 0.7) .attr("cx", d => projection([d.longitude, d.latitude])[0]) .attr("cy", d => projection([d.longitude, d.latitude])[1]) .attr("display", false) .call(tooltip, tooltipDiv) } if (d.category === "Mixed") { elem.append("circle") .attr("fill", d => (d.danger === 1 ? "red" : "yellow")) .attr("stroke", "black") .attr("stroke-width", 0.7) .attr("cx", d => projection([d.longitude, d.latitude])[0]) .attr("cy", d => projection([d.longitude, d.latitude])[1]) .attr("display", false) .call(tooltip, tooltipDiv) } }) const crcl = g.selectAll("circle") .data(sites) .join("circle") .attr("fill", d => (d.danger === 1 ? "red" : (d.category === "Natural" ? "Aquamarine" : (d.category === "Cultural" ? "yellow" : "pink")))) .attr("stroke", "black") .attr("stroke-width", 0.7) .attr("cx", d => projection([d.longitude, d.latitude])[0]) .attr("cy", d => projection([d.longitude, d.latitude])[1]) .attr("display", false) .call(tooltip, tooltipDiv) function clicked(e, d) { const [[x0, y0], [x1, y1]] = path.bounds(d) e.stopPropagation(); countries.transition().style("fill", null) d3.select(this).transition().style("fill", "#777") svg.transition().duration(750).call( zm.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(e, svg.node()) ) } function reset() { countries.transition().style("fill", "LightGray") svg.transition().duration(750).call( zm.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ) } return Object.assign(container.node(), { update(date) { // // danger // crcl.filter(d => d.danger === 1) // .attr("fill", "red") // crcl.filter(d => d.danger === 0) // .attr("fill", "yellow") // enter crcl.filter(d => parseYear(d.year) > lastYear && parseYear(d.year) <= date) .transition() .attr("r", 1.0 * rad / lastK) .attr("stroke-width", 0.5 / lastK) .attr("display", true) // exit crcl.filter(d => parseYear(d.year) <= lastYear && parseYear(d.year) > date) .transition() .attr("r", 0) .attr("display", false) lastYear = date } }) }32:T511,tooltip = (selectionGroup, tooltipDiv) => { selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave) }) function handleMouseover() { showTooltip() // console.log("over, ok") setContents(d3.select(this).datum(), tooltipDiv) setStyle(d3.select(this)) } function handleMousemove(event) { const [mouseX, mouseY] = d3.pointer(event, this); setPosition(mouseX + margin.left, mouseY + margin.top) } function handleMouseleave() { hideTooltip() resetStyle(d3.select(this), d3.select(this).datum()) // console.log("leave, ok") } function showTooltip() { tooltipDiv.style("display", "block") } function hideTooltip() { tooltipDiv.style("display", "none") } function setPosition(mouseX, mouseY) { tooltipDiv .style("top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial") .style("right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial") .style("bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial") .style("left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial") } }33:[{"id":"7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","href":"https://static.observableusercontent.com/files/7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","name":"countries-110m.json","type":"application/json","lastModified":1701646978887.194,"size":107761},{"id":"a867a71f7f656afc23e3f646de4e938b803a7a4ab040e61b94e78c5bae695818342f23d4d1cf11c6b5832e3a7575101a6e532540a1f50edbf4e590c9e5b40c14","href":"https://static.observableusercontent.com/files/a867a71f7f656afc23e3f646de4e938b803a7a4ab040e61b94e78c5bae695818342f23d4d1cf11c6b5832e3a7575101a6e532540a1f50edbf4e590c9e5b40c14","name":"sites.json","type":"application/json","lastModified":1701648177398.828,"size":1035038}] 2f:{"id":"f730da31d0cc2767","slug":null,"title":"World Heritage in World Map","thumbnail":"135d3f949da41e2b9187e1c01c6da1f48ff945a7c960e78d99b9129ceab80288","access_level":"public","create_time":"$D2023-12-03T23:41:17.654Z","update_time":"$D2023-12-14T00:00:42.571Z","view_time":null,"first_public_time":"$D2023-12-03T23:41:17.654Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"908ea94d778cbb47","login":"daniel130-ws","name":"Daniel's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/4f499df0a7d2f03331dc58b7fc91f46c70bd1b134e269471d854f7b0d8d0ec81","tier":"starter_2024","bio":""},"version":780,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cceea7565ba9e557","login":"c0ldsmi1e","name":"Daniel","avatar_url":"https://avatars-next.observableusercontent.com/4f50c8c60322827858a2ac07226a067c7838f2ff86a3d2c9757850e686ad0aaf","tier":null,"bio":""}],"members":[{"type":"individual","id":"cceea7565ba9e557","login":"c0ldsmi1e","name":"Daniel","avatar_url":"https://avatars-next.observableusercontent.com/4f50c8c60322827858a2ac07226a067c7838f2ff86a3d2c9757850e686ad0aaf","tier":null,"role":"editor"},{"type":"team","id":"908ea94d778cbb47","login":"daniel130-ws","name":"Daniel's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/4f499df0a7d2f03331dc58b7fc91f46c70bd1b134e269471d854f7b0d8d0ec81","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"World Heritage in World Map","cells":[{"id":0,"value":"# World Heritage in World Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"## To-Do\n[x] zoom in & out\n\n[x] dynamic zooming\n\n[x] tooltip\n\n[x] click countries & reset\n\n[x] colors\n\n[x] update info","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"viewof date = Scrubber(d3.utcYear.every(1).range(...d3.extent(sites, d => parseYear(d.year))), {format: d3.utcFormat(\"%Y\"), loop: false, delay: 500})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"legend = {\n const ss = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 400, 55])\n const gg = ss.append(\"g\")\n gg.append(\"circle\").attr(\"cx\",10).attr(\"cy\",20).attr(\"r\", 3).style(\"fill\", \"yellow\")\n gg.append(\"circle\").attr(\"cx\",10).attr(\"cy\",30).attr(\"r\", 3).style(\"fill\", \"Aquamarine\")\n gg.append(\"circle\").attr(\"cx\",10).attr(\"cy\",40).attr(\"r\", 3).style(\"fill\", \"pink\")\n gg.append(\"circle\").attr(\"cx\",10).attr(\"cy\",50).attr(\"r\", 3).style(\"fill\", \"red\")\n gg.append(\"text\").attr(\"x\", 15).attr(\"y\", 20).text(\"Natural\").style(\"font-size\", \"7px\").attr(\"alignment-baseline\",\"middle\")\n gg.append(\"text\").attr(\"x\", 15).attr(\"y\", 30).text(\"Cultural\").style(\"font-size\", \"7px\").attr(\"alignment-baseline\",\"middle\")\n gg.append(\"text\").attr(\"x\", 15).attr(\"y\", 40).text(\"Natural & Cultural\").style(\"font-size\", \"7px\").attr(\"alignment-baseline\",\"middle\")\n gg.append(\"text\").attr(\"x\", 15).attr(\"y\", 50).text(\"Danger\").style(\"font-size\", \"7px\").attr(\"alignment-baseline\",\"middle\")\n return ss.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"## Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"tooltipId = DOM.uid().id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"tooltipTemplate = html`

\n ${tooltipStyles}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"function setContents(datum, tooltipDiv) {\n try {\n // console.log(datum)\n tooltipDiv.selectAll(\"div\")\n .data(Object.entries({\n \"Name\": datum.name,\n \"Category\": datum.category === 'Mixed' ? \"Natural & Cultural\" : datum.category,\n \"Year\": datum.year,\n \"State\": datum.state,\n \"Danger\": (datum.danger === 1) ? \"Yes\" : \"No\",\n \"Description\": datum.description,\n }))\n .join(\"div\")\n .filter(([key, value]) => value !== null && value !== undefined)\n .html(([key, value]) => `${key}: ${ typeof value === \"object\" ? value.toLocaleString(\"en-US\") : value }`)\n } catch (e) {\n console.log(e)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"function resetStyle(selection, d) {\n selection.attr(\"fill\", d.danger === 1 ? \"red\" : (d.category === \"Natural\" ? \"Aquamarine\" : (d.category === \"Cultural\" ? \"yellow\" : \"pink\")))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"black\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"tooltipStyles = htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"MOUSE_POS_OFFSET = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"## Map & Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"rad = 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"update = chart.update(date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"sites = rawdata.features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"rawdata = await d3.json(\"https://raw.githubusercontent.com/Daniel777y/vis-final-project/main/sites.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"parseYear = d3.utcParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"projection = d3.geoEquirectangular()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"world = FileAttachment(\"countries-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"land = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"