D3 Examples - Zipdecode Switzerland

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  background: #222;
}
#input {
  position: absolute;
  top: 20px;
  left: 20px;
}
rect {
    fill: #fff;
}
</style>
<body>
<input autofocus id="input" type="text" placeholder="Type a Postal Code" maxlength="4" />
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var width = 960,
    height = 500;
​
var projection = d3.geo.albers()
  .rotate([0, 0])
  .center([8.23, 46.8])
  .scale(13000);
​
var vis = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);
​
d3.tsv("ch.tsv", function(error, postalCodes) {
  var dots = vis.selectAll("rect")
    .data(postalCodes);
​
  dots.enter().append("rect")
    .attr("width", 1)
    .attr("height", 1)
    .attr("transform", function(d) { 
      var coords = projection([d.longitude, d.latitude]);
      return "translate(" + Math.round(coords[0]) + "," + Math.round(coords[1]) + ")";
    });
​
  d3.select("#input")
    .on("keyup", function() {
      var inputCode = this.value;
      dots.transition().duration(600)
        .style("fill", function(d) {
          return d.postalCode.indexOf(inputCode) === 0 ? "#fff" : "#000";
        });
    });
});
</script>
​
    