index.js
d3.csv(
'https://raw.githubusercontent.com/Dastair/languageData/main/data.csv',
function (err, rows) {
function unpack(rows, key) {
return rows.map(function (row) {
return row[key];
});
}
/* Unable to just append the name and "Number of Speakers" to the tooltips
Inherently so I figured out this work around. A bit janky but it works
*/
var names = unpack(rows, 'Name in English');
var speak = unpack(rows, 'Number of speakers');
var tooltips = [];
for (var i = 0; i < names.length; i++) {
var currentName = names[i];
var currentSpeak = speak[i];
if (currentSpeak === '') {
currentSpeak = 0;
}
var currentText =
currentName + ' - Speakers: ' + currentSpeak;
tooltips.push(currentText);
}
var data = [
{
type: 'scattermapbox',
text: tooltips,
lon: unpack(rows, 'Longitude'),
lat: unpack(rows, 'Latitude'),
marker: {
size: 8,
opacity: 0.5,
},
transforms: [
A bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed