{
let container = html`<div style='height:1200px;' />`;
let map;
// Give the container dimensions.
yield container;
map = new mapboxgl.Map({
container,
center: [-122.159846, 37.601883],
zoom: 9.95,
style: "mapbox://styles/mapbox/streets-v9"
});
function project(d) {
return map.project(new mapboxgl.LngLat(d[0], d[1]));
}
function invert(d) {}
function projection(cx, cy) {
var x = parseFloat(cx);
var y = parseFloat(cy);
var test = map.project(new mapboxgl.LngLat(x, y));
return test;
}
var svg = d3
.select(container)
.append("svg")
.attr("width", "100%")
.attr("height", "1200")
.style("position", "absolute")
.style("z-index", 2);
var dots = svg
.append("g")
.selectAll("circle")
.data(location_data)
.enter()
.append("circle")
.attr("r", 1.4)
.style("opacity", 0.85)
.style("fill", "grey");
let dataA = [circleStartPt[0]];
let dataB = [circleStartPt[1]];
//var radA = 120;
//var radB = 120;
var circleA = svg
.append("g")
.selectAll("circle")
.data(dataA)
.join("circle")
.attr("id", "circA")
.attr("r", radA)
.attr("cx", (d) => project(d).x)
.attr("cy", (d) => project(d).y)
.attr("fill", "white")
.attr("stroke", "black")
.attr("opacity", 0.6)
.call(drag);
var circleB = svg
.append("g")
.selectAll("circle")
.data(dataB)
.join("circle")
.attr("id", "circB")
.attr("r", radB)
.attr("cx", (d) => project(d).x)
.attr("cy", (d) => project(d).y)
.attr("fill", "red")
.attr("stroke", "black")
.attr("opacity", 0.35)
.call(drag);
function inCircle(a, b, x, y, r) {
var dist_points = (a - x) * (a - x) + (b - y) * (b - y);
r *= r;
if (dist_points < r) {
return true;
}
return false;
}
function inBothCircles(d) {
var dx = project(d).x;
var dy = project(d).y;
var c1x = circleA.attr("cx");
var c1y = circleA.attr("cy");
var c2x = circleB.attr("cx");
var c2y = circleB.attr("cy");
return inCircle(dx, dy, c1x, c1y, radA) && inCircle(dx, dy, c2x, c2y, radB);
}
function render() {
dots
.attr("cx", function(z) {
return project(z).x;
})
.attr("cy", function(z) {
return project(z).y;
})
.style("fill", function(z) {
return inBothCircles(z) ? "#fa1090" : "grey";
})
.on('mouseover', function(event, z) {
d3.select('#tooltip').transition().duration(200).style('opacity', 1)
.text("hello")
})
.on('mouseout', function() {
d3.select('#tooltip').style('opacity', 0)
})
.on('mousemove', function(event, z) {
d3.select('#tooltip').style("top", (event.pageY+30)+"px").style("left", (event.pageX-30)+"px")
})
.style("opacity", 1)
.raise();
}
// Call render method, and whenever map changes; modified to render every .1s
render();
setInterval(render, 100);
invalidation.then(() => map.remove());
}
drag = {
function dragstarted(event, d) {
d3.select(this).raise().attr("stroke", "green");
}
function dragged(event, d) {
d3.select(this)
.attr("cx", (d.x = event.x))
.attr("cy", (d.y = event.y));
}
function dragended(event, d) {
d3.select(this).attr("stroke", "black");
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
viewof radA = Inputs.range([10, 100], {value: 5, step: 1, label: "Radius"});
viewof radB = Inputs.range([10, 100], {value: 5, step: 1, label: "Radius"});
ra = radA;
rb = radB
theToolTip = {
d3.select("body")
.append("div")
.attr('id', 'tooltip')
.attr('style', 'position: absolute; opacity: 0;')
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
.style("z-index", 2);
}
d = location_data.locat[0]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
