Gathering detailed insights and metrics for vue-d3-geo
Gathering detailed insights and metrics for vue-d3-geo
Installations
npm install vue-d3-geoDeveloper
komushi
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
14.5.0
NPM Version
7.12.1
Statistics
5 Stars
77 Commits
3 Watching
14 Branches
1 Contributors
Updated on 02 Nov 2022
Languages
Vue (98.37%)
JavaScript (1.22%)
HTML (0.41%)
Total Downloads
Cumulative downloads
Total Downloads
12,529
Last day
20%
6
Compared to previous day
Last week
-16.7%
15
Compared to previous week
Last month
170%
81
Compared to previous month
Last year
-40.4%
944
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
5
Peer Dependencies
3
Versions
vue-d3-geo
A d3-geo Vue.js Library.
What is D3.js?
D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data. D3.js
What is d3-geo?
D3 uses GeoJSON or TopoJSON to represent geographic features in JavaScript. It provides Geographic projections, shapes and math. d3-geo
What is Vue.js?
Vue is a progressive framework for building user interfaces. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. Vue.js
To quickly create a Vue.js application please follow this tutorial. After the application is generated as a boilerplate you can easily integrate vue-d3-geo in it. Vue.js
What is vue-d3-geo?
It includes d3-geo features and provides several use-cases/examples as Vue.js library. D3.js is pure javascript library and to use it with frameworks like Vue.js, React or Angular it is needed to wrap the library in a certain format of a specific framework.
What does vue-d3-geo provide?
vue-d3-geo does not provide all the features of d3-geo but provide the several features as example. It is recommend to fork this project and generate your own feature
-
D3GeoStatic: Static View will draw single-layer geometry shapes such as a state, a continent. You can use your own geojson/topojson to show anything you want.
-
D3GeoDoubleLayer: Static View will draw double-layer geometry shapes such as a continent. By clicking a country in the continent the view will zoom-in to the specific country and to show provinces. Of course your geojson need to contain the countries and the provinces information*
-
D3GeoEvents: Events View will draw single-layer or double-layer geometry shapes. The point for this feature is to show event-driven information in a geospatial view such as real-time analytics result visualized on a map as a real-time monitoring dashboard. Please check the demo step below to see some examples with mock-up streaming data. AWS AppSync and AWS IoT can be used in these use cases to feed real-time streaming information to your Vue application - this topic is out of scope and will be provided as another artifact.
-
D3GeoLeaf: Draw geometry shapes on top of the Leaflet view. Leaflet is an open-source JavaScript library for interactive maps. The use-cases include drawing a road's or subway's geometry shapes with statistical values. Normally used in monitoring dashboard.
Some screenshots
1. For Users to see the demo(using live-server or host it as a static web app)
1-1. Install node.js 12+ and live-server
node.js installation live-server installation
1-2. Clone this repo and run the demo
live-server command will prompt you the link to call in the browser.
$ cd vue-d3-geo/demo
$ live-server
2. For Users to use the components
2-1. Install
npm install --save vue-d3-geo
2-2. Add d3-geo components in your vue's template
Default single-layer Tokyo map
<template>
<div>
...
<d3-geo-static
id="01"
topojson-path="data/tokyo_23_blocks_districts_final.json"
>
</d3-geo-static>
....
</div>
</template>
Default double-layer Tokyo map
<template>
<div>
...
<d3-geo-double-layer
id="01"
topojson-path="data/tokyo_23_blocks_districts_final.json"
>
</d3-geo-double-layer>
....
</div>
</template>
2-3. Add d3-geo components in your vue's script
<script>
...
import * as d3geo from 'vue-d3-geo';
import 'vue-d3-geo/dist/vue-d3-geo.css';
export default {
...
components: {
...
D3GeoDoubleLayer: d3geo.D3GeoDoubleLayer,
D3GeoEvents: d3geo.D3GeoEvents,
D3GeoStatic: d3geo.D3GeoStatic,
}
}
</script>
2-4. Use your own maps
3. For Developers
Fork this repo and add your own components under src/components
3-1. Compiles and hot-reloads for development
npm run serve
3-2. Compiles and minifies for production
npm run build
3-3. Lints and fixes files
npm run lint
Customization configuration references
- https://qiita.com/coppieee/items/dcf120d6b8eef68ecb34
- https://cli.vuejs.org/guide/build-targets.html
- https://github.com/awaigand/vue-cli-target-lib-example/
4. TODO
http://www.geonet.ch/basic-leaflet-map-with-d3-overlay/ https://shimz.me/blog/d3-js/3517 http://bl.ocks.org/shimizu/749df041c1945aef78fd992c7dfbe0e1 https://travishorn.com/interactive-maps-with-vue-leaflet-5430527353c8
4-1. fix mouseover for D3GeoLeaf
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/8 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
65 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-36jr-mh4h-2g58
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.3
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More