My goal is to create an interactive world map with a clickable marker for each country. When a user clicks on a source country's marker, I want to display interactions with other countries in an aggregated manner. While I have successfully drawn the world map, I am unsure about how to visualize interactions between two countries using IP addresses from CSV files. Despite my efforts to find solutions, I have been unsuccessful so far. As someone new to d3.js, I would greatly appreciate any guidance on this matter.
Any suggestions or recommendations on how to proceed, such as utilizing relevant libraries, would be incredibly valuable. Thank you in advance. Access the Plnkr here
Below is the Script Section:
var app = angular.module("chartApp", []);
app.controller("SalesController", function($scope, $http) {
$http.get("countries.csv").then(function(response) {
$scope.salesData = response;
});
});
app.directive("linearChart", function($window) {
return {
restrict: "EA",
// template: "<svg width='1024' height='728'></svg>",
link: function(scope, elem, attrs) {
var margin = { top: 50, left: 50, right: 50, bottom: 50 },
height = 900 - margin.top - margin.bottom,
width = 1400 - margin.left - margin.right;
var svg = d3.select("#map")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.queue()
.defer(d3.json, "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d7cfd2ccc48dc1d4ccfcbcd6cec5c458cdc9ce">[email protected]</a>/world/110m.json")
.defer(d3.csv, "countries.csv")
.await(ready);
var projection = d3.geoMercator()
.center([-30, 60])
.scale(200);
var path = d3.geoPath()
.projection(projection);
function ready(error, data, country_name) {
console.log(data);
var countries = topojson.feature(data, data.objects.countries).features;
console.log(countries);
console.log(country_name);
svg.selectAll(".country")
.data(countries)
.enter().append("path")
.attr("class", "country")
.attr("d", path)
.on('mouseover', function(d) {
d3.select(this).classed("selected", true);
})
.on('mouseout', function(d) {
d3.select(this).classed("selected", false);
});
svg.selectAll(".country-circles")
.data(country_name)
.enter().append("circle")
.attr("class", "circle")
.attr("r", 2)
.attr("cx", function(d) {
var coords = projection([d.longitude, d.latitude]);
return coords[0];
})
.attr("cy", function(d) {
var coords = projection([d.longitude, d.latitude]);
return coords[1];
});
svg.selectAll(".countries")
.data(country_name)
.enter().append("marker")
.attr("class", "countries")
.attr("x", function(d) {
var coords = projection([d.longitude, d.latitude]);
return coords[0];
})
.attr("y", function(d) {
var coords = projection([d.longitude, d.latitude]);
return coords[1];
})
.attr("dx", 5)
.attr("dy", 2);
}
}
};
});