Choropleth Map with Interactive Filtering

index.js

import {

select,

scaleOrdinal,

schemeSpectral

} from 'd3';

import { loadAndProcessData } from './loadAndProcessData';

import { colorLegend } from './colorLegend';

import { choroplethMap } from './choroplethMap';

const svg = select('svg');

const choroplethMapG = svg.append('g');

const colorLegendG = svg.append('g')

.attr('transform', `translate(40,310)`);

const colorScale = scaleOrdinal();

// const colorValue = d => d.properties.income_grp;

const colorValue = d => d.properties.economy;

let selectedColorValue;

let features;

const onClick = d => {

selectedColorValue = d;

render();

};

loadAndProcessData().then(countries => {

features = countries.features;

render();

});

const render = () => {

colorScale

.domain(features.map(colorValue))

.domain(colorScale.domain().sort().reverse())

Last edited Jan 08, 2020

Created on Sep 27, 2018

A choropleth map where you can hover over items in the color legend items to interactively filter!

MIT Licensed