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":true},"endpoint":"tributary","editor_json0":{"vim":false,"emacs":false,"width":804,"height":234,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":959,"height":574,"hide":true}}

costofliving.json

[
   {
        "city": "Zurich",
        "country": " Switzerland",
        "lat": 47.3690239,
        "lon": 8.5380326,
        "days": 10,
        "year": 2012,
        "purpose": "travel"
	
    },
    {
        "city": "Dublin",
        "country": " Ireland",
        "lat": 53.344104,
        "lon": -6.2674937,
        "days": 14,
        "year": 48.3,
        "purpose": ""
    },
    {
        "city": "London",
        "country": " United Kingdom",
        "lat": 51.5001524,
        "lon": -0.1262362,
        "days": 3,
        "year": 2012,
        "purpose": "airport"
    },
    {
        "city": "Paris",
        "country": " France",
        "lat": 48.8566667,
        "lon": 2.3509871,
        "days": 1,
        "year": 2012,
        "purpose": "airport"
    },
    {
        "city": "Amsterdam",
        "country": " Netherlands",
        "lat": 52.3738007,
        "lon": 4.8909347,
        "days": 1,
        "year": 2012,
        "purpose": "airport"
    },
    {
        "city": "TREVISO",
        "country": " Italy",
        "lat": 45.0705621,
        "lon": 7.6866186,
        "days": 2,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Toronto",
        "country": " Canada",
        "lat": 43.670233,
        "lon": -79.386755,
        "days": 7,
        "year": 1990,
        "purpose": "travel"
    },
    {
        "city": "Venice",
        "country": " Italy",
        "lat": 45.4343363,
        "lon": 12.3387844,
        "days": 5,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "San Francisco",
        "country": " United States",
        "lat": 37.775206,
        "lon": -122.419209,
        "days": 700,
        "year": 2009,
        "purpose": "live"
    },
    {
        "city": "Seattle",
        "country": " United States",
        "lat": 47.620973,
        "lon": -122.347276,
        "days": 4,
        "year": 2011,
        "purpose": "travel"
    },
    {
        "city": "Reykjavik",
        "country": " Iceland",
        "lat": 64.135338,
        "lon": -21.89521,
        "days": 7,
        "year": 2013,
        "purpose": "desire"
    },
    {
        "city": "New York",
        "country": " United States",
        "lat": 40.756054,
        "lon": -73.986951,
        "days": 30,
        "year": 2007,
        "purpose": "travel"
    },
    {
        "city": "Phoenix",
        "country": " United States",
        "lat": 33.4483771,
        "lon": -112.0740373,
        "days": 2,
        "year": 2009,
        "purpose": "travel"
    },
    {
        "city": "Munich",
        "country": " Germany",
        "lat": 48.1391265,
        "lon": 11.5801863,
        "days": 2,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Frankfurt",
        "country": " Germany",
        "lat": 50.1115118,
        "lon": 8.6805059,
        "days": 2,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "San Diego",
        "country": " United States",
        "lat": 32.7153292,
        "lon": -117.1572551,
        "days": 3,
        "year": 2011,
        "purpose": "travel"
    },
    {
        "city": "Los Angeles",
        "country": " United States",
        "lat": 34.0522342,
        "lon": -118.2436849,
        "days": 90.87,
        "year": 63.97,
        "purpose": 73.58
    },
    {
        "city": "Cologne",
        "country": " Germany",
        "lat": 50.9406645,
        "lon": 6.9599115,
        "days": 2,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Berlin",
        "country": " Germany",
        "lat": 52.5234051,
        "lon": 13.4113999,
        "days": 89.09,
        "year": 35.8,
        "purpose": "desire"
    },
    {
        "city": "Sevilla",
        "country": " Spain",
        "lat": 37.38264,
        "lon": -5.9962951,
        "days": 7,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Barcelona",
        "country": " Spain",
        "lat": 41.387917,
        "lon": 2.1699187,
        "days": 5,
        "year": 2013,
        "purpose": "desire"
    },
    {
        "city": "Hong Kong",
        "country": " Hong Kong",
        "lat": 22.4060834,
        "lon": 114.1201536,
        "days": 10,
        "year": 2007,
        "purpose": "travel"
    },
    {
        "city": "Madrid",
        "country": " Spain",
        "lat": 40.4166909,
        "lon": -3.7003454,
        "days": 3,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Dallas",
        "country": " United States",
        "lat": 32.802955,
        "lon": -96.769923,
        "days": 1,
        "year": 2007,
        "purpose": "airport"
    },
    {
        "city": "Chicago",
        "country": " United States",
        "lat": 41.850033,
        "lon": -87.6500523,
        "days": 500,
        "year": 2007,
        "purpose": "lived"
    },
    {
        "city": "Saint Louis",
        "country": " United States",
        "lat": 38.6270025,
        "lon": -90.1994042,
        "days": 2,
        "year": 2009,
        "purpose": "travel"
    },
    {
        "city": "Curitiba",
        "country": " Brazil",
        "lat": -25.4283563,
        "lon": -49.2732515,
        "days": 5,
        "year": 2013,
        "purpose": "desire"
    },
    {
        "city": "Denver",
        "country": " United States",
        "lat": 39.7391536,
        "lon": -104.9847034,
        "days": 5,
        "year": 2008,
        "purpose": "travel"
    },
    {
        "city": "Salt Lake City",
        "country": " United States",
        "lat": 39.7391536,
        "lon": -104.9847034,
        "days": 3,
        "year": 2008,
        "purpose": "travel"
    },
    {
        "city": "Austin",
        "country": " United States",
        "lat": 30.267153,
        "lon": -97.7430608,
        "days": 3,
        "year": 2010,
        "purpose": "travel"
    },
    {
        "city": "Des Moines",
        "country": " United States",
        "lat": 41.6005448,
        "lon": -93.6091064,
        "days": 75.45,
        "year": 29.18,
        "purpose": 68.64
    },
    {
        "city": "Ljubljana",
        "country": " Slovenia",
        "lat": 46.0514263,
        "lon": 14.5059655,
        "days": 4,
        "year": 2013,
        "purpose": "desire"
    },
    {
        "city": "Las Vegas",
        "country": " United States",
        "lat": 36.114646,
        "lon": -115.172816,
        "days": 3,
        "year": 2011,
        "purpose": "travel"
    },
    {
        "city": "Santiago",
        "country": " Chile",
        "lat": -33.4253598,
        "lon": -70.5664659,
        "days": 5,
        "year": 2013,
        "purpose": "desire"
    },
    {
        "city": "Buenos Aires",
        "country": " Argentina",
        "lat": -34.6084175,
        "lon": -58.3731613,
        "days": 6,
        "year": 2013,
        "purpose": "desire"
    },
    {
        "city": "Guangzhou",
        "country": " China",
        "lat": 23.129163,
        "lon": 113.264435,
        "days": 3,
        "year": 2008,
        "purpose": "travel"
    },
    {
        "city": "Krakow",
        "country": " Poland",
        "lat": 50.0646501,
        "lon": 19.9449799,
        "days": 4,
        "year": 2012,
        "purpose": "desire"
    },
  	{
        "city": "Negril",
        "country": "Jamaica",
        "lat": 18.1315,
        "lon": -77.2736,
        "days": 7,
        "year": 2007,
        "purpose": "travel"
    },
{
        "city": "Guatemala City",
        "country": "Guatemala",
        "lat": 14.6317,
        "lon": -90.5263,
        "days": 7,
        "year": 2007,
        "purpose": "travel"
    }
]

inlet.js

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

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

var cw = 650;
var ch = 406;

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


var days_min = 0;
var days_max = d3.max(col, function(d) {return d.days});

var days_scale = d3.scale.sqrt()
    .domain([days_min, days_max])
    .range([1, 43]);


var days_color_scale = d3.scale.linear()
    .domain([days_min, days_max])
    .range(["#E747C7", "#39353D"])
    .interpolate(d3.interpolateHcl)


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:"#000000",
            "fill-opacity": 0.16,
            stroke:"#4D728F",
            "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 days_scale(d.days);
      },
	  fill: function(d) {
        return days_color_scale(d.days);
      },
      "fill-opacity": 0.4,
      "stroke":"#DF6DEE",
      "stroke-width": 0.5
    })

  .append("title")
  .text(function(d) {
    return d.city;
  })
    
  	.on("mouseover", function(d) {
        console.log(d, d.city);
    })
  
  
var title = svg.append("text")
    .text("WHERE HAVE I BEEN?")
    .attr({
      "transform": "translate(" + [390, 76] + ")",
      "text-anchor": "middle",
      "font-weight": 300,
      "font-size": 42,
      "fill-opacity": 0.7,
      "fill": "#4B6592"
    })
    
 var subtitle = svg.append("text")
    .text("(size represents duration of time spent)")
    .attr({
      "transform": "translate(" + [390, 99] + ")",
      "text-anchor": "middle",
      "font-weight": 500,
      "font-size": 12,
      "fill": "#5996B8"
    })
    
    
    
    
    
    
    
  
  

inlet.svg

worldcountries.json