Appearance

On this page

Charts > Catalonia map ​

A Catalonia 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 ​

Style

Color for borders
Min and max color for color scale

Usage Example (with tooltip) ​

vue
<template>
  <CataloniaMap @hover="setTooltip" :data="data" />

  <OTTooltip :info="tooltip">
    {{ tooltip?.data?.properties?.nom }}
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API ​

The map is built with d3 and SVG using a TopoJSON file. Store the TopoJSON file insrc/assets/maps, or change the import statements in the component file.

Data ​

js
{
  ESP: 40,
  PRT: 35,
  FRA: 55,
  ...
}

Props ​

NameDefaultDescriptionType
data{}The dataset with ids as keysObject
strokeColorwhiteThe color of the bordersString
highlightColorblackThe stroke color for the highlighted regionString
noDataColor#eeeThe color for regions without dataString
adjustSizetrueWhether or not the map should adapt to a set height/widthBoolean
maxZoom16The maximum zoom levelNumber
zoomScale1The zoom scale factorNumber
color{ min: '#eff3ff', max: '#084594' }The colors for linear color scale or custom color functionObject | Function
selectednullThe id of comarca to zoom in onString | Number

Events ​

NameArgumentDescription
@select{ target, data } Emitted when region is clicked
@hover{ target, data } | null Emitted when region is hovered

Dependencies ​

  • d3
  • topojson-client
  • cat_munis.json