31:T101e,map = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const projection = d3 .geoMercator() .scale(1 / (2 * Math.PI)) .rotate([40, 0]) .center([40, 0]) .translate([0, 0]); let hexes; const rad = 10; 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 p = await d3.csvParse( // await FileAttachment("ordereddata.csv").text(), // d3.autoType // ); const plocs = p.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) { // console.log(d, projection(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; // console.log(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) => 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 outdata = p.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("fill-opacity", 0.7) .attr("stroke", "black") .attr("stroke-opacity", 0.1); } return svg.node(); }32:T1076,// map1 = { // const svg = d3.select(DOM.svg(width, height)); // var center = projection([-122, 48]); // var tile = d3.tile().size([width, height]); // const rad = 11; // // Zoom details: // var zoom = d3 // .zoom() // .scaleExtent([1 << 2, 1 << 20]) // .on("zoom", zoomed); // // Layers for map // var raster = svg.append("g"); // holds tiles // var vector = svg.append("g"); // holds hexagons // var hexes; // to hold hexagons // // Hexbin: // var hexbin = d3 // .hexbin() // .radius(rad) // .extent([[0, 0], [width, height]]) // extent of projected data (displayed) // .x(function(d) { // // console.log(projection(d)); // return projection(d)[0]; // }) // .y(function(d) { // return projection(d)[1]; // }); // var color = d3 // .scaleLinear() // .range(["rgba(255,255,255,0.1)", "orange"]) // .domain([0, 5]); // var data; // // d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function( // // error, // // world // // ) { // // Create some hexbin data: // // var land1 = topojson.feature(world, world.objects.land); // // data = d3.range(500).map(function(d) { // // while (true) { // // var lat = Math.random() * 170 - 70; // // var lon = Math.random() * 360 - 180; // // if (d3.geoContains(land1, [lon, lat])) return [lon, lat]; // // } // // }); // const p = await d3.csv( // "https://gist.githubusercontent.com/Mbrownshoes/bea3b68601c5004145624bdb03eaa43e/raw/4ca68c36baa3a526c74f7a5f250d3ced0ba438c4/proflocations.csv" // ); // // console.log(p); // const plocs = p.map(point => { // // +point.longitude, +point.latitude // // if (d3.geoContains(land1, [+point.longitude, +point.latitude])) // return [+point.longitude, +point.latitude]; // // const coords = projection([+point.longitude, +point.latitude]); // // return Object.assign({ x: coords[0], y: coords[1] }, point); // }); // // console.log(plocs); // svg.call(zoom).call( // zoom.transform, // d3.zoomIdentity // .translate(width / 2, height / 2) // .scale(1 << 11) // .translate(-center[0], -center[1]) // ); // // }); // function zoomed() { // var transform = d3.event.transform; // var tiles = tile.scale(transform.k).translate([transform.x, transform.y])(); // // console.log("tiles", tiles); // // Update projection // projection // .scale(transform.k / Math.PI / 2) // .translate([transform.x, transform.y]); // // console.log(hexbin(data)); // hexes = vector.selectAll("path").data(hexbin(plocs)); // // console.log(hexes); // 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"); // // Update tiles: // var image = raster // .attr("transform", stringify(tiles.scale, tiles.translate)) // .selectAll("image") // .data(tiles, function(d) { // return d; // }); // image.exit().remove(); // image // .enter() // .append("image") // .attr("xlink:href", function(d) { // return ( // "http://" + // "abc"[d[1] % 3] + // ".tile.openstreetmap.org/" + // d[2] + // "/" + // d[0] + // "/" + // d[1] + // ".png" // ); // }) // .attr("x", function(d) { // return d[0] * 256; // }) // .attr("y", function(d) { // return d[1] * 256; // }) // .attr("width", 256) // .attr("height", 256); // } // function stringify(scale, translate) { // var k = scale / 256, // r = scale % 1 ? Number : Math.round; // return ( // "translate(" + // r(translate[0] * scale) + // "," + // r(translate[1] * scale) + // ") scale(" + // k + // ")" // ); // } // return svg.node(); // }33:[{"id":"5e908219f9f616a31dcb8bd229832e38011079d3a6e5cbaa2f245ba45893774463ca57eddf4739a2e37b9d01cf1626d90e298c877f8822a53a46fda24e696c1a","href":"https://static.observableusercontent.com/files/5e908219f9f616a31dcb8bd229832e38011079d3a6e5cbaa2f245ba45893774463ca57eddf4739a2e37b9d01cf1626d90e298c877f8822a53a46fda24e696c1a","name":"ordereddata.csv","type":"text/csv","lastModified":1622495350100.352,"size":9651408}] 2f:{"title":"Hakai dataset locations","cells":[{"id":0,"value":"md`# Hakai dataset locations\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"viewof dataset = Inputs.select([\"CTD\", \"All locations in ERDDAP\"], {\n label: \"Dataset to view\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"md`\nData in currnet view\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"Inputs.table(outdata)","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"// p = await d3.csv(\n// \"https://gist.githubusercontent.com/Mbrownshoes/bea3b68601c5004145624bdb03eaa43e/raw/4ca68c36baa3a526c74f7a5f250d3ced0ba438c4/proflocations.csv\"\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"projection([p[0].longitude, p[0].latitude])","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"p = {\n return dataset === \"CTD\"\n ? await d3.csv(\n \"https://gist.githubusercontent.com/Mbrownshoes/bea3b68601c5004145624bdb03eaa43e/raw/4ca68c36baa3a526c74f7a5f250d3ced0ba438c4/proflocations.csv\"\n )\n : await d3.csvParse(\n await FileAttachment(\"ordereddata.csv\").text(),\n d3.autoType\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"mutable outdata = null","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"projection = d3\n .geoMercator()\n .scale(1 / (2 * Math.PI))\n .translate([0, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"deltas = [-100, -4, -1, 0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"md`\n
\nContour map\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"// colour = d3\n// .scaleSequential(function(t) {\n// var tNew = Math.pow(t, 10);\n// return d3.interpolateViridis(tNew);\n// })\n// .domain([0.024056261216234408, 1000])","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"url = (x, y, 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 = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"initialCenter = [-123 - 40 / 60, 48 + 50 / 60]","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"initialScale = 4096 ","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"// 1 << 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"// feature = d3.json(\"https://gist.githubusercontent.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us.json\").then(topology => topojson.feature(topology, topology.objects.states))","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":374,"value":"md`### Try with OSM`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"// world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}