28:null 29:["$","title",null,{"children":"Graphics - Spring 2025 | Zhi Keng He | Observable"}] 2f:T2330,{ // Define the data for the table const data = [ { destination: "Hanger B", driving: 2.7, walking: 18 }, { destination: "Ecology Village", driving: 3.6, walking: 20 }, { destination: "Raptor Point", driving: 5.2, walking: 36 } ]; // Define geospatial data for the map const zones_shapes = [ { type: "Feature", properties: { short_name: "Ryan Visitor\nCenter" }, geometry: { type: "Point", coordinates: [-73.89691571, 40.58817086] } }, { type: "Feature", properties: { short_name: "Hanger\nB" }, geometry: { type: "Point", coordinates: [-73.88354624, 40.59477041] } }, { type: "Feature", properties: { short_name: "Ecology\nVillage" }, geometry: { type: "Point", coordinates: [-73.88689201, 40.58691078] } }, { type: "Feature", properties: { short_name: "Raptor\nPoint" }, geometry: { type: "Point", coordinates: [-73.88409646740757, 40.604385363013364] } } ]; // Create the main container for both panels const mainContainer = d3 .create("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("width", "100%") .style("height", "330px") .style("max-width", "1200px") .style("gap", "20px"); // PANEL 2: Map // Create the map container const mapContainer = mainContainer .append("div") .style("flex", "1") .style("min-width", "300px") .attr("id", "map"); // Initialize and render the map with a small delay to ensure DOM is ready setTimeout(() => { // Create the map const map = new maplibregl.Map({ bearing: 50, scrollZoom: false, preserveDrawingBuffer: true, scrollZoom: false, dragPan: false, // Disables panning by dragging dragRotate: false, // Disables rotation by dragging touchZoomRotate: false, // Disables pinch zoom and rotate doubleClickZoom: false, // Disables zoom on double click container: mapContainer.node(), center: [-73.88836811939241, 40.59215701888843], zoom: 12.6, style: { version: 8, glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf", sources: { "raster-tiles": { type: "raster", tiles: [ "https://atlas-stg.geoplatform.gov/styles/v1/atlas-user/ck5cpia2u0auf01p9vbugvcpv/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiYXRsYXMtdXNlciIsImEiOiJjazFmdGx2bjQwMDAwMG5wZmYwbmJwbmE2In0.lWXK2UexpXuyVitesLdwUg" ], tileSize: 256 } }, layers: [ { id: "simple-tiles", type: "raster", source: "raster-tiles", minzoom: 0, maxzoom: 22 } ] } }); map.on("load", () => { // Add the zones source map.addSource("zones", { type: "geojson", data: { type: "FeatureCollection", features: zones_shapes } }); // Add routes source map.addSource("routes", { type: "geojson", data: { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: [ [-73.89543273777788, 40.58782502017419], [-73.88391686439006, 40.59532877763985], [-73.88377470595634, 40.594705103815045] ], type: "LineString" } }, { type: "Feature", properties: {}, geometry: { coordinates: [ [-73.88434333882728, 40.59501693955667], [-73.88651550413779, 40.60239294302892], [-73.88687879714878, 40.60265677788149], [-73.88394078409954, 40.604539625769746] ], type: "LineString" } }, { type: "Feature", properties: {}, geometry: { coordinates: [ [-73.89406369403407, 40.58871087573468], [-73.89030456548349, 40.585508257603834], [-73.88799847687348, 40.586000045867195], [-73.88839335432002, 40.58706761654773] ], type: "LineString" } } ] } }); // Add the routes layer map.addLayer({ id: "route-lines", type: "line", source: "routes", paint: { "line-color": "#9894D1", "line-width": 3 } }); // Add the labels layer using centroids map.addLayer({ id: "zone-labels", type: "symbol", source: "zones", layout: { "text-field": ["get", "short_name"], "text-font": ["Noto Sans Regular"], "text-size": 12, "text-anchor": "bottom", "text-offset": [0, 0], "text-allow-overlap": false, "symbol-placement": "point" }, paint: { "text-color": "#000000", "text-halo-color": "#ffffff", "text-halo-width": 1 } }); const layers = map.getStyle().layers; let labelLayerId; for (let i = 0; i < layers.length; i++) { if (layers[i].type === "symbol" && layers[i].layout["text-field"]) { labelLayerId = layers[i].id; break; } } map.addLayer( { id: "3d-buildings", source: "openmaptiles", "source-layer": "building", type: "fill-extrusion", minzoom: 13, filter: ["!=", ["get", "hide_3d"], true], paint: { "fill-extrusion-color": "#decebc", "fill-extrusion-height": [ "interpolate", ["linear"], ["zoom"], 15, 0, 16, ["get", "render_height"] ], "fill-extrusion-base": [ "case", [">=", ["get", "zoom"], 16], ["get", "render_min_height"], 0 ] } }, labelLayerId ); }); }, 100); // PANEL 1: Table with Sparkbars // Create the table container const tableContainer = mainContainer .append("div") .style("flex", "1") .style("min-width", "300px"); // Calculate the maximum value for scaling const maxValue = d3.max(data, (d) => Math.max(d.driving, d.walking)); // Create table const table = tableContainer .append("table") .style("border-collapse", "collapse") .style("font", "17px/1.5 var(--serif)") .style("width", "100%"); // Create header const thead = table.append("thead"); thead .append("tr") .selectAll("th") .data(["Destination", "Driving", "Walking"]) .join("th") .style("padding", "8px 12px") .style("text-align", (d, i) => (i === 0 ? "left" : "center")) .style("border-bottom", "2px solid #ddd") .style("border-left", (d, i) => i > 0 ? "1px solid rgba(0,0,0,0.3)" : "none" ) .text((d) => d); // Create table body const tbody = table.append("tbody"); const rows = tbody .selectAll("tr") .data(data) .join("tr") .style("border-bottom", "1px solid #ddd"); // Add destination column rows .append("td") .style("padding", "12px") .style("font-weight", "500") .text((d) => d.destination); // Function to create a sparkbar cell function createSparkbarCell(selection, value, maxValue, color) { const cell = selection .style("padding", "8px 10px") .style("position", "relative") .style("height", "20px") .style("border-left", "1px solid rgba(0,0,0,0.3)"); // Add the value text cell .append("span") .style("position", "relative") .style("z-index", "1") .style("line-height", "2rem") .style("font-weight", "normal") .text(value); // Add the sparkbar const barWidth = `${(value / maxValue) * 100}%`; cell .append("div") .style("position", "absolute") .style("top", "0") .style("left", "0") .style("height", "100%") .style("width", barWidth) .style("background-color", color) .style("opacity", "0.3") .style("z-index", "0"); } // Add driving sparkbars rows.each(function (d) { createSparkbarCell( d3.select(this).append("td"), d.driving, maxValue, "#9894D1" ); }); // Add walking sparkbars rows.each(function (d) { createSparkbarCell( d3.select(this).append("td"), d.walking, maxValue, "#ff006e" ); }); return mainContainer.node(); }30:T8d9,{ const insetMap = new maplibregl.Map({ preserveDrawingBuffer: true, container: container.querySelector("#inset1"), style: { version: 8, glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf", sources: { "raster-tiles": { type: "raster", tiles: [ "https://atlas-stg.geoplatform.gov/styles/v1/atlas-user/ck5cpia2u0auf01p9vbugvcpv/tiles/512/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiYXRsYXMtdXNlciIsImEiOiJjazFmdGx2bjQwMDAwMG5wZmYwbmJwbmE2In0.lWXK2UexpXuyVitesLdwUg" ], tileSize: 512, attribution: 'National Park Service ; OpenStreetMap contributors' } }, layers: [ { id: "simple-tiles", type: "raster", source: "raster-tiles", minzoom: 0, maxzoom: 22 } ] }, center: [-74.00585107314781, 40.67034215514556], zoom: 11, interactive: false, attributionControl: false, style: { version: 8, glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf", sources: { "raster-tiles": { type: "raster", tiles: [ "https://atlas-stg.geoplatform.gov/styles/v1/atlas-user/ck5cpia2u0auf01p9vbugvcpv/tiles/512/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiYXRsYXMtdXNlciIsImEiOiJjazFmdGx2bjQwMDAwMG5wZmYwbmJwbmE2In0.lWXK2UexpXuyVitesLdwUg" ], tileSize: 512 } }, layers: [ { id: "simple-tiles", type: "raster", source: "raster-tiles", minzoom: 0, maxzoom: 22 } ] } }); const northArrow = document.createElement("div"); northArrow.innerHTML = "⦽"; northArrow.style.cssText = ` position: absolute; bottom: 40px; right: 20px; font-size: 24px; font-weight: 600; transform-origin: center; cursor: default; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; `; // Add to map container insetMap.getContainer().appendChild(northArrow); }31:[{"id":"e1c3f1a8e7a43b9f3e22ad608453f29acda32f7b0b7196ab0010897b7fbe1b1b781636cb65aa0caa45d5d021501d027b50802ee655f695739e5773f3383a1d5f","href":"https://static.observableusercontent.com/files/e1c3f1a8e7a43b9f3e22ad608453f29acda32f7b0b7196ab0010897b7fbe1b1b781636cb65aa0caa45d5d021501d027b50802ee655f695739e5773f3383a1d5f","name":"4.1.car.png","type":"image/png","lastModified":1745979796471.184,"size":2264066},{"id":"5299993bb48b40d0eb6704a9ddde1d1de4feb790b1bdcdf99ea879392f8576dfcfd62e7cbe073ef81c08811fdeba371ed7cb445512073c7dbf00cd5986205f1b","href":"https://static.observableusercontent.com/files/5299993bb48b40d0eb6704a9ddde1d1de4feb790b1bdcdf99ea879392f8576dfcfd62e7cbe073ef81c08811fdeba371ed7cb445512073c7dbf00cd5986205f1b","name":"4.1.bike.png","type":"image/png","lastModified":1745979796486.704,"size":2277456},{"id":"6f3db1c7fdf261dbb9f363568bba2566ee02673753db9a3f95ee267c3479e22502454a42ee05c4d65ecc0771c5b6c98fdf1d408b6564d9883aeca56745714f92","href":"https://static.observableusercontent.com/files/6f3db1c7fdf261dbb9f363568bba2566ee02673753db9a3f95ee267c3479e22502454a42ee05c4d65ecc0771c5b6c98fdf1d408b6564d9883aeca56745714f92","name":"4.1.transit.png","type":"image/png","lastModified":1745979796511.499,"size":2287180}] 2c:{"id":"5d2935dd44065092","slug":null,"title":"Graphics - Spring 2025","thumbnail":"1420eba33eda4e11658f283394309947e97c95ac17d0cdcbd3ae1a5c4cf22549","access_level":"public","create_time":"$D2025-04-30T01:53:29.451Z","update_time":"$D2025-05-14T20:56:43.104Z","view_time":null,"first_public_time":"$D2025-05-14T20:56:59.043Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"16506c8d98fe0d4f","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":"starter_2024"},"version":914,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null}],"members":[{"type":"team","id":"16506c8d98fe0d4f","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":"starter_2024","role":"editor"},{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Graphics - Spring 2025","cells":[{"id":0,"value":"# Graphics - Spring 2025","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"html`\n

Figure 4.1: One hour travel zones (driving, biking, public transit)\n

${await FileAttachment(\n \"4.1.car.png\"\n ).image({\n width: width / 3\n })}

\n${await FileAttachment(\"4.1.bike.png\").image({\n width: width / 3\n})}\n

${await FileAttachment(\n \"4.1.transit.png\"\n ).image({\n width: width / 3\n })}

${Swatches(\n d3.scaleOrdinal(\n [\"Floyd Bennett Field\", \"Driving\", \"Biking\", \"Public Transit\"],\n [\"#1DAAB4\", \"#9894D1\", \"#94B0B3\", \"#324B4D\"]\n ),\n { swatchSize: 20 }\n)}

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"Figure 4.2: Travel time (minutes) driving compared to walking from the Ryan Visitor Center","pinned":false,"hidden":false,"mode":"html"},{"id":48,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"*MapLibre | National Park Service ; OpenStreetMap contributors*","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"

Figure 4.3: Floyd Bennett Field with the three possible ferry stops

","pinned":false,"hidden":false,"mode":"html"},{"id":156,"value":"container = html`\n\n

${await FileAttachment(\n \"Screenshot 2025-04-29 at 11.48.58 PM.png\"\n ).image({\n width: width\n })}\n\n

\nApproximate route of Rockaway Ferry shown in purple. \n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"maplibregl = require(\"maplibre-gl@4.7.1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"