nl-hugo/.block

## .block
height: 900
license: MIT

## .gitignore
node_modules
npm-debug.log

## README.md

      
    Raw
  

              README.md
            
          
    Trabi tour

This is a visualization of my Trabant rally in Budapest.
Motivation

This month I had the pleasure to drive in a 25-year old small, uncomfortable, weakly equipped, loud, slow car powered by a two-stroke engine through the city of Budapest. Yes, it was a super cool blue Trabant cabriolet. This visualization relives the fun we had. Go Trabi, go!
Data

I captured the gps track with my iPhone. The map is downloaded from Mapzen and converted into topojson format.
Perform the following steps to recreate the map:


Install dev dependencies
npm install


Download and convert the map
npm run map


TODO:


 reduce json file size
 reduce gpx file size
 animate waypoints

License

MIT

  
## budapest.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              budapest.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## LICENSE
MIT License

Copyright (c) 2016 Hugo Janssen

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<style>

text {
  fill: #999;
  font-size: 9px;
  font-family: sans-serif;
  font-weight: bold;
  text-anchor: middle;
}

.road {
  fill: none;
  stroke: #eee;
}
.water {
  fill: #88f;
  opacity: 0.5;
}

</style>
<body></body>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://d3js.org/d3-scale-chromatic.v1.min.js'></script>
<script src='https://d3js.org/d3-queue.v2.min.js'></script>
<script src='https://d3js.org/topojson.v1.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<script>
  var minuteFormat = d3.timeFormat("g%H%M");

  var margin = {top: 10, right: 10, bottom: 10, left: 10},
      width = 545 - margin.left - margin.right,
      height = 900 - margin.top - margin.bottom;

  var projection = d3.geoMercator()
      .center([19.05, 47.525]) // Budapest
      .translate([width / 2, height / 2])
      .scale(width * 750);

  var path = d3.geoPath()
      .projection(projection);

  var svg = d3.select('body').append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
    .append('g')
      .attr('class', 'g-map')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  var colorScale = d3.scaleLinear()
      .range([0, 1]);

  var timeScale = d3.scaleTime()
    .rangeRound([0, width]);

  var wptColors = d3.scaleOrdinal()
    .domain(['Start', 'Finish', 'Challenge'])
    .range(['green', 'red', 'grey']);

  d3.queue()
      .defer(d3.json, 'budapest.json')
      .defer(d3.xml, 'trabi.gpx')
      .await(ready);

  function startClock() {
    var currTime = moment(timeScale.domain()[0]);;
    setInterval(function() {
      if(currTime.isBefore(moment(timeScale.domain()[1]))) {
        currTime = currTime.add(1, 'm');

        d3.select('.g-map').selectAll('circle.' + minuteFormat(currTime))
          .transition()
            .duration(100)
            .style('opacity', 1.0)
          .transition()
            .duration(1000)
            .style('opacity', 0.3);
      } else {
        currTime = moment(timeScale.domain()[0]);
        d3.select('.g-map').selectAll('circle.' + minuteFormat(currTime))
          .style('opacity', 0);
      }
    }, 200);
  }

  function ready(error, map, gpx) {
    if (error) return console.error(error);

    svg.append('path')
        .datum(topojson.feature(map, map.objects.water))
        .attr('class', 'water')
        .attr('d', path);

    svg.append('path')
        .datum(topojson.feature(map, map.objects.roads))
        .attr('class', 'road')
        .attr('d', path);

    var points = gpx.getElementsByTagName('trkpt'),
        wpts = gpx.getElementsByTagName('wpt'),
        data = [],
        waypoints = [];

    // extract gpx data
    for (i = 0; i < points.length; i++) {
      var point = points[i],
          ele = parseInt(point.getElementsByTagName('ele')[0].firstChild.nodeValue),
          lat = parseFloat(point.getAttribute('lat')),
          lng = parseFloat(point.getAttribute('lon')),
          ts = d3.isoParse(point.getElementsByTagName('time')[0].firstChild.nodeValue);

      data.push({ 'lat': lat, 'lon': lng, 'ele': ele, 'ts': ts });
    }

    for (i = 0; i < wpts.length; i++) {
      var wpt = wpts[i],
          lat = parseFloat(wpt.getAttribute('lat')),
          lng = parseFloat(wpt.getAttribute('lon')),
          name = wpt.getElementsByTagName('name')[0].firstChild.nodeValue,
          desc = wpt.getElementsByTagName('desc')[0].firstChild.nodeValue,
          type = wpt.getElementsByTagName('type')[0].firstChild.nodeValue,
          ts = d3.isoParse(wpt.getElementsByTagName('time')[0].firstChild.nodeValue);

          waypoints.push({ 'lat

## package.json

      
    Raw
  

              package.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
        
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## trabi.gpx

      
    Raw
  

              trabi.gpx
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	MIT License

	Copyright (c) 2016 Hugo Janssen

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	The above copyright notice and this permission notice shall be included in all
	copies or substantial portions of the Software.

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	SOFTWARE.
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<style>

	text {
	fill: #999;
	font-size: 9px;
	font-family: sans-serif;
	font-weight: bold;
	text-anchor: middle;
	}

	.road {
	fill: none;
	stroke: #eee;
	}
	.water {
	fill: #88f;
	opacity: 0.5;
	}

	</style>
	<body></body>
	<script src='https://d3js.org/d3.v4.min.js'></script>
	<script src='https://d3js.org/d3-scale-chromatic.v1.min.js'></script>
	<script src='https://d3js.org/d3-queue.v2.min.js'></script>
	<script src='https://d3js.org/topojson.v1.min.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

	<script>
	var minuteFormat = d3.timeFormat("g%H%M");

	var margin = {top: 10, right: 10, bottom: 10, left: 10},
	width = 545 - margin.left - margin.right,
	height = 900 - margin.top - margin.bottom;

	var projection = d3.geoMercator()
	.center([19.05, 47.525]) // Budapest
	.translate([width / 2, height / 2])
	.scale(width * 750);

	var path = d3.geoPath()
	.projection(projection);

	var svg = d3.select('body').append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('class', 'g-map')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	var colorScale = d3.scaleLinear()
	.range([0, 1]);

	var timeScale = d3.scaleTime()
	.rangeRound([0, width]);

	var wptColors = d3.scaleOrdinal()
	.domain(['Start', 'Finish', 'Challenge'])
	.range(['green', 'red', 'grey']);

	d3.queue()
	.defer(d3.json, 'budapest.json')
	.defer(d3.xml, 'trabi.gpx')
	.await(ready);

	function startClock() {
	var currTime = moment(timeScale.domain()[0]);;
	setInterval(function() {
	if(currTime.isBefore(moment(timeScale.domain()[1]))) {
	currTime = currTime.add(1, 'm');

	d3.select('.g-map').selectAll('circle.' + minuteFormat(currTime))
	.transition()
	.duration(100)
	.style('opacity', 1.0)
	.transition()
	.duration(1000)
	.style('opacity', 0.3);
	} else {
	currTime = moment(timeScale.domain()[0]);
	d3.select('.g-map').selectAll('circle.' + minuteFormat(currTime))
	.style('opacity', 0);
	}
	}, 200);
	}

	function ready(error, map, gpx) {
	if (error) return console.error(error);

	svg.append('path')
	.datum(topojson.feature(map, map.objects.water))
	.attr('class', 'water')
	.attr('d', path);

	svg.append('path')
	.datum(topojson.feature(map, map.objects.roads))
	.attr('class', 'road')
	.attr('d', path);

	var points = gpx.getElementsByTagName('trkpt'),
	wpts = gpx.getElementsByTagName('wpt'),
	data = [],
	waypoints = [];

	// extract gpx data
	for (i = 0; i < points.length; i++) {
	var point = points[i],
	ele = parseInt(point.getElementsByTagName('ele')[0].firstChild.nodeValue),
	lat = parseFloat(point.getAttribute('lat')),
	lng = parseFloat(point.getAttribute('lon')),
	ts = d3.isoParse(point.getElementsByTagName('time')[0].firstChild.nodeValue);

	data.push({ 'lat': lat, 'lon': lng, 'ele': ele, 'ts': ts });
	}

	for (i = 0; i < wpts.length; i++) {
	var wpt = wpts[i],
	lat = parseFloat(wpt.getAttribute('lat')),
	lng = parseFloat(wpt.getAttribute('lon')),
	name = wpt.getElementsByTagName('name')[0].firstChild.nodeValue,
	desc = wpt.getElementsByTagName('desc')[0].firstChild.nodeValue,
	type = wpt.getElementsByTagName('type')[0].firstChild.nodeValue,
	ts = d3.isoParse(wpt.getElementsByTagName('time')[0].firstChild.nodeValue);

	waypoints.push({ 'lat