index.html
<!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="//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="//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>