Hydrologic Regions Label Placement

_.md

[ Launch: Tributary inlet ] 46ad81970da8c428ae5c by poezn

config.json

{"description":"Hydrologic Regions Label Placement","endpoint":"","display":"svg","public":true,"require":[{"name":"Topojson","url":"http://d3js.org/topojson.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"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}},"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/tI2HH0A.png"}

data.json

inlet.js

var topo = tb.data;
var data = topojson.feature(topo, topo.objects["hydrologic-regions"]).features;

var regionLabels = [
  {name: ["North", "Coast"], "coords": [55, 61]},
  {name: ["SF Bay"], "coords": [84, 292], "align": "end"},
  {name: ["San Joaquin", "River"], "coords": [200, 286]},
  {name: ["Central", "Coast"], "coords": [178, 420]},
  {name: ["Tulare", "Lake"], "coords": [270, 400]},
  {name: ["South", "Coast"], "coords": [340, 570]},
  {name: ["Sacramento", "River"], "coords": [140, 140]},
  {name: ["North", "Lahontan"], "coords": [204, 95]},
  {name: ["South", "Lahontan"], "coords": [390, 420]},
  {name: ["Colorado", "River"], "coords": [470, 540]} 
]


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

g.selectAll("path.hydrologic-region")
.data(data)
.enter().append("path")
.attr({
    "class": "hydrologic-region",
    "d": path
});

var texts = g.selectAll(".hr-label")
.data(regionLabels)
.enter().append("text")
.attr({
  "text-anchor": function(d, i) {
    return d.align ? d.align : "middle"
  },
  "class": "hr-label",
  "transform": function(d, i) {
    var t = d.coords
    return "translate(" + [t] + ")";
  }
});

texts.selectAll("tspan")
.data(function(d, i) {
  return d.name.length > 0 ? d.name : [data[i].properties.HR_NAME]
})
.enter().append("tspan")
.attr({
  "y": function(d, i) {
    return i * 14;
  },
  "x": 0
})
.text(function(d, i) {
  return d
})

styles.css

.hydrologic-region {
  fill: #f0e9cb;
  stroke: #FFFFFF;
}

#display {
  background-color: #FFF;
}

.hr-label {
  font-size: 12px;
}