uk courts

_.md

[ Launch: uk courts ] 5180747 by RobinL

config.json

{"description":"uk courts","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"uk.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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},"a.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

width = 1000;
height = 1000;

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



var uk = tributary.uk;

var subunits = topojson.object(uk, uk.objects.subunits);

projection = d3.geo.albers()
    .center([2, 51.3])
    .rotate([5.8, 0])
    .parallels([49, 60])
    .scale(5183)
    .translate([width / 2, height / 2]);

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


  

 


// We now have a separate path for each region
svg.selectAll(".subunit")
    .data(topojson.object(uk, uk.objects.subunits).geometries)
  .enter().append("path")
    .attr("class", function(d) { return "subunit " + d.id; })
    .attr("d", path);

//Draw a circle for each place
// svg.append("path")
//     .datum(topojson.object(uk, uk.objects.places))
//     .attr("d", path)
//     .attr("class", "place");

//Different method of drawing a circle for each place
// svg.append("g").selectAll("circles").data(topojson.object(uk, uk.objects.places).geometries)
//   .enter()
//   .append("circle")
//   .attr("cx", function(d) {

//     return projection(d.coordinates)[0];
//   })
//   .attr("cy", function(d) {
//     return projection(d.coordinates)[1];
//   })
//   .attr("r",2);


// Should be able to use 'clip-path' https://developer.mozilla.org/en-US/docs/SVG/Element/clipPath
//Example:  http://bl.ocks.org/njvack/1405439

var vertices = [];

places = topojson.object(uk, uk.objects.places).geometries;

for (var i = 0; i < places.length-6; i++) {

  var a0 = parseFloat(projection(places[i].coordinates)[0]);
  var a1 = parseFloat(projection(places[i].coordinates)[1]);


  vertices.push([a0,a1]);
};



svg.append("svg:clipPath")
	.attr("id","clips")
.append("svg:path")
      .datum(subunits)
       .attr("d", path);
     


var colScale = d3.scale.linear()
      .domain([0, places.length])
      .range(["#CCE1F9","#1E006A"]);

ver = d3.geom.voronoi(vertices);

svg.selectAll("path2")
    .data(ver)
  .enter().append("path")
    .attr("class","myline")
	.attr("clip-path","url(#clips)")
    .attr("class", function(d, i) { return places[i].properties.name; })
    .style("fill",function(d,i) {
     console.log(colScale(i))
      return colScale(i);})
	.style("opacity",0.5)
    .attr("d", function(d) { 

      return "M" + d.join("L") + "Z"; })
;







svg.append("g").selectAll("circles").data(vertices)
  .enter()
  .append("circle")
  .attr("cx", function(d) {

    return d[0];
  })
  .attr("cy", function(d) {
    return d[1];
  })
  .attr("r",2);

svg.append("path")

      .datum(subunits.geometries[1])
       .attr("d", path)
	.style("fill","#DADADA");

svg.append("path")
      .datum(subunits.geometries[2])
       .attr("d", path)
	.style("fill","#DADADA");

svg.append("path")
      .datum(subunits.geometries[3])
       .attr("d", path)
	.style("fill","#DADADA");
  





      

uk.json