/    Sign up×
Community /Pin to ProfileBookmark

Using D3 to plot data on a map

Copy linkTweet thisAlerts:
Oct 18.2019

Hi everyone.

Would anyone here know which is the best way to represent data on a map using D3? I have downloaded a csv from Kaggle with suicides per country, per year, per gender, per age with GDP taken into account and I want to put that data on a map for a school project.

I have modified the data and I have in .json format now.

`{
“country”: “Uzbekistan”,
“year”: 1999,
“sex”: “female”,
“age”: “75+ years”,
“suicides”: 13,
“population”: 209948,
“suicidesperonehundredthousandpop”: 6.19,
“yearlygpd”: “17,078,465,982”,
“gdppercapita”: 801
},`

If anyone has a link or a starting point, that would be fantastic. I googled a bit around and found a lot of confusing information. Maybe someone here has done this already and can send me in the right direction. Much appreciated.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumOct 18.2019 — I don't understand, what your intention is exactly:

A pop-up when you hover or click a country? That would be fairly easy and wouldn't require D3.

Or a chart like a pie- or bar-chart?
Copy linkTweet thisAlerts:
@IgnoramusOfTheLawauthorOct 18.2019 — @Sempervivum#1610182

Hi and thank you for your help. I have a set of data in an array of objects. Every object is like this:

(full link for the data: [https://raw.githubusercontent.com/WWWaterloo/data-visualization-gd/master/data/data.json](url)

{<br/>
"country": "Albania",<br/>
"year": 1996,<br/>
"sex": "female",<br/>
"age": "5-14 years",<br/>
"suicides": 1,<br/>
"population": 354100,<br/>
"suicidesperonehundredthousandpop": 0.28,<br/>
"yearlygpd": "3,314,898,292",<br/>
"gdppercapita": 1127<br/>
},

There is a separate entry for every age group, of every gender, in every country, for every year. What I would like is to have a world map where the user selects a country (like Albania), then has the option to select a year, a gender and an age group (from a list) and the suicides value is displayed. Suicides, suicides per 100k people, GDP for that year and the GDP per capita for that year.

I have little experience in D3 and my greatest concern is how would I tie the data set I have to a map. As in, not have the user select the country from a list, but from a world map.

Many thanks.
Copy linkTweet thisAlerts:
@SempervivumOct 18.2019 — Thanks for this information, now I understand better. Interesting task. From my knowledge D3 is not necessary for coding this. Or do you have any contraints for using it? Or do you intend to use an interactive 3D map or rotating globe?

My proposal: Use an SVG map like this:

https://commons.wikimedia.org/wiki/File:BlankMap-World.svg

In this map each country has an ID and various classes. You can add an event handler for click for each country. This handler can open your dialog first for entering the parameters and then the data in detail.
Copy linkTweet thisAlerts:
@IgnoramusOfTheLawauthorOct 18.2019 — @Sempervivum#1610186 I have to say, this looks good. It appears that the title attribute is spelled the same as the data.country value in my data set. I assume this could make my life easier as I could use a querySelector to select the title and add an onClick method.

Is there a way I could use d.country in JS when selecting the title?

As in the following example var node = document.querySelector('[title="**element title attribute value**"]');, having my selector instead of element title attribute value?
Copy linkTweet thisAlerts:
@SempervivumOct 18.2019 — Is there a way I could use d.country in JS when selecting the title?[/quote]Yes, you can use querySelector just the way you posted. Didn't it work?
Copy linkTweet thisAlerts:
@SempervivumOct 18.2019 — PS: One issue might be that you cannot access the dom when an svg map is included by use of the src in an img tag.
Copy linkTweet thisAlerts:
@SempervivumOct 19.2019 — PPS: In the meantime I noticed that I was wrong: `title` is not an attribute but a tag containing the name of the country. You might use jQuery's content selector or code a loop that finds the element.
Copy linkTweet thisAlerts:
@SempervivumOct 19.2019 — PPPS: I would do it the other way round: Add eventlisteners to all groups and make the country available inside:
&lt;?php
include 'images/BlankMap-World.svg';
?&gt;
&lt;script&gt;
const titles = document.querySelectorAll('svg title');
for (let i = 0; i &lt; titles.length; i++) {
let group = titles[i].parentNode,
country = titles[i].textContent;
if (country != 'World Map') {
group.addEventListener('click', function () {
console.log(country);
// country is now available for further processsing
});
}
}
&lt;/script&gt;
×

Success!

Help @IgnoramusOfTheLaw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...