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();

}

return dataset === "CTD"

? await d3.csv(

"https://gist.githubusercontent.com/Mbrownshoes/bea3b68601c5004145624bdb03eaa43e/raw/4ca68c36baa3a526c74f7a5f250d3ced0ba438c4/proflocations.csv"

)

: await d3.csvParse(

await FileAttachment("ordereddata.csv").text(),

d3.autoType

);

.translate(width / 2, height / 2)

.scale(-initialScale)

.translate(...projection(initialCenter))

.scale(-1)

.geoMercator()

.scale(1 / (2 * Math.PI))

.translate([0, 0])

`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/${z}/${x}/${y}${

devicePixelRatio > 1 ? "@2x" : ""

// // 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();

// }