Skip to content

Instantly share code, notes, and snippets.

@VioletVivirand

VioletVivirand/.block

Last active August 4, 2016 08:05
Show Gist options
  • Save VioletVivirand/b50d352b3c89de291f5bc4590ffa491c to your computer and use it in GitHub Desktop.
Save VioletVivirand/b50d352b3c89de291f5bc4590ffa491c to your computer and use it in GitHub Desktop.
Download ZIP
Disabilities Data Demo
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Disibilities</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.min.js"></script>
<style>
.country path {
fill: #ECECEC;
}
.country path:hover {
/*stroke: #FFFFFF;*/
stroke-width: 1px;
fill-opacity: 0.7;
}
.country text {
fill: black;
font-size: 8px;
}
div {
font-family: 'Open Sans', sans-serif;
}
div#tooltip {
position: absolute;
z-index: 10;
width: 100px;
border: 1px solid #cccccc;
border-radius: 5px;
padding: 0px 10px 0px 10px;
background: #F7F7F7;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
div#tooltip p {
line-height: 1.2em;
text-align: center
}
div#tooltip hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
p#tooltip-country-name {
color: #666666;
font-size: 14px;
font-weight: 600;
}
p#tooltip-tax {
font-size: 10px;
font-weight: 800;
color: #666666;
font-weight: 300;
}
span#tooltip-legend-icon {
font-size: 16px;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
}
span#tooltip-value {
vertical-align: 0.1em;
}
.horizontalLegend {
font-size: 10px;
font-weight: 600;
}
.horizontalLegend .legendTitle {
transform: translate(0, 15px);
font-size: 12px;
font-weight: 800;
}
</style>
</head>
<body>
<div id="menu">
Type Selection:
<select>
<option>TYPE_1</option>
<option>TYPE_2</option>
<option>TYPE_3</option>
<option>TYPE_4</option>
<option>TYPE_5</option>
<option>TYPE_6</option>
<option>TYPE_7</option>
<option>TYPE_8</option>
<option>TYPE_9</option>
</select>
</div>
<div id="chart"></div>
<script>
var width = 960,
height = 600;
var data;
var svg = d3.select("div#chart").append("svg")
.attr("width", width)
.attr("height", height);
// 新增 d3-legend
svg.append("g")
.attr("class", "horizontalLegend")
.attr("transform", "translate(400,520)");
var projection = d3.geo.mercator()
.center([121, 24])
.scale(7000)
.translate([400, 200]);
// 顏色尺度
var color = d3.scale.linear()
.range(["#FFE4B5", "#F64403"]);
var path = d3.geo.path()
.projection(projection);
var menu = d3.select("div#menu select")
.on("change", change);
var tooltip = d3.select("div#chart")
.append("div")
.attr("id", "tooltip")
.style("visibility", "hidden");
d3.json("towns_codet_topojson.json", function(error, taiwan) {
if (error) return console.error(error);
data = topojson.feature(taiwan, taiwan.objects.towns).features
menu.property("value", "TYPE_1");
redraw()
});
function change() {
d3.transition()
.duration(0)
.each(redraw);
}
function redraw() {
var selectedType = menu.property("value"); // 用這個方法來擷取下拉式選單裡被選中的障礙類別
var sortedData = data.sort(function(a, b) {
return b["properties"][selectedType] - a["properties"][selectedType];
});
// 幫顏色尺度指定資料範圍
// 在這邊，sortedData[0]["properties"][selectedType]] 剛好會是最大值
color.domain([0, sortedData[0]["properties"][selectedType]]);
// Data Join
var country = svg.selectAll(".country")
.data(data, function(d) {
return d["properties"]["NAME"];
})
// Enter
var countryEnter = country.enter().insert("g", ".horizontalLegend")
.attr("class", "country")
.style("fill-opacity", 0);
// Enter - Country Path
countryEnter.append("path")
.attr("id", function(d) {
return d.id;
})
.attr("d", path);
// // Enter - Country Name
// countryEnter.append("text")
// .attr("class", "label")
// .attr("transform", function(d) {
// var centroid = path.centroid(d),
// x = centroid[0],
// y = centroid[1];
// return "translate(" + x + "," + y + ")";
// }).attr("dy", ".35em")
// .attr("text-anchor", "start");
// Mouse Events
country.select("path")
.on("mouseover", function() {
return tooltip.style("visibility", "visible");
}).on("mousemove", function(d) {
return tooltip
.style("top", (d3.event.pageY - 10) + "px")
.style("left", (d3.event.pageX + 10) + "px")
.html(tooltipHtml(d["properties"]["NAME"], d["properties"][selectedType]));
}).on("mouseout", function() {
return tooltip.style("visibility", "hidden");
});
// Legend (With D3-Legend)
var legend = d3.select(".horizontalLegend")
var legendLinear = d3.legend.color()
.shapeWidth(30)
.cells(11)
.orient("horizontal")
.scale(color)
.title("Number of People");
legend.call(legendLinear);
// Update
var countryUpdate = d3.transition(country)
.style("fill-opacity", 1);
// Update - Country Path
countryUpdate.select("path")
.style("fill", function(d) {
return d["properties"][selectedType] == undefined ? "" : color(d["properties"][selectedType]);
});
// // Update - Country Name
// countryUpdate.select(".label")
// .text(function(d) {
// return d["properties"]["NAME"];
// });
// Exit
var countryExit = d3.transition(country.exit())
.style("fill-opacity", 0)
.remove();
// Exit - Country Path
countryExit.select("path")
.style("fill", function(d) {
return color(d["properties"][selectedType]);
});
// Exit - Country Name
countryExit.select(".label")
.text(function(d) {
return d["properties"]["NAME"];
});
}
function tooltipHtml(country, people) {
var code = '<p id="tooltip-country-name">' + country + '</p><hr>' + '<p id="tooltip-tax"><span id="tooltip-legend-icon" style="color: ' + (people == undefined ? "#ECECEC" : color(people)) + '; ">●</span><span id="tooltip-value"> ' + (people == undefined ? "No Data." : people) + '</span></p>'
return code;
}
</script>
</body>
Display the source blob
Display the rendered blob
Raw
towns_codet_topojson.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment