309 lines
10 KiB
HTML
309 lines
10 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
body{
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<script src="https://d3js.org/d3.v6.min.js"></script>
|
||
|
|
<script src="https://d3js.org/topojson.v3.min.js"></script>
|
||
|
|
<script src="//unpkg.com/d3-geo-zoom"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
// see also: http://bl.ocks.org/dwtkns/4973620
|
||
|
|
var width = window.innerWidth;
|
||
|
|
var height = window.innerHeight;
|
||
|
|
|
||
|
|
const eu_countries = ['Austria', 'Italy', 'Belgium', 'Latvia', 'Bulgaria', 'Lithuania', 'Croatia', 'Luxembourg', 'Cyprus', 'Malta', 'Czechia', 'Netherlands', 'Denmark', 'Poland', 'Estonia ', 'Portugal', 'Finland ', 'Romania', 'France', 'Slovakia', 'Germany', 'Slovenia', 'Greece', 'Spain', 'Hungary', 'Sweden', 'Ireland'];
|
||
|
|
|
||
|
|
const config = {
|
||
|
|
'max_y_rotation' : 55,
|
||
|
|
}
|
||
|
|
|
||
|
|
var graph = {
|
||
|
|
nodes: [
|
||
|
|
{ id: "New York", lat: 40.706109, lon: -74.01194 },
|
||
|
|
{ id: "London", lat: 51.508070, lon: -0.126432 },
|
||
|
|
{ id: "Montevideo", lat: -34.901776, lon: -56.163983 },
|
||
|
|
{ id: "London-NewYork1" },
|
||
|
|
{ id: "London-NewYork2" },
|
||
|
|
{ id: "London-NewYork3" },
|
||
|
|
{ id: "Montevideo-London" }
|
||
|
|
],
|
||
|
|
links: [
|
||
|
|
{ source: "New York", target: "London-NewYork1" },
|
||
|
|
{ source: "New York", target: "London-NewYork2" },
|
||
|
|
{ source: "New York", target: "London-NewYork3" },
|
||
|
|
{ source: "London-NewYork1", target: "London" },
|
||
|
|
{ source: "London-NewYork2", target: "London" },
|
||
|
|
{ source: "London-NewYork3", target: "London" },
|
||
|
|
{ source: "London", target: "Montevideo-London" },
|
||
|
|
{ source: "Montevideo-London", target: "Montevideo" }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const force = d3.forceSimulation()
|
||
|
|
.force("link", d3.forceLink()
|
||
|
|
.id(function (d) {
|
||
|
|
return d.id;
|
||
|
|
})
|
||
|
|
.distance(10))
|
||
|
|
.force("charge", d3.forceManyBody().strength(-200));
|
||
|
|
|
||
|
|
|
||
|
|
const svg = d3.select("body")
|
||
|
|
.append("svg")
|
||
|
|
.attr("width", width)
|
||
|
|
.attr("height", height);
|
||
|
|
|
||
|
|
const container = svg.append("g").attr("id", "container");
|
||
|
|
|
||
|
|
const projection = d3.geoOrthographic()
|
||
|
|
.center([0, 0])
|
||
|
|
.translate([width / 2, height / 2])
|
||
|
|
.rotate([ -12, -52, 0])
|
||
|
|
.clipAngle(90)
|
||
|
|
.scale(height*1.5);
|
||
|
|
|
||
|
|
const proj = d3.geoPath().projection(projection);
|
||
|
|
const graticule = d3.geoGraticule10();
|
||
|
|
|
||
|
|
const g_countries = container.append("g").attr("id", "countries");
|
||
|
|
const g_borders = container.append("g").attr("id", "borders");
|
||
|
|
container.append("g")
|
||
|
|
.append('path')
|
||
|
|
.attr("class", "graticule")
|
||
|
|
.attr('d', proj(graticule))
|
||
|
|
.attr("fill", "none")
|
||
|
|
.attr("stroke-width", "!px")
|
||
|
|
.attr("stroke", (n) => {
|
||
|
|
return "lightgray";
|
||
|
|
});
|
||
|
|
;
|
||
|
|
|
||
|
|
|
||
|
|
d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json").then(function (world) {
|
||
|
|
// land = topojson.feature(world, world.objects.land)
|
||
|
|
const borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
|
||
|
|
console.log(borders);
|
||
|
|
const countries = topojson.feature(world, world.objects.countries).features;
|
||
|
|
// console.log(topojson.feature(world, world.objects.countries).features);
|
||
|
|
g_countries.selectAll("path")
|
||
|
|
.data(countries)
|
||
|
|
.enter()
|
||
|
|
.append("path")
|
||
|
|
.attr("class", "countries")
|
||
|
|
.attr("d", proj)
|
||
|
|
.attr("fill", (n) => {
|
||
|
|
if(eu_countries.indexOf(n.properties.name) !== -1) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
return "lightgray";
|
||
|
|
});
|
||
|
|
|
||
|
|
g_borders//.selectAll("path")
|
||
|
|
// .data(borders)
|
||
|
|
// .enter()
|
||
|
|
.append("path")
|
||
|
|
.attr("class", "borders")
|
||
|
|
.attr("d", proj(borders))
|
||
|
|
.attr("fill", "none")
|
||
|
|
.attr("stroke-width", "2px")
|
||
|
|
.attr("stroke", (n) => {
|
||
|
|
return "white";
|
||
|
|
});
|
||
|
|
|
||
|
|
const links = container.append('g')
|
||
|
|
.attr("id", "links")
|
||
|
|
.selectAll("line")
|
||
|
|
.data(graph.links)
|
||
|
|
.enter()
|
||
|
|
.append("line")
|
||
|
|
.attr("stroke-width", 2)
|
||
|
|
.attr("stroke", "black");
|
||
|
|
|
||
|
|
|
||
|
|
const nodes = container.append('g')
|
||
|
|
.attr("id", "nodes")
|
||
|
|
.selectAll("circle")
|
||
|
|
.data(graph.nodes)
|
||
|
|
.enter()
|
||
|
|
.append("circle")
|
||
|
|
.attr('r', 5)
|
||
|
|
.call(d3.drag()
|
||
|
|
.on("start", dragInicia)
|
||
|
|
.on("drag", dragging)
|
||
|
|
.on("end", dragTermina));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
force.nodes(graph.nodes);
|
||
|
|
force.force("link").links(graph.links);
|
||
|
|
|
||
|
|
graph.nodes.forEach(function (d) {
|
||
|
|
if (d.lon && d.lat) {
|
||
|
|
var p = projection([d.lon, d.lat]);
|
||
|
|
d.fx = p[0];
|
||
|
|
d.fy = p[1];
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
//simulación y actualizacion de la posicion de los nodos en cada "tick"
|
||
|
|
force.on("tick", function () {
|
||
|
|
links
|
||
|
|
.attr('x1', function (d) {
|
||
|
|
return d.source.x;
|
||
|
|
})
|
||
|
|
.attr('y1', function (d) {
|
||
|
|
return d.source.y;
|
||
|
|
})
|
||
|
|
.attr('x2', function (d) {
|
||
|
|
return d.target.x;
|
||
|
|
})
|
||
|
|
.attr('y2', function (d) {
|
||
|
|
return d.target.y;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
nodes
|
||
|
|
.attr('cx', function (d) {
|
||
|
|
return d.x;
|
||
|
|
})
|
||
|
|
.attr('cy', function (d) {
|
||
|
|
return d.y;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
function dragInicia(d) {
|
||
|
|
if (!d.lon || !d.lat) {
|
||
|
|
if (!d3.event.active) force.alphaTarget(0.3).restart();
|
||
|
|
d.fx = d.x;
|
||
|
|
d.fy = d.y;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function dragging(d) {
|
||
|
|
if (!d.lon || !d.lat) {
|
||
|
|
d.fx = d3.event.x;
|
||
|
|
d.fy = d3.event.y;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function dragTermina(d) {
|
||
|
|
if (!d.lon || !d.lat) {
|
||
|
|
if (!d3.event.active) force.alphaTarget(0);
|
||
|
|
d.fx = null;
|
||
|
|
d.fy = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function refresh() {
|
||
|
|
container.selectAll(".countries").attr("d", proj);
|
||
|
|
container.selectAll(".graticule").attr("d", proj(graticule));
|
||
|
|
container.selectAll(".borders").attr("d", proj(borders));
|
||
|
|
|
||
|
|
// console.log(graph.nodes);
|
||
|
|
force.alpha = 0;
|
||
|
|
force.restart();
|
||
|
|
graph.nodes.forEach(function (d) {
|
||
|
|
if (d.lon && d.lat) {
|
||
|
|
var p = projection([d.lon, d.lat]);
|
||
|
|
d.fx = p[0];
|
||
|
|
d.fy = p[1];
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// svg.call(d3.zoom().extent([[0,0],[1,1]]).scaleExtent([0.3, 6]).on("start", function () {
|
||
|
|
// // svg.node().classList.add("dragging");
|
||
|
|
// }).on("end", function () {
|
||
|
|
// // svg.node().classList.remove("dragging");
|
||
|
|
// }).on("zoom", function ({ transform }) {
|
||
|
|
// // container.attr("transform", transform);
|
||
|
|
// o = [transform.x/6, -transform.y/6];
|
||
|
|
// o[1] = o[1] > config.max_y_rotation ? config.max_y_rotation :
|
||
|
|
// o[1] < -config.max_y_rotation ? -config.max_y_rotation :
|
||
|
|
// o[1];
|
||
|
|
// projection .rotate(o).scale(window.innerHeight*1.5*transform.k)
|
||
|
|
|
||
|
|
// refresh();
|
||
|
|
// // container.attr("transform", "scale(" + transform.k + ")");
|
||
|
|
// }));
|
||
|
|
|
||
|
|
|
||
|
|
// svg.on("wheel.zoom", (e) => {
|
||
|
|
|
||
|
|
// }, {passive: false})
|
||
|
|
|
||
|
|
d3.geoZoom()
|
||
|
|
.northUp(true)
|
||
|
|
.projection(projection)
|
||
|
|
.scaleExtent([.3, 6])
|
||
|
|
.onMove(refresh)(svg.node());
|
||
|
|
// (<mapDomNode>);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// d3.select('svg').call(d3.drag()
|
||
|
|
// .on("start", mousedown)
|
||
|
|
// .on("drag", mousemove)
|
||
|
|
// .on("end", mouseup));
|
||
|
|
// var m0, o0;
|
||
|
|
// function mousedown(e) {
|
||
|
|
// m0 = [d3.event.x, d3.event.y];
|
||
|
|
// o0 = projection.rotate();
|
||
|
|
// console.log(e, d3.event, m0,o0);
|
||
|
|
// // d3.event.preventDefault();
|
||
|
|
// }
|
||
|
|
// function mousemove() {
|
||
|
|
// if (m0) {
|
||
|
|
// var m1 = [d3.event.x, d3.event.y]
|
||
|
|
// , o1 = [o0[0] + (m1[0] - m0[0]) / 6, o0[1] + (m0[1] - m1[1]) / 6];
|
||
|
|
// o1[1] = o1[1] > config.max_y_rotation ? config.max_y_rotation :
|
||
|
|
// o1[1] < -config.max_y_rotation ? -config.max_y_rotation :
|
||
|
|
// o1[1];
|
||
|
|
// projection.rotate(o1);
|
||
|
|
// // sky.rotate(o1);
|
||
|
|
// refresh();
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// function mouseup() {
|
||
|
|
// if (m0) {
|
||
|
|
// mousemove();
|
||
|
|
// m0 = null;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
function resize(){
|
||
|
|
width = window.innerWidth;
|
||
|
|
height = window.innerHeight;
|
||
|
|
|
||
|
|
d3.selectAll('svg')
|
||
|
|
.attr("width", width)
|
||
|
|
.attr("height", height);
|
||
|
|
projection.translate([width / 2, height / 2]);
|
||
|
|
projection.scale(height*1.5);
|
||
|
|
refresh();
|
||
|
|
}
|
||
|
|
window.addEventListener('resize', resize);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|