where have i been in the world

_.md

[ Launch: where have i been in the world ] 5190839 by ptvans

See Previous Inlet [ Gist ]

config.json

{"description":"where have i been in the world","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"costofliving.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"worldcountries.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"travel.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"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,"tab":"edit","display_percent":0.6289991445680069,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":934,"height":530,"hide":true},"editor_json0":{"vim":false,"emacs":false,"width":825,"height":474,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":873,"height":317,"hide":true}}

inlet.js

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








d3.select("#display").style("background-color","#EEEEEE")

var cw = 809;
var ch = 406;

var xy = d3.geo.mercator()
    .scale(1400)
    .translate([530, 325])
//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, 80]);


var days_color_scale = d3.scale.linear()
    .domain([days_min, days_max])
    .range(["#E74747", "#487FD3"])
    .interpolate(d3.interpolateHcl)


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

  
chart.append("g")
  .attr("id", "countries");

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

var labels = chart.append("g")
    .classed("labels",true)
    .attr("id", "labels");

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.26,
            stroke:"#423392",
            "stroke-width": 0.5,
          "stroke-opacity": 0.5
        })
  

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

var lbltxt = labels.selectAll("g.lbltxt")
    .data(col,function(d){
    return d.city;
    })
    .enter()
    .append("g")
    .classed("lbltxt", true)
    .attr({
      "text-anchor": "middle",
      "font-weight": 300,
      "font-size": 9,
      "fill-opacity":0.5,
      "pointer-events":"none",
      "fill": "#000000"
      })
    .append("text")
    .text(function(d) {
    return (d.city);
  })
    .attr("transform", function(d) {
        var p = xy([d.lon, d.lat]);
        return "translate(" + p + ")";
    })
    .attr({"alignment-baseline":"after-edge"})
    

var points = chart.select("#points")
    .selectAll("circle")
    .data(col)
    .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":"#4C305F",
      "stroke-width": 0.5
    })
  .append("title")
  .text(function(d) {
    return (d.city + ", " + d.days + " days");
  })
   points
    .on("mouseover", function(d,i) {
    labels.selectAll("g.lbltxt")
      .data([d],function(c){
    return c.city;
      })
      .attr({
        "fill-opacity": 1,
        "font-size": 11,
        "font-weight": 700
      })
     .on("mouseover")
      .attr({"fill-opacity":1})
  })
  .on("mouseout", function(d,i) {
    labels.selectAll("g.lbltxt")
      .data([d],function(c){
    return c.city;
      })
      .attr({
        "fill-opacity": 0.5,
        "font-size": 9,
        "font-weight": 300
      })
  })
     

    

inlet.svg

travel.json

[
   {
        "city": "Zurich",
        "country": " Switzerland",
        "lat": 47.3690239,
        "lon": 8.5380326,
        "days": 10,
        "year": 2012,
        "purpose": "travel"
    },
  	{
        "city": "Davos",
        "country": " Switzerland",
        "lat": 46.8045,
        "lon": 9.8367,
        "days": 1,
        "year": 2012,
        "purpose": "travel"
	
    },
    {
        "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": "Venice",
        "country": " Italy",
        "lat": 45.4343363,
        "lon": 12.3387844,
        "days": 5,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Treviso",
        "country": " Italy",
        "lat": 45.6667,
        "lon": 12.25,
        "days": 1,
        "year": 2006,
        "purpose": "travel"
    },
  {
        "city": "Chicago",
        "country": " United States",
        "lat": 41.850033,
        "lon": -87.6500523,
        "days": 540,
        "year": 2007,
        "purpose": "lived"
    },
    {
        "city": "San Francisco",
        "country": " United States",
        "lat": 37.775206,
        "lon": -122.419209,
        "days": 1080,
        "year": 2009,
        "purpose": "live"
    },
    {
        "city": "Seattle",
        "country": " United States",
        "lat": 47.620973,
        "lon": -122.347276,
        "days": 4,
        "year": 2011,
        "purpose": "travel"
    },
  {
        "city": "Toronto",
        "country": " Canada",
        "lat": 43.670233,
        "lon": -79.386755,
        "days": 3,
        "year": 1990,
        "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": "Munich",
        "country": " Germany",
        "lat": 48.1391265,
        "lon": 11.5801863,
        "days": 2,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Los Angeles",
        "country": " United States",
        "lat": 34.0522342,
        "lon": -118.2436849,
        "days": 180,
        "year": 63.97,
        "purpose": 73.58
    },
    {
        "city": "San Diego",
        "country": " United States",
        "lat": 32.7153292,
        "lon": -117.1572551,
        "days": 3,
        "year": 2011,
        "purpose": "travel"
    },
  {
        "city": "Phoenix",
        "country": " United States",
        "lat": 33.4483771,
        "lon": -112.0740373,
        "days": 2,
        "year": 2009,
        "purpose": "travel"
    },
  {
        "city": "Koblenz",
        "country": " Germany",
        "lat": 50.3597,
        "lon": 7.5978,
        "days": 20,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Cologne",
        "country": " Germany",
        "lat": 50.9406645,
        "lon": 6.9599115,
        "days": 2,
        "year": 2006,
        "purpose": "travel"
    },
    {
        "city": "Frankfurt",
        "country": " Germany",
        "lat": 50.1115118,
        "lon": 8.6805059,
        "days": 2,
        "year": 2006,
        "purpose": "travel"
    }, 
    {
        "city": "Berlin",
        "country": " Germany",
        "lat": 52.5234051,
        "lon": 13.4113999,
        "days": 3,
        "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": "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": "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": 2,
        "year": 2008,
        "purpose": "travel"
    },
    {
        "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"
    }
]

worldcountries.json