<script>
import { LayerCake, Svg, Canvas, Html } from 'layercake';
import { feature } from 'topojson-client';
import { geoAlbersUsa } from 'd3-geo';
import { scaleQuantize } from 'd3-scale';
// For a map example with a tooltip, check out https://layercake.graphics/example/MapSvg
import MapSvg from './Map.svg.svelte';
import MapCanvas from './Map.canvas.svelte';
import MapLabels from './MapLabels.html.svelte';
// In your local project, you will more likely be loading this as a csv and converting it to json using @rollup/plugin-dsv
import usStates from './us-states-topojson.js';
import stateData from './us-states-data.js';
import stateLabels from './us-states-labels.js';
const colorKey = 'myValue';
const labelCoordinatesKey = 'center';
const labelNameKey = 'abbr';
const geojson = feature(usStates, usStates.objects.collection);
const projection = geoAlbersUsa;
/* --------------------------------------------
* Create lookups to more easily join our data
* `dataJoinKey` is the name of the field in the data
* `mapJoinKey` is the name of the field in the map file
*/
const dataJoinKey = 'name';
const mapJoinKey = 'name';
const dataLookup = new Map();
stateData.forEach(d => {
dataLookup.set(d[dataJoinKey], d[colorKey]);
});