Appearance
Charts > Spain map
A Spain map that visually represents geographical data by mapping it onto a geographic layout, using colors to indicate different values or categories.
The Chart
Download example CSV
Copy HTML
Playground
Data
Level of granularity
Style
Min and max color for color scale
Color for borders
Component API
The map is built with d3 and SVG using TopoJSON files. Store the TopoJSON files in src/assets/maps, or change the import statements in the component file. If you only need provinces or regions, you can remove the import for the file you don't need.
Usage Example (with tooltip)
vue
<template>
<SpainMap :data="data" @hover="setTooltip" :highlighted="highlighted" />
<OTTooltip :info="tooltip">
{{ tooltip.data.properties.name }}
</OTTooltip>
</template>
<script setup>
import OTTooltip from "../../../src/components/OTTooltip.vue";
import useTooltip from "@/functions/useTooltip.js";
const [tooltip, setTooltip] = useTooltip();
const highlighted = ref(null);
</script>Data
js
{
ESP: 40,
PRT: 35,
FRA: 55,
...
}Props
| Name | Default | Description | Type |
|---|---|---|---|
| data | {} | The dataset | Object |
| color | { min: '#e9f3eb', max: '#086f54' } | The colors for linear color scale or custom color function | Object | Function |
| strokeColor | white | The color of the borders | String |
| highlightColor | black | The stroke color for the highlighted region | String |
| noDataColor | #eee | The color for regions without data | String |
| maxHeight | 450 | The maximum height of the map (if adjustSize is true) | Number |
| duration | 500 | The time of the color changing animation in ms | Number |
| highlighted | null | The id of the highlighted region | String |
| adjustSize | true | Whether or not the map should adapt to a set height/width | Boolean |
| level | regions | The level of granularity (provinces or regions) | String |
Events
| Name | Argument | Description |
|---|---|---|
@select | { target, data } | Emitted when region is clicked |
@hover | { target, data } | null | Emitted when region is hovered |
Dependencies
- d3
- d3-composite-projections
- topojson-client
- spain_provinces.json
- spain_regions.json
- morocco.json
- slugify function (see
utils/helpers)