Square bin map - japan

Squaire.jsのカスタムマップ機能を使って作成した日本のスクエアビンマップ。

各都道府県のレイアウトは下記を参考にさせていただいた。

forked from shimizu's block: Square bin map - japan

<!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="https://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="https://wsj.github.io/squaire/dist/squaire.js"></script>

"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>

Modified http://wsj.github.io/squaire/dist/squaire.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://wsj.github.io/squaire/dist/squaire.js