vue-datamaps

KO | EN

gitlite — search

#python #react #typescript #llm #golang #android #machine-learning #rust #deep-learning #linux #cli #kubernetes #awesome-list #mcp

(★ 19)

It is a Vue port of the javascript-based DataMaps

vue-datamaps 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue Datamaps

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](https://raw.githubusercontent.com/Seungwoo321/vue-datamaps/master/)

It is a Vue port of the javascript-based [DataMaps](https://datamaps.github.io/)

[![npm](https://flat.badgen.net/npm/v/vue-datamaps)](https://npmjs.com/package/vue-datamaps)
[![npm](https://flat.badgen.net/npm/dt/vue-datamaps)](https://npmjs.com/package/vue-datamaps)
[![npm](https://flat.badgen.net/npm/license/vue-datamaps)](https://flat.badgen.net/npm/license/vue-datamaps)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-datamaps/badge)](https://www.jsdelivr.com/package/npm/vue-datamaps)

## Contributors

<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://seungwoo321.github.io"><img src="https://avatars.githubusercontent.com/u/13829929?v=4?s=100" width="100px;" alt="Seungwoo321"/><br /><sub><b>Seungwoo321</b></sub></a><br /><a href="https://github.com/Seungwoo321/vue-datamaps/commits?author=Seungwoo321" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/hyemyn2"><img src="https://avatars.githubusercontent.com/u/67949202?v=4?s=100" width="100px;" alt="hyemyn2"/><br /><sub><b>hyemyn2</b></sub></a><br /><a href="https://github.com/Seungwoo321/vue-datamaps/commits?author=hyemyn2" title="Code">💻</a></td>
    </tr>
  </tbody>
</table>

## Live demo

[link](https://jsfiddle.net/front123/437a5wvf/)

## Run demo

```bash
# project clone
$ git clone https://github.com/Seungwoo321/vue-datamaps.git

# install dependencies
$ npm install

# run
$ npm run dev
```

## Installation

```bash
# install
$ npm install vue-datamaps
```

## Base Usage

### Required

* json data is no longer required.

#### Global

main.js

```js
import Vue from 'vue'
import VueDatamaps from 'vue-datamaps'

Vue.use(VueDatamaps)

```

vue template

```vue
<template>
    <div id="app">
        <vue-datamaps></vue-datamaps>
    </div>
</template>
```

#### Component Style

vue template

```vue
<template>
    <div id="app">
        <vue-datamaps></vue-datamaps>
    </div>
</template>
<script>
import { VueDatamaps } from 'vue-datamaps'
export default {
    components: {
        VueDatamaps
    }
}
</script>
```

## Example

![vue-datamaps-demo-basic.png](https://seungwoo321.github.io/vue-datamaps-demo-basic.png)

```vue
<template>
  <div>
    <h4>Basic:</h4>
    <vue-datamaps/>
  </div>
</template>

<style>

</style>
```

![vue-datamaps-demo-state-label.png](https://seungwoo321.github.io/vue-datamaps-demo-state-label.png)

```vue
<template>
  <div>
    <h4>State Labels:</h4>
    <vue-datamaps
        labels
        :scope="scope"
        :geographyConfig="geographyConfig"
        :fills="fills"
        :data="data"
        popupTemplate
        @custom:popup="popupTemplate"
    >
        <div slot="hoverinfo" class="hoverinfo" style="white-space: pre-line;">
            {{ popupData }}
        </div>
    </vue-datamaps>
  </div>
</template>

<style>

</style>

```

![vue-datamaps-demo-bubbles.png](https://seungwoo321.github.io/vue-datamaps-demo-bubbles.png)

```vue
<template>
  <div>
    <h4>Bubbles:</h4>
    <vue-datamaps
      :geographyConfig="geographyConfig"
      :bubblesConfig="bubblesConfig"
      :fills="fills"
      @custom:popup-bubble="popupTemplate"
      bubbles
    >
      <div slot="hoverBubbleInfo" class="hoverinfo" style="text-align:center;">
          <b>Yield</b>: {{ popupData.yeild }}<br>
          Exploded on {{ popupData.date }} by the {{ popupData.country }}
      </div>
    </vue-datamaps>
  </div>
</template>

<style>

</style>

```

![vue-datamaps-demo-arcs.png](https://seungwoo321.github.io/vue-datamaps-demo-arcs.png)

```vue
<template>
  <div>
    <h4>Arcs:</h4>
    <vue-datamaps
      :scope="scope"
      :fills="fills"
      :data="data"
      :geographyConfig="geographyConfig"
      :arcConfig="arcConfig"
      arc
    />
  </div>
</template>

<style>

</style>

```

![vue-datamaps-demo-graticules.png](https://seungwoo321.github.io/vue-datamaps-demo-graticules.png)

```vue
<template>
  <div>
    <h4>Projections & Graticules:</h4>
    <vue-datamaps
      :scope="scope"
      :projection="projection"
      :projectionConfig="projectionConfig"
      :fills="fills"
      :data="data"
      :arcConfig="arcConfig"
      arc
    />
  </div>
</template>

<style>

</style>
```

![vue-datamaps-demo-zoom.png](https://seungwoo321.github.io/vue-datamaps-demo-zoom.png)

```vue
<template>
  <div>
    <h4>Zoom:</h4>
    <vue-datamaps
      :scope="scope"
      :data="data"
      :fills="fills"
      :bubblesConfig="bubblesConfig"
      bubbles
      @custom:popup-bubble="popupTemplate"
      :setProjection="setProjection('zoom')"
    >
      <div slot="hoverBubbleInfo" class="hoverinfo" style="text-align:center;">
        {{ popupData.name }}
      </div>
    </vue-datamaps>
  </div>
</template>

<style>

</style>
```

![vue-datamaps-demo-south-korea.png](https://seungwoo321.github.io/vue-datamaps-demo-south-korea.png)

```vue
<template>
  <div>
    <h4>South Korea:</h4>
    <vue-datamaps
        :scope="scope"
        :setProjection="setProjection('korea')"
        :fills="fills"
        :data="data"
    />
  </div>
</template>

<style>

</style>
```

![vue-datamaps-demo-custom-color.png](https://seungwoo321.github.io/vue-datamaps-demo-custom-color.png)

```vue
<template>
    <div>
        <h4>Custom Color:</h4>
        <vue-datamaps
            :fills="fills"
            :data="data"
            :geographyConfig="geographyConfig"
            bubbles
            :bubblesConfig="bubblesConfig"
        />
    </div>
</template>

<style>

</style>
```

![vue-datamaps-demo-aws-region.png](https://seungwoo321.github.io/vue-datamaps-demo-aws-region.png)

```vue
<template>
  <div>
    <h4>AWS Region:</h4>
    <vue-datamaps
        :geographyConfig="geographyConfig"
        :fills="fills"
        :arcConfig="arcConfig"
        arc
        aws-regions
        :awsRegionsConfig="awsRegionsConfig"
        @custom:popup-arc="popupTemplate"
    >
      <div slot="hoverArcInfo" class="hoverinfo">
        <strong>{{ popupData.title }}</strong><br>
        {{ popupData.origin }} ▶▶▶ {{ popupData.destination }}
      </div>
    </vue-datamaps>
  </div>
</template>

<style>

</style>
```

## Available Props Option

### scope

* type: __String__
* value: __world__, __usa__, __custom_map__

Same as the original.

### setProjection

* type: __Function__
* value: __See sample code.__

Same as original but d3 version different.

### projection

* type: __String__
* value: __Equirectangular__, __Orthographic__, __Mercator__

Same as original but PascalCase.

### dataType

* type: __String__
* value __json__, __csv__

Same as original.

### data

* type: __Object__
* value: __See sample code.__

Same as original.

### done

* type: __Function__

Not implemented.

### fills

* type: Object
* value: __The keys in this object map to the "fillKey" of [data] or [data of bubbles]__

Same as original.

### geographyConfig

* type: __Object__
* value: __See sample code.__

Same as original but not include `popupTemplate`.

### bubblesConfig

* type: __Object__
* value: __See sample code.__

Same as original but not include `popupTemplate`.

### bubbles

* type: __Boolean__
* value: __true__, __false__
If `bubblesConfig` required.

### arcConfig

* type: __Object__
* value: __See sample code.__

Same as original but not include `popupTemplate`.

### arc

* type: __Boolean__
* value: __true__, __false__

If `arcConfig` required.

### disableDefaultStyles

* type: __Boolean__
* value: __true__, __false__

Not implemented.

### labelsConfig

* type: __Object__
* value: __See sample code.__

Same as original.

### labels

* type: __Boolean__
* value: __true__, __false__

If `labelsConfig` required.

### popupTemplate

* type: __Boolean__
* value: __true__, __false__

If slot `hoverinfo` and event `custom:popup`||`custom:popup-bubble`||`custom:popup-arc`||`custom:popup-region`|| required.

## Default Props Option

```js
{
  scope: 'world',
  setProjection: (d3, element) => {
    let projection = null
    let path = null
    if (this.scope === 'usa') {
        projection = d3.geoAlbersUsa()
            .scale(this.svgWidth)
            .translate([this.svgWidth / 2, this.svgHeight / 2])
    } else if (this.scope === 'world') {
        projection = d3[`geo${this.projection}`]()
            .scale((this.svgWidth + 1) / 2 / Math.PI)
            .translate([this.svgWidth / 2, this.svgHeight / (this.projection === 'Mercator' ? 1.45 : 1.8)])
    }
    if (this.projection === 'Orthographic') {
        this.svg.append('defs').append('path')
            .datum({ type: 'Sphere' })
            .attr('id', 'sphere')
            .attr('d', path)

this.svg.append('use')
            .attr('class', 'stroke')
            .attr('xlink:href', '#sphere')

this.svg.append('use')
            .attr('class', 'fill')
            .attr('xlink:href', '#sphere')
        projection.scale(this.svgWidth / Math.PI * 0.9).clipAngle(90).rotate(this.projectionConfigOptions.rotation)
    }

path = d3.geoPath()
        .projection(projection)
    return { projection, path }
  },
  projection: 'Equirectangular',
  dataType: 'json',
  data: {},
  done: function () {
    return {}
  },
  fills: {
    authorHasTraveledTo: '#fa0fa0',
    defaultFill: '#ABDDA4'
  },
  geographyConfig: {
    dataUrl: null,
    hideAntarctica: true,
    hideHawaiiAndAlaska: false,
    borderWidth: 1,
    borderOpacity: 1,
    borderColor: '#FDFDFD',
    popupOnHover: true,
    highlightOnHover: true,
    highlightFillColor: '#FC8D59',
    highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
    highlightBorderWidth: 2,
    highlightBorderOpacity: 1,
    highlightFillOpacity: 0.85
  },
  projectionConfig: {
    rotation: [97, 0]
  },
  bubblesConfig: {
    borderWidth: 2,
    borderOpacity: 1,
    borderColor: '#FFFFFF',
    popupOnHover: true,
    radius: null,
    fillOpacity: 0.75,
    animate: true,
    highlightOnHover: true,
    highlightFillColor: '#FC8D59',
    highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
    highlightBorderWidth: 2,
    highlightBorderOpacity: 1,
    highlightFillOpacity: 0.85,
    exitDelay: 100,
    key: JSON.stringify,
    data: []
  },
  bubbles: false,
  arcConfig: {
    strokeColor: '#DD1C77',
    strokeWidth: 1,
    arcSharpness: 1,
    animationSpeed: 600,
    popupOnHover: false,
    data: []
  },
  arc: false,
  disableDefaultStyles: false,
  labelsConfig: {
    fontSize: 10,
    fontFamily: 'Verdana',
    labelColor: '#000',
    lineWidth: 1
  },
  labels: false,
  popupTemplate: false,
  awsRegions: false,
  awsRegionsConfig: {
    strokeColor: '#0b5fd6',
    strokeWidth: 1.5,
    defaultFill: 'transparent',
    highlightFillOpacity: 1,
    showPrivateRegions: false,
    popupOnHover: false,
    data: []
  }
}

```

## Slot & Event for @mouseover

* when geography mouse hover:
  * slot: `hoverinfo`
  * event: `custom:popup`

```html
  <div slot="hoverinfo" class="hoverinfo" style="text-align:center;">
    
  </div>
```

* when bubbles mouse hover:
  * slot: `hoverBubbleInfo`
  * event: `custom:popup-bubble`

```html
  <div slot="hoverBubbleInfo" class="hoverinfo" style="text-align:center;">
    
  </div>
```

* when arc mouse hover:
  * slot: `hoverArcInfo`
  * event: `custom:popup-arc`

```html
  <div slot="hoverArcInfo" class="hoverinfo" style="text-align:center;">
    
  </div>
```

* when aws-region mouse hover

* slot: `hoverRegionInfo`
  * event: `custom:popup-region`

```html
  <div slot="hoverRegionInfo" class="hoverinfo" style="text-align:center;">
    
  </div>
```

## Inspired

* [markmarkoh/datamaps](https://datamaps.github.io/) - original
* [btmills/react-datamaps](https://github.com/btmills/react-datamaps) - React-based datamaps library
* [jsonmaur/aws-regions](https://github.com/jsonmaur/aws-regions) - AWS Regions and Availability Zones

## License

MIT

vue-datamaps

vue-datamaps 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vue-datamaps

vue-datamaps 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README