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.

Load External SVG Open in Sandbox

Description

This interactive demonstrates how to load and use an external svg.

Script

/**
* @title Load External SVG
* @description This interactive demonstrates how to load and use an external svg.
* @tags [svg, maps]
*/
import { Interactive, getScriptName } from '../../index.js';
import { getURL } from '../../util/file.js';
import { parseSVG } from '../../util/svg.js';
let map = getURL('/maps/united-states.svg');
let data = getURL('/maps/us-population-data.json');
Promise.all([map, data]).then(function (response) {
    let myInteractive = new Interactive(getScriptName(), {
        width: 736,
        height: 400
    });
    let svg = myInteractive.background.root.appendChild(parseSVG(response[0]));
    let bbox = svg.getBBox();
    myInteractive.setViewBox(bbox.x, bbox.y, bbox.width, bbox.height);
    let json = JSON.parse(response[1]);
    // calculate the min, max, and range of population
    let max = json.data[0].Population;
    let min = json.data[json.data.length - 1].Population;
    let range = max - min;
    // loop through the states an color each based on their population
    for (let i = 0; i < json.data.length; i++) {
        let population = json.data[i].Population;
        let value = (population - min) / range;
        let state = svg.querySelector(`#${json.data[i].ID}`);
        let color = 255 - value * 255;
        state.style.fill = `rgb(${color} ${color} ${255})`;
    }
}).catch(function (error) {
    throw error;
});
//# sourceMappingURL=load-external-svg.js.map