test

_.md

[ Launch: test ] 11187507 by poezn

config.json

{"description":"test","endpoint":"","display":"svg","public":true,"require":[{"name":"queue.js","url":"http://d3js.org/queue.v1.min.js"},{"name":"topojson.js","url":"http://d3js.org/topojson.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us-congress":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us-congress-113.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/s4nrMmT.png"}

inlet.js

var width = 960,
    height = 600;
 
var projection = d3.geo.albersUsa()
    .scale(1280)
    .translate([width / 2, height / 2]);
 
var path = d3.geo.path()
    .projection(projection);
 
 
var us = tb.us;
var congress = tb["us-congress-113"];

g.append("defs").append("path")
    .attr("id", "land")
    .datum(topojson.feature(us, us.objects.land))
    .attr("d", path);

g.append("clipPath")
    .attr("id", "clip-land")
  .append("use")
    .attr("xlink:href", "#land");

g.append("g")
    .attr("class", "districts")
    .attr("clip-path", "url(#clip-land)")
  .selectAll("path")
    .data(topojson.feature(congress, congress.objects.districts).features)
  .enter().append("path")
    .attr("d", path)
  .append("title")
    .text(function(d) { return d.id; });

g.append("path")
    .attr("class", "district-boundaries")
    .datum(topojson.mesh(congress, congress.objects.districts, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); }))
    .attr("d", path);

g.append("path")
    .attr("class", "state-boundaries")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
    .attr("d", path);

styles.css

path {
  stroke-linejoin: round;
  stroke-linecap: round;
}
 
.districts {
  fill: #bbb;
}
 
.districts :hover {
  fill: orange;
}
 
.district-boundaries {
  pointer-events: none;
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}
 
.state-boundaries {
  pointer-events: none;
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
}

us-congress-113.json

us.json