readme.json

{"type": "FeatureCollection","features": [
{ "type": "Feature", "properties": { "Name": "District A"}, "id": "01", "geometry": { "type": "Polygon", "coordinates": [ [ [ -90.122040, 29.909487 ], [ -90.121414, 29.912085 ], [ -90.120476, 29.915512 ], [ -90.116463, 29.915640 ], [ -90.115692, 29.918449 ], [ -90.115311, 29.919891 ], [ -90.114777, 29.921930 ], [ -90.114288, 29.923767 ], [ -90.113747, 29.925785 ], [ -90.113014, 29.928535 ], [ -90.112503, 29.930454 ], [ -90.111488, 29.934258 ], [ -90.111237, 29.935202 ], [ -90.110985, 29.936138 ], [ -90.110535, 29.937860 ], [ -90.110291, 29.938768 ], [ -90.109558, 29.941479 ], [ -90.109062, 29.943331 ], [ -90.108345, 29.946032 ], [ -90.107857, 29.946026 ], [ -90.107765, 29.947672 ], [ -90.107323, 29.948257 ], [ -90.106590, 29.947842 ], [ -90.106247, 29.948017 ], [ -90.105209, 29.949406 ], [ -90.106781, 29.950277 ], [ -90.107559, 29.950714 ], [ -90.107712, 29.950754 ], [ -90.107803, 29.950779 ], [ -90.108139, 29.950861 ], [ -90.109848, 29.951328 ], [ -90.110237, 29.951487 ], [ -90.110458, 29.951578 ], [ -90.110863, 29.951750 ], [ -90.111832, 29.952148 ], [ -90.112030, 29.952219 ], [ -90.112617, 29.952488 ], [ -90.113113, 29.952745 ], [ -90.113167, 29.952797 ], [ -90.113251, 29.952955 ], [ -90.113274, 29.953150 ], [ -90.113304, 29.953259 ], [ -90.113403, 29.953419 ], [ -90.113892, 29.953712 ], [ -90.113670, 29.954012 ], [ -90.113670, 29.954165 ], [ -90.114212, 29.955151 ], [ -90.113708, 29.955763 ], [ -90.113647, 29.955820 ], [ -90.114906, 29.956869 ], [ -90.117355, 29.958853 ], [ -90.118118, 29.958128 ], [ -90.118118, 29.958130 ], [ -90.117355, 29.958853 ], [ -90.115860, 29.960253 ], [ -90.111336, 29.964491 ], [ -90.109978, 29.965750 ], [ -90.109901, 29.965830 ], [ -90.108574, 29.967052 ], [ -90.107681, 29.967939 ], [ -90.106743, 29.967049 ], [ -90.106087, 29.966423 ], [ -90.105476, 29.967068 ], [ -90.104256, 29.968435 ], [ -90.101860, 29.971128 ], [ -90.099159, 29.969322 ], [ -90.096817, 29.971945 ], [ -90.097649, 29.972515 ], [ -90.094727, 29.975761 ], [ -90.093208, 29.974537 ], [ -90.091957, 29.972950 ], [ -90.091652, 29.972775 ], [ -90.090446, 29.972095 ], [ -90.088783, 29.971151 ], [ -90.086990, 29.970135 ], [ -90.086098, 29.969622 ], [ -90.084915, 29.968950 ], [ -90.084702, 29.968880 ], [ -90.084518, 29.968781 ], [ -90.084373, 29.968658 ], [ -90.083153, 29.967834 ], [ -90.080299, 29.965900 ], [ -90.079414, 29.965307 ], [ -90.077667, 29.964127 ], [ -90.074959, 29.962301 ], [ -90.071259, 29.966434 ], [ -90.073944, 29.968279 ], [ -90.075699, 29.969484 ], [ -90.077431, 29.970676 ], [ -90.079453, 29.972073 ], [ -90.080864, 29.973053 ], [ -90.083038, 29.974560 ], [ -90.083977, 29.975199 ], [ -90.084717, 29.975706 ], [ -90.086235, 29.976751 ], [ -90.088524, 29.978329 ], [ -90.088181, 29.978752 ], [ -90.087906, 29.979298 ], [ -90.087730, 29.979654 ], [ -90.087639, 29.979910 ], [ -90.087624, 29.980133 ], [ -90.087769, 29.980289 ], [ -90.088562, 29.980833 ], [ -90.089012, 29.981146 ], [ -90.089317, 29.981314 ], [ -90.089745, 29.981647 ], [ -90.090096, 29.982048 ], [ -90.090347, 29.982437 ], [ -90.090439, 29.982649 ], [ -90.090454, 29.982794 ], [ -90.090370, 29.982927 ], [ -90.090019, 29.983038 ], [ -90.089767, 29.983202 ], [ -90.089455, 29.983578 ], [ -90.089394, 29.983704 ], [ -90.086716, 29.981853 ], [ -90.083771, 29.979828 ], [ -90.082436, 29.978909 ], [ -90.078285, 29.976034 ], [ -90.074806, 29.973625 ], [ -90.073051, 29.972420 ], [ -90.071571, 29.974085 ], [ -90.075386, 29.976723 ], [ -90.073242, 29.979124 ], [ -90.069427, 29.976496 ], [ -90.068466, 29.977577 ], [ -90.069839, 29.979982 ], [ -90.070877, 29.981781 ], [ -90.071762, 29.983324 ], [ -90.072098, 29.983904 ], [ -90.073235, 29.985886 ], [ -90.074295, 29.987749 ], [ -90.074692, 29.988466 ], [ -90.075073, 29.989082 ], [ -90.076561, 29.991680 ], [ -90.077286, 29.992933 ], [ -90.078880, 29.995722 ], [ -90.080574, 29.998676 ], [ -90.084351, 29.998447 ], [ -90.084221, 29.996649 ], [ -90.084236, 29.996521 ], [ -90.084274, 29.996414 ], [ -90.084511, 29.996080 ], [ -90.085007, 29.996458 ], [ -90.084961, 29.996519 ], [ -90.084953, 29.996683 ], [ -90.084999, 29.996895 ], [ -90.085197, 29.997396 ], [ -90.085304, 29.997927 ], [ -90.085381, 29.999142 ], [ -90.085289, 29.999237 ], [ -90.085312, 29.999590 ], [ -90.085114, 29.999756 ], [ -90.084869, 29.999838 ], [ -90.084709, 29.999987 ], [ -90.084503, 30.000122 ], [ -90.084145, 30.000122 ], [ -90.083885, 30.000122 ], [ -90.083656, 30.000309 ], [ -90.083397, 30.000422 ], [ -90.083199, 30.000542 ], [ -90.083275, 30.000654 ], [ -90.083237, 30.000710 ], [ -90.083145, 30.000856 ], [ -90.082962, 30.000818 ], [ -90.083107, 30.001284 ], [ -90.083206, 30.001696 ], [ -90.083359, 30.001949 ], [ -90.083626, 30.002264 ], [ -90.083939, 30.002474 ], [ -90.084396, 30.002720 ], [ -90.084770, 30.003143 ], [ -90.085060, 30.003559 ], [ -90.085419, 30.003920 ], [ -90.085480, 30.004173 ], [ -90.085442, 30.004396 ], [ -90.085220, 30.004908 ], [ -90.085167, 30.005327 ], [ -90.085045, 30.005642 ], [ -90.084862, 30.006023 ], [ -90.084808, 30.006256 ], [ -90.085304, 30.006397 ], [ -90.085312, 30.006651 ], [ -90.085320, 30.006907 ], [ -90.085167, 30.007057 ], [ -90.085274, 30.007408 ], [ -90.085289, 30.007559 ], [ -90.085251, 30.008017 ], [ -90.085258, 30.009048 ], [ -90.085220, 30.009455 ], [ -90.085098, 30.009977 ], [ -90.085030, 30.010300 ], [ -90.085129, 30.010517 ], [ -90.085121, 30.010839 ], [ -90.085083, 30.011030 ], [ -90.085037, 30.011259 ], [ -90.085129, 30.011536 ], [ -90.084846, 30.012243 ], [ -90.084641, 30.012531 ], [ -90.084518, 30.012854 ], [ -90.084564, 30.013243 ], [ -90.084511, 30.014284 ], [ -90.084404, 30.015139 ], [ -90.084480, 30.015781 ], [ -90.084290, 30.016544 ], [ -90.084213, 30.017017 ], [ -90.084198, 30.017572 ], [ -90.084175, 30.018396 ], [ -90.084076, 30.018995 ], [ -90.083984, 30.019226 ], [ -90.083572, 30.020014 ], [ -90.083397, 30.020357 ], [ -90.083290, 30.020460 ], [ -90.083099, 30.020779 ], [ -90.082527, 30.020731 ], [ -90.081520, 30.020786 ], [ -90.079468, 30.020918 ], [ -90.077499, 30.021023 ], [ -90.075516, 30.021149 ], [ -90.075607, 30.022486 ], [ -90.075668, 30.023018 ], [ -90.075722, 30.023230 ], [ -90.075836, 30.023512 ], [ -90.075943, 30.023733 ], [ -90.076118, 30.023973 ], [ -90.077034, 30.025105 ], [ -90.077393, 30.025518 ], [ -90.077751, 30.025812 ], [ -90.078323, 30.026188 ], [ -90.078499, 30.026398 ], [ -90.078583, 30.026627 ], [ -90.078644, 30.026983 ], [ -90.078697, 30.027161 ], [ -90.078651, 30.027409 ], [ -90.078583, 30.027542 ], [ -90.078217, 30.028049 ], [ -90.076492, 30.030310 ], [ -90.076309, 30.030479 ], [ -90.076050, 30.030672 ], [ -90.075500, 30.030922 ], [ -90.074257, 30.031229 ], [ -90.074471, 30.031910 ], [ -90.074440, 30.033876 ], [ -90.081947, 30.033949 ], [ -90.087616, 30.034000 ], [ -90.096848, 30.034088 ], [ -90.103416, 30.034149 ], [ -90.104630, 30.034161 ], [ -90.111710, 30.034227 ], [ -90.119217, 30.034298 ], [ -90.119484, 30.034300 ], [ -90.120026, 30.028128 ], [ -90.120560, 30.025198 ], [ -90.120560, 30.024746 ], [ -90.120705, 30.023401 ], [ -90.120705, 30.023317 ], [ -90.121002, 30.019743 ], [ -90.121613, 30.012777 ], [ -90.121582, 30.012669 ], [ -90.121590, 30.012569 ], [ -90.121826, 30.010342 ], [ -90.121956, 30.008778 ], [ -90.122055, 30.007669 ], [ -90.122147, 30.006596 ], [ -90.122223, 30.005751 ], [ -90.122231, 30.005682 ], [ -90.122307, 30.004765 ], [ -90.122383, 30.003239 ], [ -90.122421, 30.002542 ], [ -90.122581, 29.999788 ], [ -90.122719, 29.998135 ], [ -90.122917, 29.997417 ], [ -90.122887, 29.997196 ], [ -90.122993, 29.996357 ], [ -90.123039, 29.995960 ], [ -90.123070, 29.995790 ], [ -90.123131, 29.995295 ], [ -90.123253, 29.994295 ], [ -90.123367, 29.993341 ], [ -90.123436, 29.992365 ], [ -90.123619, 29.990068 ], [ -90.123833, 29.987438 ], [ -90.123924, 29.986494 ], [ -90.124542, 29.979197 ], [ -90.124802, 29.976101 ], [ -90.124802, 29.975967 ], [ -90.124802, 29.975901 ], [ -90.124870, 29.975548 ], [ -90.124702, 29.973997 ], [ -90.124870, 29.972946 ], [ -90.125740, 29.971872 ], [ -90.125862, 29.971727 ], [ -90.126137, 29.971430 ], [ -90.126160, 29.971403 ], [ -90.126305, 29.971203 ], [ -90.126755, 29.970427 ], [ -90.127251, 29.969564 ], [ -90.127769, 29.968670 ], [ -90.128075, 29.968147 ], [ -90.128349, 29.967678 ], [ -90.128464, 29.967474 ], [ -90.128822, 29.966856 ], [ -90.129196, 29.966208 ], [ -90.129295, 29.966034 ], [ -90.129845, 29.965082 ], [ -90.130394, 29.964127 ], [ -90.130501, 29.963955 ], [ -90.130524, 29.963919 ], [ -90.131065, 29.962976 ], [ -90.132774, 29.960024 ], [ -90.133133, 29.959412 ], [ -90.133675, 29.958471 ], [ -90.134193, 29.957588 ], [ -90.134781, 29.956562 ], [ -90.135315, 29.955643 ], [ -90.135742, 29.954899 ], [ -90.136284, 29.953943 ], [ -90.136826, 29.953051 ], [ -90.137573, 29.951744 ], [ -90.137856, 29.951193 ], [ -90.137901, 29.951103 ], [ -90.139900, 29.947760 ], [ -90.139961, 29.947653 ], [ -90.139412, 29.942619 ], [ -90.138901, 29.938351 ], [ -90.139023, 29.932188 ], [ -90.139069, 29.930113 ], [ -90.139183, 29.924536 ], [ -90.139130, 29.924030 ], [ -90.138802, 29.921289 ], [ -90.138725, 29.920656 ], [ -90.138489, 29.918573 ], [ -90.138016, 29.918131 ], [ -90.132385, 29.912781 ], [ -90.127266, 29.910854 ], [ -90.125809, 29.910334 ], [ -90.125595, 29.910273 ], [ -90.122040, 29.909487 ] ] ] } }

]}

README.md

Part of a series of examples. See:

1. mousewheel-zoom + click-to-center via projection
2. click-to-center via projection
3. click-to-center via transform
4. click-to-zoom via transform

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.min.js?2.9.6"></script>
<style>

.background {
  fill: none;
  pointer-events: all;
}

#states {
  fill: #aaa;
  stroke: #fff;
  stroke-width: 1.5px;
}

#states .active {
  fill: steelblue;
}

</style>
<body>
<script>

var width = 960,
    height = 500,
    centered;

var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click);

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");

d3.json("readme.json", function(json) {
  g.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("d", path)
      .on("click", click);
});

function click(d) {
  var x = 0,
      y = 0,
      k = 1;

  if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = -centroid[0];
    y = -centroid[1];
    k = 4;
    centered = d;
  } else {
    centered = null;
  }

  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });

  g.transition()
      .duration(1000)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
      .style("stroke-width", 1.5 / k + "px");
}

</script>

thumbnail.png