Travel Visualizations

Sun 21 September 2014

I've made a simple visualization of where I have and haven't been in the world:

So far, that's 24 countries. I'll keep the map up to date on a dedicated page.

Setting up the map was surprisingly easy, I used jVectorMap:

var countries = [
  // Europe
  "IE", "GB", "PT", "ES", "FR", "NL", "BE", "DE", "CH", "IT", "AT", "DK", "NO",
  "SE", "CZ", "HR", "GR", "TR", "HU", "SK", "SI", 
  // North America
  "US", "MX",
  // Asia
  "JP"
];

var countryColors = {};
countries.forEach(function(c) { countryColors[c] = 1; });

$('#map').vectorMap({
  map: 'world_mill_en',
  backgroundColor: 'white',
  zoomMax: 6,
  regionStyle: {
    initial: {
      fill: '#aaa',
      "fill-opacity": 0.7,
      stroke: 'none',
      "stroke-width": 0,
      "stroke-opacity": 1
    },
    hover: {
      "fill-opacity": 1.0,
    },
  },
  series: {
    regions: [{
      values: countryColors,
      scale: ['#C8EEFF', '#0071A4'],
      normalizeFunction: 'polynomial',
    }],
  },
});

And that's it. Hopefully it will get me to fill in those grey spots on my map :)

Tags: traveling, programming

M ↓ MARKDOWN

italics

surround text with

*asterisks*

bold

surround text with

**two asterisks**

hyperlink

[hyperlink](https://example.com)

or just a bare URL

code

surround text with

`backticks`

~~strikethrough~~

surround text with

~~two tilde characters~~

quote

prefix with

Loading comments...