just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":574,"height":565,"hide":false},"endpoint":"tributary","editor_json0":{"vim":false,"emacs":false,"width":804,"height":234,"hide":false},"editor_json1":{"vim":false,"emacs":false,"width":959,"height":574,"hide":true}}

costofliving.json

[
   {
        "city": "Zurich",
        "country": " Switzerland",
        "lat": 47.3690239,
        "lon": 8.5380326,
        "price": 152.84,
        "rent": 74.58,
        "groceries": 143.7
    },
    {
        "city": "Dublin",
        "country": " Ireland",
        "lat": 53.344104,
        "lon": -6.2674937,
        "price": 119.56,
        "rent": 48.3,
        "groceries": 109.96
    },
    {
        "city": "London",
        "country": " United Kingdom",
        "lat": 51.5001524,
        "lon": -0.1262362,
        "price": 118.52,
        "rent": 87.34,
        "groceries": 92.59
    },
    {
        "city": "Paris",
        "country": " France",
        "lat": 48.8566667,
        "lon": 2.3509871,
        "price": 113.88,
        "rent": 63.47,
        "groceries": 95.93
    },
    {
        "city": "Amsterdam",
        "country": " Netherlands",
        "lat": 52.3738007,
        "lon": 4.8909347,
        "price": 110.78,
        "rent": 64.61,
        "groceries": 69.93
    },
    {
        "city": "Turin",
        "country": " Italy",
        "lat": 45.0705621,
        "lon": 7.6866186,
        "price": 105.68,
        "rent": 40.22,
        "groceries": 86.86
    },
    {
        "city": "Toronto",
        "country": " Canada",
        "lat": 43.670233,
        "lon": -79.386755,
        "price": 104.53,
        "rent": 52.42,
        "groceries": 96.13
    },
    {
        "city": "Venice",
        "country": " Italy",
        "lat": 45.4343363,
        "lon": 12.3387844,
        "price": 103.56,
        "rent": 31.33,
        "groceries": 70.18
    },
    {
        "city": "San Francisco",
        "country": " United States",
        "lat": 37.775206,
        "lon": -122.419209,
        "price": 102.52,
        "rent": 90.04,
        "groceries": 97.84
    },
    {
        "city": "Seattle",
        "country": " United States",
        "lat": 47.620973,
        "lon": -122.347276,
        "price": 101.04,
        "rent": 48.15,
        "groceries": 100.9
    },
    {
        "city": "Reykjavik",
        "country": " Iceland",
        "lat": 64.135338,
        "lon": -21.89521,
        "price": 100.11,
        "rent": 31.82,
        "groceries": 95.54
    },
    {
        "city": "New York",
        "country": " United States",
        "lat": 40.756054,
        "lon": -73.986951,
        "price": 100,
        "rent": 100,
        "groceries": 100
    },
    {
        "city": "Phoenix",
        "country": " United States",
        "lat": 33.4483771,
        "lon": -112.0740373,
        "price": 98.57,
        "rent": 32.76,
        "groceries": 85.05
    },
    {
        "city": "Munich",
        "country": " Germany",
        "lat": 48.1391265,
        "lon": 11.5801863,
        "price": 95.95,
        "rent": 46.08,
        "groceries": 82.22
    },
    {
        "city": "San Jose",
        "country": " United States",
        "lat": 37.3393857,
        "lon": -121.8949555,
        "price": 94.11,
        "rent": 73.36,
        "groceries": 82.33
    },
    {
        "city": "Frankfurt",
        "country": " Germany",
        "lat": 50.1115118,
        "lon": 8.6805059,
        "price": 92.02,
        "rent": 34.75,
        "groceries": 65.96
    },
    {
        "city": "San Diego",
        "country": " United States",
        "lat": 32.7153292,
        "lon": -117.1572551,
        "price": 91.05,
        "rent": 57.88,
        "groceries": 81.09
    },
    {
        "city": "Los Angeles",
        "country": " United States",
        "lat": 34.0522342,
        "lon": -118.2436849,
        "price": 90.87,
        "rent": 63.97,
        "groceries": 73.58
    },
    {
        "city": "Cologne",
        "country": " Germany",
        "lat": 50.9406645,
        "lon": 6.9599115,
        "price": 90.73,
        "rent": 29.58,
        "groceries": 74.64
    },
    {
        "city": "Berlin",
        "country": " Germany",
        "lat": 52.5234051,
        "lon": 13.4113999,
        "price": 89.09,
        "rent": 35.8,
        "groceries": 75.36
    },
    {
        "city": "Sevilla",
        "country": " Spain",
        "lat": 37.38264,
        "lon": -5.9962951,
        "price": 88.96,
        "rent": 18.79,
        "groceries": 64.69
    },
    {
        "city": "Barcelona",
        "country": " Spain",
        "lat": 41.387917,
        "lon": 2.1699187,
        "price": 88.82,
        "rent": 33.92,
        "groceries": 65.26
    },
    {
        "city": "Hong Kong",
        "country": " Hong Kong",
        "lat": 22.4060834,
        "lon": 114.1201536,
        "price": 88.13,
        "rent": 106.22,
        "groceries": 85.25
    },
    {
        "city": "Madrid",
        "country": " Spain",
        "lat": 40.4166909,
        "lon": -3.7003454,
        "price": 87.93,
        "rent": 39.57,
        "groceries": 60.85
    },
    {
        "city": "Dallas",
        "country": " United States",
        "lat": 32.802955,
        "lon": -96.769923,
        "price": 87.62,
        "rent": 38.51,
        "groceries": 67.93
    },
    {
        "city": "Chicago",
        "country": " United States",
        "lat": 41.850033,
        "lon": -87.6500523,
        "price": 85.41,
        "rent": 49.96,
        "groceries": 72.28
    },
    {
        "city": "Saint Louis",
        "country": " United States",
        "lat": 38.6270025,
        "lon": -90.1994042,
        "price": 84.91,
        "rent": 23.22,
        "groceries": 84.75
    },
    {
        "city": "Curitiba",
        "country": " Brazil",
        "lat": -25.4283563,
        "lon": -49.2732515,
        "price": 81.1,
        "rent": 22.6,
        "groceries": 57.17
    },
    {
        "city": "Detroit",
        "country": " United States",
        "lat": 42.331427,
        "lon": -83.0457538,
        "price": 79.72,
        "rent": 30.54,
        "groceries": 75.82
    },
    {
        "city": "Denver",
        "country": " United States",
        "lat": 39.7391536,
        "lon": -104.9847034,
        "price": 79.39,
        "rent": 48.43,
        "groceries": 69.23
    },
    {
        "city": "Austin",
        "country": " United States",
        "lat": 30.267153,
        "lon": -97.7430608,
        "price": 78.92,
        "rent": 45.55,
        "groceries": 80.38
    },
    {
        "city": "Des Moines",
        "country": " United States",
        "lat": 41.6005448,
        "lon": -93.6091064,
        "price": 75.45,
        "rent": 29.18,
        "groceries": 68.64
    },
    {
        "city": "Ljubljana",
        "country": " Slovenia",
        "lat": 46.0514263,
        "lon": 14.5059655,
        "price": 75.42,
        "rent": 28.59,
        "groceries": 62.73
    },
    {
        "city": "Las Vegas",
        "country": " United States",
        "lat": 36.114646,
        "lon": -115.172816,
        "price": 73.98,
        "rent": 36,
        "groceries": 66.83
    },
    {
        "city": "Santiago",
        "country": " Chile",
        "lat": -33.4253598,
        "lon": -70.5664659,
        "price": 69.89,
        "rent": 20.62,
        "groceries": 53.54
    },
    {
        "city": "Buenos Aires",
        "country": " Argentina",
        "lat": -34.6084175,
        "lon": -58.3731613,
        "price": 65.93,
        "rent": 21.58,
        "groceries": 55.69
    },
    {
        "city": "Guangzhou",
        "country": " China",
        "lat": 23.129163,
        "lon": 113.264435,
        "price": 52.44,
        "rent": 17.25,
        "groceries": 70.42
    },
    {
        "city": "Krakow",
        "country": " Poland",
        "lat": 50.0646501,
        "lon": 19.9449799,
        "price": 48.63,
        "rent": 19.48,
        "groceries": 38.02
    }
]

inlet.js

d3.select("body").style("background-color","#000000")


var col = tributary.costofliving;
var countries = tributary.worldcountries;
var svg = d3.select("svg");

var cw = 678;
var ch = 406;

var xy = d3.geo.mercator()
    .scale(781)
    .translate([339, 300])
//then we need a path function
var geopath = d3.geo.path()
    .projection(xy);


//var price_min = d3.min(col, function(d) {return d.price});
var price_min = 0;
var price_max = d3.max(col, function(d) {return d.price});
//var rent_min = d3.min(col, function(d) {return d.rent});
var rent_min = 0;
var rent_max = d3.max(col, function(d) {return d.rent});

var price_scale = d3.scale.sqrt()
    .domain([price_min, price_max])
    .range([1, 7]);
var rent_scale = d3.scale.sqrt()
    .domain([rent_min, rent_max])
    .range([1, 5]);


var chart = svg.append("g")
  .attr("transform", "translate(" + [54, 77] + ")");

//chart
chart.append("circle")
  .attr({
    cx: cw/3.5,
    cy: ch/2,
    r: 280,
    fill: "#1E212A",
    "stroke-width": 0
  })
  
 chart.append("circle")
   .attr({
     cx: cw/1.25,
     cy: ch/2,
     r: 280,
     fill: "#1E212A",
     "stroke-width": 0
   })
  
chart.append("g")
  .attr("id", "countries");

chart.append("g")
  .attr("id", "points")



var countriesGroup = chart.select("#countries");
//create a path for each country
countriesGroup.selectAll("path")
    .data(countries.features)
    .enter()
        .append("path")
        .attr("d", geopath)
        .attr("id", function(d) {
            return d.properties.name;
            })
        .classed("country", true)
        .style({
            fill:"#464646",
            "fill-opacity": 0.5,
            stroke:"#cccccc",
            "stroke-width": 0.5,
          "stroke-opacity": 0.5
        })
  

countriesGroup.select("#Antarctica").remove();

var points = chart.select("#points")
    .selectAll("circle")
    .data(col)
points
    .enter()
    .append("circle")
points
    .attr("transform", function(d) {
        var p = xy([d.lon, d.lat]);
        return "translate(" + p + ")";
    })
    .attr({
      "r": function(d) {
        return price_scale(d.price);
        //return rent_scale(d.rent);
      },
	  "fill": "#AD013F",
      "fill-opacity": 0.7,
      "stroke":"#FFFFFF",
      "stroke-width": 0.5
    })
    .on("mouseover", function(d) {
        console.log(d, d.city);
    })

inlet.svg

worldcountries.json