Vector.js

Vector is an open source javascript library for creating interactive graphics. View the repository, browse the API, run the tests, or meet the team.

Population Density of the United States Open in Sandbox

Description

Every state of the United States colored by population density.

Script

/**
* @title Population Density of the United States
* @description Every state of the United States colored by population density.
* @input Input the name of the map you want to see, and the size of the map.
* @tags [maps]
* @weight 1
*/
import { Interactive, getScriptName } from '../../index.js';
import * as data from './maps-json.js';
import { usDensityMap as densityMap } from './us-pop-density.js';
let interactive = new Interactive(getScriptName());
interactive.root.style.border = "1px solid grey";
let map = interactive.map(data.usData);
let hover = interactive.hoverBox("");
hover.setBounds(interactive.width, interactive.height);
let states = map.getAllFeaturePaths();
states.forEach(element => {
    element.setAttribute("style", `stroke:black;stroke-width:0.15px;fill:${getColor(densityMap[element.root.getAttribute("name")])};`);
    element.root.addEventListener('mousemove', e => {
        let x = e.clientX - interactive.root.getBoundingClientRect().left;
        let y = e.clientY - interactive.root.getBoundingClientRect().top;
        hover.updatePosition(x, y);
    });
    element.root.addEventListener("mouseenter", function () {
        element.setAttribute("style", `stroke:black;stroke-width:0.35px;fill:#ff8e61;`);
        hover.setText(element.root.getAttribute('name') + ': ' + densityMap[element.root.getAttribute("name")]);
        hover.showHoverBox();
    });
    element.root.addEventListener("mouseleave", function () {
        element.setAttribute("style", `stroke:black;stroke-width:0.15px;fill:${getColor(densityMap[element.root.getAttribute("name")])};`);
        hover.hideHoverBox();
    });
});
function getColor(d) {
    return d > 1000 ? '#0022ff' :
        d > 500 ? '#1971ff' :
            d > 200 ? '#458cff' :
                d > 100 ? '#6ea5ff' :
                    d > 50 ? '#87b5ff' :
                        d > 20 ? '#a1c5ff' :
                            d > 10 ? '#a1c5ff' :
                                d < 5 ? '#ffffff' :
                                    '#e6efff';
}
//# sourceMappingURL=population-of-united-states.js.map