Giter Site home page Giter Site logo

japancitygeojson's Introduction

JapanCityGeoJson 2016

47都道府県の県・市・町・村・郡・区の形を作るためのGeoJsonデータTopoJsonデータです。

国土数値情報 (JPGIS2.1(GML)準拠及びSHAPE形式データ) 国土交通省

国土交通省国土政策局GISHP http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03.html

GeoJson http://geojson.org/

TopoJson https://github.com/mbostock/topojson

TopoJson

D3.js

D3.jsでtokyo23区のtopojsonを使用してみます。

Screencast

<style>
    body {background: pink;}
    .tokyo23-13101 {fill: red;}
    .tokyo23-13102 {fill: blue;}
    .tokyo23-13103 {fill: green;}
    .tokyo23-13104 {fill: orange;}
    .tokyo23-13105 {fill: blueviolet;}
    .tokyo23-13106 {fill: azure;}
    .tokyo23-13107 {fill: forestgreen;}
    .tokyo23-13108 {fill: tomato;}
    .tokyo23-13109 {fill: lightyellow;}
    .tokyo23-13110 {fill: yellow;}
    .tokyo23-13111 {fill: crimson;}
    .tokyo23-13112 {fill: forestgreen;}
    .tokyo23-13113 {fill: red;}
    .tokyo23-13114 {fill: skyblue;}
    .tokyo23-13115 {fill: palegoldenrod;}
    .tokyo23-13116 {fill: red;}
    .tokyo23-13117 {fill: maroon;}
    .tokyo23-13118 {fill: royalblue;}
    .tokyo23-13119 {fill: lawngreen;}
    .tokyo23-13120 {fill: darkblue;}
    .tokyo23-13121 {fill: darkmagenta;}
    .tokyo23-13122 {fill: cornsilk;}
    .tokyo23-13123 {fill: aqua;}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript" src="data/tokyo23_topojson.js"></script>
<script>
var width = 800, height = 500;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var id = 'tokyo23';
var tokyo23 = topojson.feature(json, json.objects[id]);
var bounds = d3.geo.bounds(tokyo23);
var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
  centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;
var projection = d3.geo.mercator()
    .scale(70000)
    .center([centerX, centerY]);

svg.selectAll("path")
    .data(tokyo23.features).enter().append("path")
    .attr("d", d3.geo.path().projection(projection))
    .attr("class", function(d) { return 'tokyo23-' + d.id; });
</script>

市町村郡区シェイプ確認デモ(GoogleMap)

http://geojson.niiyz.com/

データ更新手順

https://github.com/niiyz/JapanCityGeoJson/wiki/データ更新手順

japancitygeojson's People

Contributors

furyutei avatar niiyz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.