Squaire.jsのカスタムマップ機能を使って作成した日本のスクエアビンマップ。
各都道府県のレイアウトは下記を参考にさせていただいた。
Last active
July 27, 2016 03:07
-
-
Save shimizu/661f5e59ec3e848ad764 to your computer and use it in GitHub Desktop.
Square bin map - japan
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"/> | |
| <title>Square bin map - japan</title> | |
| <link rel="stylesheet" href="http://wsj.github.io/squaire/dist/squaire.css"/> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript" charset="utf-8" src="http://wsj.github.io/squaire/dist/squaire.js"></script> | |
| <style> | |
| <style> | |
| #wrapper { | |
| width:900px; | |
| } | |
| #custom-layout { | |
| width:40%; | |
| margin: 0 auto | |
| } | |
| .squaire text { | |
| font-size: 10px ; | |
| } | |
| </style> | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div id="custom-layout-toolbox"></div> | |
| <div id="custom-layout"></div> | |
| </div> | |
| <script> | |
| var customLabels = { | |
| "hokkaido" : { | |
| "full" : "北海道", | |
| }, | |
| "aomori" : { | |
| "full" : "青森", | |
| }, | |
| "akita" : { | |
| "full" : "秋田", | |
| }, | |
| "iwate" : { | |
| "full" : "岩手", | |
| }, | |
| "yamagata" : { | |
| "full" : "山形", | |
| }, | |
| "miyagi" : { | |
| "full" : "宮城", | |
| }, | |
| "niigata" : { | |
| "full" : "新潟", | |
| }, | |
| "fukushima" : { | |
| "full" : "福島", | |
| }, | |
| "yamaguchi" : { | |
| "full" : "山口", | |
| }, | |
| "shimane" : { | |
| "full" : "島根", | |
| }, | |
| "tottori" : { | |
| "full" : "鳥取", | |
| }, | |
| "hyogo" : { | |
| "full" : "兵庫", | |
| }, | |
| "fukui" : { | |
| "full" : "福井", | |
| }, | |
| "isikawa" : { | |
| "full" : "石川", | |
| }, | |
| "toyama" : { | |
| "full" : "富山", | |
| }, | |
| "nagano" : { | |
| "full" : "長野", | |
| }, | |
| "gunma" : { | |
| "full" : "群馬", | |
| }, | |
| "tochigi" : { | |
| "full" : "栃木", | |
| }, | |
| "saga" : { | |
| "full" : "佐賀", | |
| }, | |
| "fukuoka" : { | |
| "full" : "福岡", | |
| }, | |
| "hiroshima" : { | |
| "full" : "広島", | |
| }, | |
| "okayama" : { | |
| "full" : "岡山", | |
| }, | |
| "osaka" : { | |
| "full" : "大阪", | |
| }, | |
| "kyoto" : { | |
| "full" : "京都", | |
| }, | |
| "shiga" : { | |
| "full" : "滋賀", | |
| }, | |
| "gifu" : { | |
| "full" : "岐阜", | |
| }, | |
| "yamanashi" : { | |
| "full" : "山梨", | |
| }, | |
| "saitama" : { | |
| "full" : "埼玉", | |
| }, | |
| "ibaraki" : { | |
| "full" : "茨城", | |
| }, | |
| "nagasaki" : { | |
| "full" : "長崎", | |
| }, | |
| "kumamoto" : { | |
| "full" : "熊本", | |
| }, | |
| "oita" : { | |
| "full" : "大分", | |
| }, | |
| "wakayama" : { | |
| "full" : "和歌山", | |
| }, | |
| "nara" : { | |
| "full" : "奈良", | |
| }, | |
| "mie" : { | |
| "full" : "三重", | |
| }, | |
| "aichi" : { | |
| "full" : "愛知", | |
| }, | |
| "sizuoka" : { | |
| "full" : "静岡", | |
| }, | |
| "tokyo" : { | |
| "full" : "東京", | |
| }, | |
| "chiba" : { | |
| "full" : "千葉", | |
| }, | |
| "kagoshima" : { | |
| "full" : "鹿児島", | |
| }, | |
| "miyazaki" : { | |
| "full" : "宮崎", | |
| }, | |
| "ehime" : { | |
| "full" : "愛媛", | |
| }, | |
| "kagawa" : { | |
| "full" : "香川", | |
| }, | |
| "kanagawa" : { | |
| "full" : "神奈川", | |
| }, | |
| "kouchi" : { | |
| "full" : "高知", | |
| }, | |
| "tokushima" : { | |
| "full" : "徳島", | |
| }, | |
| "okinawa" : { | |
| "full" : "沖縄", | |
| }, | |
| } | |
| var customData = { | |
| "hokkaido" : { | |
| "value": 1, | |
| }, | |
| "aomori" : { | |
| "value": 1, | |
| }, | |
| "akita" : { | |
| "value": 1, | |
| }, | |
| "iwate" : { | |
| "value": 2, | |
| }, | |
| "yamagata" : { | |
| "value": 2, | |
| }, | |
| "miyagi" : { | |
| "value": 1, | |
| }, | |
| "niigata" : { | |
| "value": 1, | |
| }, | |
| "fukushima" : { | |
| "value": 1, | |
| }, | |
| "yamaguchi" : { | |
| "value": 1, | |
| }, | |
| "shimane" : { | |
| "value": 1, | |
| }, | |
| "tottori" : { | |
| "value": 1, | |
| }, | |
| "hyogo" : { | |
| "value": 1, | |
| }, | |
| "fukui" : { | |
| "value": 2, | |
| }, | |
| "isikawa" : { | |
| "value": 1, | |
| }, | |
| "toyama" : { | |
| "value": 1, | |
| }, | |
| "nagano" : { | |
| "value": 2, | |
| }, | |
| "gunma" : { | |
| "value": 1, | |
| }, | |
| "tochigi" : { | |
| "value": 1, | |
| }, | |
| "saga" : { | |
| "value": 1, | |
| }, | |
| "fukuoka" : { | |
| "value": 1, | |
| }, | |
| "hiroshima" : { | |
| "value": 2, | |
| }, | |
| "okayama" : { | |
| "value": 1, | |
| }, | |
| "osaka" : { | |
| "value": 2, | |
| }, | |
| "kyoto" : { | |
| "value": 1, | |
| }, | |
| "shiga" : { | |
| "value": 1, | |
| }, | |
| "gifu" : { | |
| "value": 1, | |
| }, | |
| "yamanashi" : { | |
| "value": 1, | |
| }, | |
| "saitama" : { | |
| "value": 1, | |
| }, | |
| "ibaraki" : { | |
| "value": 1, | |
| }, | |
| "nagasaki" : { | |
| "value": 1, | |
| }, | |
| "kumamoto" : { | |
| "value": 2, | |
| }, | |
| "oita" : { | |
| "value": 1, | |
| }, | |
| "wakayama" : { | |
| "value": 2, | |
| }, | |
| "nara" : { | |
| "value": 1, | |
| }, | |
| "mie" : { | |
| "value": 1, | |
| }, | |
| "aichi" : { | |
| "value": 2, | |
| }, | |
| "sizuoka" : { | |
| "value": 1, | |
| }, | |
| "tokyo" : { | |
| "value": 3, | |
| }, | |
| "chiba" : { | |
| "value": 1, | |
| }, | |
| "kagoshima" : { | |
| "value": 1, | |
| }, | |
| "miyazaki" : { | |
| "value": 1, | |
| }, | |
| "ehime" : { | |
| "value": 1, | |
| }, | |
| "kagawa" : { | |
| "value": 2, | |
| }, | |
| "kanagawa" : { | |
| "value": 1, | |
| }, | |
| "kouchi" : { | |
| "value": 1, | |
| }, | |
| "tokushima" : { | |
| "value": 1, | |
| }, | |
| "okinawa" : { | |
| "value": 1, | |
| }, | |
| }; | |
| var layout = ",,,,,,,,,,,,hokkaido,\n\n" + | |
| ",,,,,,,,,,,,aomori,\n" + | |
| ",,,,,,,,,,,akita,iwate\n"+ | |
| ",,,,,,,,,,,yamagata,miyagi\n" + | |
| ",,,,,,,,,,,niigata,fukushima,\n" + | |
| ",,,,,,,,,,toyama,gunma,tochigi\n" + | |
| ",,,,,,,,,isikawa,nagano,saitama,ibaraki\n" + | |
| ",,,,,,,,fukui,gifu,yamanashi,tokyo,chiba\n" + | |
| ",,,,shimane,tottori,hyogo,kyoto,shiga,aichi,sizuoka,kanagawa\n" + | |
| ",,,yamaguchi,hiroshima,okayama,osaka,nara,mie\n" + | |
| ",fukuoka,,,,,,wakayama\n" + | |
| "nagasaki,saga,oita,,ehime,kagawa\n" + | |
| ",kumamoto,miyazaki,,kouchi,tokushima\n" + | |
| ",kagoshima\n" + | |
| "okinawa\n" + | |
| ""; | |
| var customMap = new Squaire(customData, { | |
| el: "#custom-layout", | |
| layout: layout, | |
| labels: customLabels, | |
| labelStyle: "full", | |
| index: "value", | |
| indexType: "number", | |
| colors: d3.scale.linear().domain([1,3]).range(['#c9e2f5','#0098db']), | |
| breakpoints: { | |
| "small": 300 | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment