MEI Data - City

_.md

[ Launch: MEI Data - City ] 7726038 by trinary
[ Launch: obesity map ] 7714930 by gelicia
[ Launch: obesity map ] 5651657 by enjalot

config.json

{"description":"MEI Data - City","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson2","url":"https://raw.github.com/mbostock/topojson/master/topojson.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"obesity.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us.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},"MEIData.csv":{"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,"thumbnail":"http://i.imgur.com/uPpW8w5.png"}

inlet.js

var width = 749,height = 413;
 
var topology = tributary.us;
var geometries = topology.objects.states.geometries;

var svg = d3.select("svg");
var map = svg.append("g").classed("map", true);

var projection = d3.geo.albersUsa()
	.scale(706)
	.translate([width / 2, height / 2]);

var path = d3.geo.path().projection(projection);
var scoreColor = d3.scale.linear()
	.domain([0,100])
	.interpolate(d3.interpolateHsl)
	.range(["#CC313D","#BBE0BE"]);

map.selectAll("path").data(topojson.feature(topology, topology.objects.states).features).enter()
.append("path")
    .attr({
		d: path,
        stroke: '#000',
		id: function(d){return d.id;},
        fill: '#A2CEB3'
   });

var dataLayer = svg.append("g").classed("dataLayer", true);
var meiData = tributary.MEIData;

dataLayer.selectAll("circle").data(meiData).enter().append("circle")
.attr({
	"transform" : function(d) {return "translate(" + projection([d.Longitude,d.Latitude]) + ")";},
    "r" : function(d) { return 4; },
  fill : function(d,i) { console.log(d["City-FinalScore-100"]); return scoreColor(d["City-FinalScore-100"])},
	stroke : "#000000"
});

MEIData.csv

style.css

 .map {
  display: block;
  position: absolute;
  background: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
}

path.state {
  stroke: #666;
  stroke-width: .5;
}

path.state:hover {
  stroke: #000;
}

us.json