32:Tef0,map = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const projection = d3 .geoMercator() .scale(1 / (2 * Math.PI)) .translate([0, 0]); let hexes; const rad = 14; const render = d3.geoPath(projection); const tile = d3 .tile() .extent([[0, 0], [width, height]]) .tileSize(512) .clampX(false); // const p = await d3.csv( // "https://gist.githubusercontent.com/Mbrownshoes/bea3b68601c5004145624bdb03eaa43e/raw/4ca68c36baa3a526c74f7a5f250d3ced0ba438c4/proflocations.csv" // ); // const plocs = ctd; const plocs = ctd.map(point => { return [+point.longitude, +point.latitude]; }); var hexbin = d3 .hexbin() .radius(rad) .extent([[0, 0], [width, height]]) // extent of projected data (displayed) .x(function(d) { return projection(d)[0]; }) .y(function(d) { return projection(d)[1]; }); const color = d3.scaleSequential(function(t) { var tNew = Math.pow(t, 10); return d3.interpolateViridis(tNew); }); // .domain([0, d3.max(hexbin(plocs)[0], d => d.length)].reverse()); // console.log(hexbin(plocs)); // const zoom = d3 .zoom() .scaleExtent([1 << 10, 1 << 20]) .extent([[0, 0], [width, height]]) .on("zoom", () => zoomed(d3.event.transform)); // let image = svg // .append("g") // .attr("pointer-events", "none") // .selectAll("image"); let showlayers = false; const levels = svg .append("g") .attr("pointer-events", "none") .selectAll("g") .data(deltas) .join("g") .style("opacity", showlayers ? 0.3 : null); let vector = svg.append("g"); // svg.call(zoom).call( // zoom.transform, // d3.zoomIdentity // .translate(width / 2, height / 2) // .scale(-initialScale) // .translate(...projection(initialCenter)) // .scale(-1) // ); svg.call(zoom).call(zoom.transform, mutable transform); function zoomed(transform) { // const tiles = tile(transform); mutable transform = transform; levels.each(function(delta) { const tiles = tile.zoomDelta(delta)(transform); d3.select(this) .selectAll("image") .data(tiles, d => d) .join("image") .attr("xlink:href", d => { return url(...d3.tileWrap(d)); }) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("height", tiles.scale); }); // image = image // .data(tiles, d => d) // .join("image") // .attr("xlink:href", d => url(...d3.tileWrap(d))) // .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) // .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) // .attr("width", tiles.scale) // .attr("height", tiles.scale); projection .scale(transform.k / (2 * Math.PI)) .translate([transform.x, transform.y]); const bb = [projection.invert([0, 0]), projection.invert([width, height])]; //filter raw dataset by current window size mutable dataInView = ctd.filter(p => { return ( bb[0][0] <= p.longitude && p.longitude <= bb[1][0] && (bb[0][1] >= p.latitude && p.latitude >= bb[1][1]) ); }); hexes = vector.selectAll("path").data(hexbin(plocs)); color.domain([0, d3.max(hexbin(plocs), d => d.length)].reverse()); hexes.exit().remove(); hexes .enter() .append("path") .merge(hexes) .attr("d", hexbin.hexagon(rad)) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .attr("fill", function(d) { return color(d.length); }) .attr("stroke", "black"); } return svg.node(); }33:[] 30:{"title":"Mapping the locations of all datasets in an ERDDAP server","cells":[{"id":0,"value":"md`# Mapping the locations of all datasets in an ERDDAP server`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"md`\nThis load and maps the distinct lat and lon of every dataset, so it can take a while to load depending on how many and the size of the datasets in a given ERDDAP.\n\nIt first loads from Hakai's ERDDAP (https://catalogue.hakai.org/erddap). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"viewof erddap_url1 = text({\n title: \"ERDDAP URL\",\n value: \"https://catalogue.hakai.org/erddap\",\n description:\n \"Try: http://dap.onc.uvic.ca/erddap or https://catalogue.hakai.org/erddap\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"md`\n
\n### Dataset ID and location of each point in current view\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"Inputs.table(ordereddata)","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"// tab = {\n// if (ordereddata.length !== 0) {\n// return table(ordereddata, {\n// sortable: true,\n// columns: {\n// dataset: {\n// formatter(val) {\n// // console.log(val);\n// // Formatters can also return HTML values! Here’s\n// // one that highlights first names.\n// // let parts = val.match(/([^,]*)\\,(.*)/);\n// return html`\n// ${val}`;\n// }\n// }\n// }\n// });\n// }\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"md`\n\n\n

\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"ordereddata = dataInView.map(({ dataset, latitude, longitude }) => ({\n dataset: dataset,\n latitude: latitude,\n longitude: longitude\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"mutable dataInView = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"mutable transform = d3.zoomIdentity\n .translate(width / 2, height / 2)\n .scale(-initialScale)\n .translate(...projection(initialCenter))\n .scale(-1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"deltas = [-100, -4, -1, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"projection = d3\n .geoMercator()\n .scale(1 / (2 * Math.PI))\n .translate([0, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"initialScale = 1 << 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"url = (\n x,\n y,\n z\n) => `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/${z}/${x}/${y}${\n devicePixelRatio > 1 ? \"@2x\" : \"\"\n}?access_token=pk.eyJ1IjoibWF0YnJvd25oYWthaSIsImEiOiJjanQ0cGlzYmQwMHNjNDNvNWVrODAyYWI5In0.kc6L3DX6mqjJlLbyxWDEzA\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 550","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"initialCenter = [-122 - 40 / 60, 48 + 50 / 60]","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-tile@1\", \"d3-hexbin\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"ctd","pinned":true,"hidden":false,"mode":"ojs"},{"id":666,"value":"erddap_url1","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"import { ctd } with { erddap_url1 as erddap_url } from 'd3be428916c5ecd4'","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"import { table, titanicData } from \"@tmcw/tables@513\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":651,"value":"import { text } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}