2c:["$","title",null,{"children":"Let's play with viewof | Nicolas Lambert | Observable"}] 31:T424,viewof map = { const width = 1000; const height = 500; const projection = d3.geoEquirectangular(); const path = d3.geoPath(projection); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 1000, 500]) .style("background-color", "white"); svg .append("g") .append("path") .datum(countries) .attr("fill", "#508bab") .attr("fill-opacity", 0.9) .attr("stroke", "white") .attr("stroke-width", 0.2) .attr("d", path); let coords = []; svg.on("mousemove", function (ev) { const { offsetX, offsetY } = ev; coords = projection.invert([offsetX, offsetY]); coords = [ coords[0] < -180 || coords[1] > 180 ? Math.sign(coords[0]) * 180 : coords[0], coords[1] < -90 || coords[1] > 90 ? Math.sign(coords[1]) * 90 : coords[1] ]; svg.dispatch("input"); }); Object.defineProperty(svg.node(), "value", { get: () => coords }); // Object.assign(svg.node(), { test: "coucou" }); return svg.node(); }32:T598,viewof map3 = { const width = 1000; const height = 500; const projection = d3.geoEquirectangular(); const path = d3.geoPath(projection); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 1000, 500]) .style("background-color", "white"); let data = {}; svg .append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", "#508bab") .attr("fill-opacity", 0.9) .attr("stroke", "white") .attr("stroke-width", 0.2) .attr("d", path) .on("touchmove mousemove", function (event, d) { d3.select(this).attr("fill", "red"); data = d.properties; svg.dispatch("input"); }) .on("touchend mouseleave", function () { d3.select(this).attr("fill", "#508bab"); data = {}; svg.dispatch("input"); }); let coords; svg.on("mousemove", function (ev) { const { offsetX, offsetY } = ev; coords = projection.invert([offsetX, offsetY]); coords = [ coords[0] < -180 || coords[1] > 180 ? Math.sign(coords[0]) * 180 : coords[0], coords[1] < -90 || coords[1] > 90 ? Math.sign(coords[1]) * 90 : coords[1] ]; svg.dispatch("input"); }); Object.defineProperty(svg.node(), "value", { get: () => ({ coords, data }) }); // Object.assign(svg.node(), { test: "coucou" }); return svg.node(); }33:T594,viewof map4 = { const width = 1000; const height = 500; const projection = d3.geoEquirectangular(); const path = d3.geoPath(projection); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 1000, 500]) .style("background-color", "white"); let data = {}; svg .append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", "#508bab") .attr("fill-opacity", 0.9) .attr("stroke", "white") .attr("stroke-width", 0.2) .attr("d", path) .on("touchmove mousemove", function (event, d) { d3.select(this).attr("fill", "red"); data = d.properties; svg.dispatch("input"); }) .on("touchend mouseleave", function () { d3.select(this).attr("fill", "#508bab"); data = {}; svg.dispatch("input"); }); let coords; svg.on("click", function (ev) { const { offsetX, offsetY } = ev; coords = projection.invert([offsetX, offsetY]); coords = [ coords[0] < -180 || coords[1] > 180 ? Math.sign(coords[0]) * 180 : coords[0], coords[1] < -90 || coords[1] > 90 ? Math.sign(coords[1]) * 90 : coords[1] ]; svg.dispatch("input"); }); Object.defineProperty(svg.node(), "value", { get: () => ({ coords, data }) }); // Object.assign(svg.node(), { test: "coucou" }); return svg.node(); }34:T6d1,viewof map5 = { const width = 1000; const height = 500; const projection = d3.geoEquirectangular(); const path = d3.geoPath(projection); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 1000, 500]) .style("background-color", "white"); let data = {}; svg .append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", "#508bab") .attr("fill-opacity", 0.9) .attr("stroke", "white") .attr("stroke-width", 0.2) .attr("d", path) .on("touchmove mousemove", function (event, d) { d3.select(this).attr("fill", "red").raise(); data = d.properties; svg.dispatch("input"); }) .on("touchend mouseleave", function () { d3.select(this).attr("fill", "#508bab"); data = {}; svg.dispatch("input"); }); svg .append("g") .selectAll("circle") .data(airports.features) .join("circle") .attr("cx", (d) => projection(d.geometry.coordinates)[0]) .attr("cy", (d) => projection(d.geometry.coordinates)[1]) .attr("r", 5) .attr("fill", "black") .attr("stroke", "white") .attr("fill-opacity", 0.9) .attr("stroke", "white") .attr("stroke-width", 0.2) .attr("d", path) .on("touchmove mousemove", function (event, d) { d3.select(this).attr("fill", "red"); data = d.properties; svg.dispatch("input"); }) .on("touchend mouseleave", function () { d3.select(this).attr("fill", "black"); data = {}; svg.dispatch("input"); }); Object.defineProperty(svg.node(), "value", { get: () => data }); // Object.assign(svg.node(), { test: "coucou" }); return svg.node(); }35:T400,viewof map6 = { const width = 500; const height = 250; const projection = d3.geoEquirectangular(); const path = d3.geoPath(projection); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 1000, 500]) .style("background-color", "white"); let data = ""; svg .append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", "#508bab") .attr("fill-opacity", 0.9) .attr("stroke", "white") .attr("stroke-width", 0.2) .attr("d", path) .on("touchmove mousemove", function (event, d) { d3.select(this).attr("fill", "red"); data = d.properties; svg.dispatch("input"); }) .on("touchend mouseleave", function () { d3.select(this).attr("fill", "#508bab"); data = {}; svg.dispatch("input"); }); Object.defineProperty(svg.node(), "value", { get: () => data }); // Object.assign(svg.node(), { test: "coucou" }); return svg.node(); }36:[{"id":"c21218593aa347ccbef39cca93b509a1e230661b364a8d6750fdf21f8dda66598e80da9f9de2d7a64cabf5f21c503fb2400e6bacb6f723f50b85b9f396bee314","href":"https://static.observableusercontent.com/files/c21218593aa347ccbef39cca93b509a1e230661b364a8d6750fdf21f8dda66598e80da9f9de2d7a64cabf5f21c503fb2400e6bacb6f723f50b85b9f396bee314","name":"airports.geojson","type":"application/geo+json","lastModified":1669283076563.437,"size":1276941},{"id":"8bb3fc8515661e8f04f546121d2d9730797ff96099ce8d1f7ee6bc342fee3f053d080dee79704f97094e8c46f060608146d2f74e9960034eadd15ef23dc6b428","href":"https://static.observableusercontent.com/files/8bb3fc8515661e8f04f546121d2d9730797ff96099ce8d1f7ee6bc342fee3f053d080dee79704f97094e8c46f060608146d2f74e9960034eadd15ef23dc6b428","name":"countries.json","type":"application/json","lastModified":1669215048764.582,"size":372764},{"id":"7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","href":"https://static.observableusercontent.com/files/7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","name":"stats.csv","type":"text/csv","lastModified":1669284060386.421,"size":11012}] 2f:{"id":"dce26bf221b86f4f","slug":"lets-play-with-viewof","title":"Let's play with viewof","thumbnail":"c9a4010bebfddba0379475b9f65a88aa1e5da3e30ebc4ea7bd8a2788bca71aeb","access_level":"public","create_time":"$D2022-11-23T14:50:08.666Z","update_time":"$D2024-02-26T14:08:54.902Z","view_time":null,"first_public_time":"$D2022-11-23T14:55:45.558Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":475,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"b2de4cca76eb89cf","slug":"bertin","title":"Bertin.js","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Let's play with viewof","cells":[{"id":0,"value":"# Let's play with viewof","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":130,"value":"In Observable, a **view** is a user interface element that directly controls a value in the notebook. In other words, a view consists of two parts: a view (a map, a chart, anything) and a value. Actually, views allow you to turn any chart or map into inputs. It's really magical 🪄. Thanks to [@mootari](https://observablehq.com/@mootari) for making me understand how it works. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"### Test 1: get coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":452,"value":"Hover the map with your mouse.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"map","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"### Test 2: get properties","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":97,"value":"viewof map2 = {\n const width = 1000;\n const height = 500;\n const projection = d3.geoEquirectangular();\n const path = d3.geoPath(projection);\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, 1000, 500])\n .style(\"background-color\", \"white\");\n\n let data;\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(countries.features)\n .join(\"path\")\n .attr(\"fill\", \"#508bab\")\n .attr(\"fill-opacity\", 0.9)\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.2)\n .attr(\"d\", path)\n .on(\"touchmove mousemove\", function (event, d) {\n d3.select(this).attr(\"fill\", \"red\");\n data = d.properties;\n svg.dispatch(\"input\");\n })\n .on(\"touchend mouseleave\", function () {\n d3.select(this).attr(\"fill\", \"#508bab\");\n data = {};\n svg.dispatch(\"input\");\n });\n\n Object.defineProperty(svg.node(), \"value\", {\n get: () => data\n });\n\n //Object.assign(svg.node(), { test: \"coucou\" });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"map2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"### Test3 : coords & properties","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":139,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"map3.coords","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"map3.data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"### Test4 : combine click & mousemouve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"map4.coords || \"clic on the map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"map4.data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"### Test5 : Combine several layers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":174,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"map5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"### What's the use?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":201,"value":"For example, combining a map and a chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":325,"value":"

Move the mouse over the map (India, China...) and look at the chart

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":295,"value":"miniPlots = html`\n

${viewof map6}

${chart}

\n\n

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"chart = Plot.plot({\n title: \"d\",\n width: 500,\n height: 265,\n marginLeft: 80,\n x: { axis: null },\n y: {\n grid: true\n //axis: null\n },\n marks: [\n Plot.barY(data, {\n x: \"name\",\n y: \"pop\",\n fill: (d) => (d.id == map6.ISO3_CODE ? \"red\" : \"#508bab\"),\n sort: { x: \"y\", reverse: true, limit: 50 }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"### It works also with `bertin` 👍","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":371,"value":"[`bertin`](https://github.com/neocarto/bertin) is a thematic mapping javascript library. It allows to represent spatial data in different ways. But with `viewof`, maps designed with `bertin` can also be views within Observable. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":376,"value":"bertin = require(\"bertin@latest\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"Please, hover the map with your mouse.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":378,"value":"viewof bertinmap1 = bertin.draw({\n params: { width: 700 },\n layers: [{ geojson: countries, fill: \"#CCC\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"By default, geographic coordinates are returned.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":397,"value":"bertinmap1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"But you can also choose to return data related to any layer by specifying `viewof = true` at the layer level. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":410,"value":"viewof bertinmap2 = bertin.draw({\n params: { width: 700 },\n layers: [{ geojson: countries, fill: \"#CCC\", viewof: true }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"bertinmap2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"And it works also on thematic layers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":425,"value":"viewof bertinmap3 = bertin.draw({\n params: { width: 700 },\n layers: [\n {\n type: \"square\",\n geojson: bertin.merge(countries, \"ISO3_CODE\", data, \"id\"),\n values: \"gdp\",\n fill: \"red\",\n viewof: true\n },\n { geojson: countries, fill: \"#CCC\", viewof: false }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"bertinmap3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"Find an application here: https://observablehq.com/@neocartocnrs/dashboard-with-bertin-plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":181,"value":"### (data)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":246,"value":"data = FileAttachment(\"stats.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"countries = FileAttachment(\"countries.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"airports = FileAttachment(\"airports.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/lets-play-with-viewof;307;"}