block by mapsam 8ce3390021ce40be2254

Benchmark: Encoding 1/22/2016

Full Screen

Benchmark numbers from node-mapnik version 3.4.15.

This is a visualization of the encoding benchmarks for the Mapnik implemention of Mapbox Vector Tile specification located here. Hovering on a line will show the file name. Clicking on that line will open a new tab to the data file for inspection or reference.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Benchmark (Encoding)</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<style>
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
	fill: none;
	stroke-opacity: 0.2;
	stroke: #c0c0c0;
	stroke-width: 1.5px;
	cursor: pointer;
	position: relative;
}
.line.hover {
	stroke-opacity: 1;
	stroke: orange;
}

#info {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 15px;
}
</style>
<body>
<div id="info"></div>
<script>
	window.onload = function() {
		var margin = {top: 10, right: 20, bottom: 30, left: 40},
		    width = 960 - margin.left - margin.right,
		    height = 500 - margin.top - margin.bottom;

		var x = d3.scale.linear()
		    .range([0, width]);

		var y = d3.scale.linear()
		    .range([height, 0]);

		var xAxis = d3.svg.axis()
		    .scale(x)
		    .orient("bottom");

		var yAxis = d3.svg.axis()
		    .scale(y)
		    .orient("left");

		var line = d3.svg.line()
		    .x(function(d) { return x(d.iterations); })
		    .y(function(d) { return y(d.time); });

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

		d3.json("encoding-iterations.json", function(error, data) {

		 	// get min/max for time
		 	var iterationsArray = [];
		 	var timeArray = [];
		 	for (var r in data) {
		 		for (var c in data[r]) {
		 			iterationsArray.push(+c);
		 			timeArray.push(+data[r][c]);
		 		}
		 	}
		 	y.domain(d3.extent(timeArray));
		 	x.domain(d3.extent(iterationsArray));

		 	svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + height + ")")
				.call(xAxis);

			svg.append("g")
				  .attr("class", "y axis")
				  .call(yAxis)
				.append("text")
				  .attr("transform", "rotate(-90)")
				  .attr("y", 6)
				  .attr("dy", ".71em")
				  .style("text-anchor", "end")
				  .text("Time (ms)");

			for (var file in data) {
				var d = data[file];

				var graphData = [];
				for (var i in d) {
					graphData.push({
						iterations: i.toString(),
						time: d[i].toString()
					});
				}

				console.log(graphData);

				svg.append('path')
					.datum(graphData)
					.attr('class', 'line')
					.attr('data-file-name', file)
					.attr('d', line)
					.on('mouseover', function(d) {
						console.log(d);
						d3.select(this).attr('class', 'line hover');
						var name = d3.select(this).attr('data-file-name');
						d3.select('#info').text(name);
					})
					.on('mouseout', function(d) {
						d3.select(this).attr('class', 'line');
						d3.select('#info').text('');
					})
					.on('click', function(d) {
						var url = 'https://github.com/mapnik/geometry-test-data/blob/master/input/' + d3.select(this).attr('data-file-name');
						window.open(url);
					});
			
			}

		});
	}
</script>
</body>
</html>

encoding-iterations.json

{
  "clockwise-polygon-clockwise-hole.json": {
    "10000":134.53,
    "20000":249.58,
    "30000":377.53,
    "40000":471,
    "50000":578.42,
    "60000":728.3,
    "70000":810.01,
    "80000":953.62,
    "90000":1085.29,
    "100000":1178.27
  },
  "clockwise-polygon-counter-clockwise-hole.json": {
    "10000":130.6,
    "20000":241.42,
    "30000":361.4,
    "40000":486.55,
    "50000":646.5,
    "60000":710.71,
    "70000":820.61,
    "80000":919.33,
    "90000":1042.09,
    "100000":1176.74
  },
  "clockwise-polygon.json": {
    "10000":98.08,
    "20000":175.1,
    "30000":251.35,
    "40000":335.09,
    "50000":415.6,
    "60000":518.69,
    "70000":578.7,
    "80000":682.96,
    "90000":762.52,
    "100000":861.42
  },
  "counter-clockwise-polygon-clockwise-hole.json": {
    "10000":126.58,
    "20000":239.15,
    "30000":357.34,
    "40000":479.3,
    "50000":597.85,
    "60000":716.36,
    "70000":820.02,
    "80000":923.51,
    "90000":1057.26,
    "100000":1162.97
  },
  "counter-clockwise-polygon-counter-clockwise-hole.json": {
    "10000":128.89,
    "20000":238.84,
    "30000":370.33,
    "40000":485.84,
    "50000":599.57,
    "60000":704.6,
    "70000":820.84,
    "80000":933.51,
    "90000":1058.18,
    "100000":1165.17
  },
  "counter-clockwise-polygon.json": {
    "10000":90.26,
    "20000":174.94,
    "30000":256.05,
    "40000":333.06,
    "50000":407.74,
    "60000":503,
    "70000":566.34,
    "80000":647.39,
    "90000":725.75,
    "100000":818.12
  },
  "multi-polygon-with-duplicate-polygon.json": {
    "10000":138.48,
    "20000":285.55,
    "30000":413.51,
    "40000":537.04,
    "50000":675.69,
    "60000":816.59,
    "70000":947.22,
    "80000":1084.07,
    "90000":1270.14,
    "100000":1381.36
  },
  "multi-polygon-with-shared-edge.json": {
    "10000":136.4,
    "20000":263,
    "30000":384.01,
    "40000":523.98,
    "50000":660.74,
    "60000":766.17,
    "70000":914.77,
    "80000":1042.76,
    "90000":1138.57,
    "100000":1249.66
  },
  "multi-polygon-with-spikes.json": {
    "10000":10.57,
    "20000":27.52,
    "30000":41.55,
    "40000":53.99,
    "50000":55.61,
    "60000":73.3,
    "70000":83.91,
    "80000":89.57,
    "90000":110.23,
    "100000":120.06
  },
  "multipolygon-both-clockwise.json": {
    "10000":137.69,
    "20000":268.82,
    "30000":385.8,
    "40000":531.89,
    "50000":632.34,
    "60000":765.39,
    "70000":874.22,
    "80000":1049.93,
    "90000":1126.7,
    "100000":1260.49
  },
  "multipolygon-both-counter-clockwise.json": {
    "10000":139.53,
    "20000":259.59,
    "30000":397.55,
    "40000":509.1,
    "50000":659.02,
    "60000":778.97,
    "70000":899.97,
    "80000":1025.53,
    "90000":1157.05,
    "100000":1247.09
  },
  "multipolygon-overlap-different-orientations.json": {
    "10000":137.36,
    "20000":266.27,
    "30000":397.92,
    "40000":508.9,
    "50000":632.74,
    "60000":783.1,
    "70000":885.82,
    "80000":1037.07,
    "90000":1140.93,
    "100000":1260.28
  },
  "nested-multi-polygon-outer-clockwise-inner-clockwise-hole-clockwise.json": {
    "10000":177.68,
    "20000":341.75,
    "30000":494.48,
    "40000":652.96,
    "50000":835.57,
    "60000":967.32,
    "70000":1154.64,
    "80000":1317.63,
    "90000":1431.8,
    "100000":1595.97
  },
  "nested-multi-polygon-outer-clockwise-inner-clockwise-hole-counter-clockwise.json": {
    "10000":169.51,
    "20000":334.86,
    "30000":490.26,
    "40000":673.8,
    "50000":819.57,
    "60000":972.02,
    "70000":1143.93,
    "80000":1298.19,
    "90000":1472.65,
    "100000":1665.23
  },
  "nested-multi-polygon-outer-clockwise-inner-clockwise.json": {
    "10000":133.74,
    "20000":254.64,
    "30000":387.65,
    "40000":515.06,
    "50000":657.81,
    "60000":761.43,
    "70000":907.41,
    "80000":1006.99,
    "90000":1149.23,
    "100000":1277.9
  },
  "nested-multi-polygon-outer-clockwise-inner-counter-clockwise-hole-clockwise.json": {
    "10000":174.83,
    "20000":339.78,
    "30000":490.9,
    "40000":648.55,
    "50000":807.73,
    "60000":971.31,
    "70000":1148.95,
    "80000":1287.25,
    "90000":1514.82,
    "100000":1609.84
  },
  "nested-multi-polygon-outer-clockwise-inner-counter-clockwise-hole-counter-clockwise.json": {
    "10000":179.03,
    "20000":329.37,
    "30000":488.22,
    "40000":650.55,
    "50000":820.91,
    "60000":990.84,
    "70000":1149.1,
    "80000":1312.18,
    "90000":1484.12,
    "100000":1625.8
  },
  "nested-multi-polygon-outer-clockwise-inner-counter-clockwise.json": {
    "10000":131.12,
    "20000":276.21,
    "30000":381.8,
    "40000":504.82,
    "50000":645.13,
    "60000":763.52,
    "70000":921.74,
    "80000":1009.39,
    "90000":1144.88,
    "100000":1273.1
  },
  "nested-multi-polygon-outer-counter-clockwise-inner-clockwise-hole-clockwise.json": {
    "10000":172.01,
    "20000":328.25,
    "30000":496.17,
    "40000":665.65,
    "50000":803.67,
    "60000":990.79,
    "70000":1119.28,
    "80000":1303.13,
    "90000":1447.04,
    "100000":1616.46
  },
  "nested-multi-polygon-outer-counter-clockwise-inner-clockwise-hole-counter-clockwise.json": {
    "10000":166.82,
    "20000":329.39,
    "30000":505.11,
    "40000":688.12,
    "50000":805.98,
    "60000":998.45,
    "70000":1124.39,
    "80000":1271.54,
    "90000":1455.36,
    "100000":1588.71
  },
  "nested-multi-polygon-outer-counter-clockwise-inner-clockwise.json": {
    "10000":135.2,
    "20000":271.71,
    "30000":381.72,
    "40000":499.45,
    "50000":645.67,
    "60000":774.96,
    "70000":877.8,
    "80000":1011.68,
    "90000":1133.87,
    "100000":1280.81
  },
  "nested-multi-polygon-outer-counter-clockwise-inner-counter-clockwise-hole-clockwise.json": {
    "10000":177.13,
    "20000":338.59,
    "30000":497.12,
    "40000":644.98,
    "50000":814.4,
    "60000":969.24,
    "70000":1145.6,
    "80000":1794.23,
    "90000":1762.56,
    "100000":1949.88
  },
  "nested-multi-polygon-outer-counter-clockwise-inner-counter-clockwise-hole-counter-clockwise.json": {
    "10000":180.41,
    "20000":363.04,
    "30000":744.99,
    "40000":1913.63,
    "50000":1398.12,
    "60000":1087.26,
    "70000":2051.03,
    "80000":1713.17,
    "90000":2584.22,
    "100000":1797.75
  },
  "nested-multi-polygon-outer-counter-clockwise-inner-counter-clockwise.json": {
    "10000":140.05,
    "20000":280.66,
    "30000":388.98,
    "40000":534.72,
    "50000":674.07,
    "60000":772.26,
    "70000":906.07,
    "80000":1044.91,
    "90000":1351.64,
    "100000":1562.4
  },
  "overlapping-multi-polygon.json": {
    "10000":142.32,
    "20000":277.44,
    "30000":482.12,
    "40000":578.98,
    "50000":949.09,
    "60000":773.69,
    "70000":977.75,
    "80000":1069.57,
    "90000":1186.29,
    "100000":1305.59
  },
  "polygon-covered-with-hole.json": {
    "10000":140.14,
    "20000":282.9,
    "30000":414.99,
    "40000":549.53,
    "50000":682.65,
    "60000":880.01,
    "70000":1011.58,
    "80000":1044.14,
    "90000":1359.52,
    "100000":1344.93
  },
  "polygon-no-interior.json": {
    "10000":126.53,
    "20000":238.04,
    "30000":358.19,
    "40000":496.82,
    "50000":591.97,
    "60000":698.1,
    "70000":818.94,
    "80000":931.09,
    "90000":1059.23,
    "100000":1154.84
  },
  "polygon-two-intersecting-holes-and-self-intersection.json": {
    "10000":199.45,
    "20000":372.18,
    "30000":545.51,
    "40000":710.12,
    "50000":876.18,
    "60000":1056.65,
    "70000":1229.93,
    "80000":1390.49,
    "90000":1582.37,
    "100000":1755.22
  },
  "polygon-two-intersecting-holes.json": {
    "10000":154.56,
    "20000":299.43,
    "30000":456.76,
    "40000":583.63,
    "50000":710.83,
    "60000":878.22,
    "70000":1016.01,
    "80000":1163.53,
    "90000":1323.56,
    "100000":1436.66
  },
  "polygon-with-doulble-nested-holes.json": {
    "10000":130.21,
    "20000":249.93,
    "30000":368.06,
    "40000":483.54,
    "50000":615.69,
    "60000":728,
    "70000":864.67,
    "80000":962.34,
    "90000":1107.07,
    "100000":1227.58
  },
  "polygon-with-extending-hole.json": {
    "10000":141.41,
    "20000":265.47,
    "30000":392.69,
    "40000":523.06,
    "50000":644.54,
    "60000":769.34,
    "70000":906.32,
    "80000":1044.77,
    "90000":1152.17,
    "100000":1281.88
  },
  "polygon-with-exterior-hole.json": {
    "10000":130.35,
    "20000":242.72,
    "30000":357.59,
    "40000":474,
    "50000":607.85,
    "60000":702.37,
    "70000":871.45,
    "80000":947.52,
    "90000":1057.77,
    "100000":1176.48
  },
  "polygon-with-hole-shared-edge.json": {
    "10000":129.08,
    "20000":241,
    "30000":359.42,
    "40000":477.37,
    "50000":584.92,
    "60000":720.22,
    "70000":824.07,
    "80000":937.14,
    "90000":1068,
    "100000":1164.85
  },
  "polygon-with-hole-with-shared-point.json": {
    "10000":132.29,
    "20000":251.17,
    "30000":375.66,
    "40000":486.49,
    "50000":607.89,
    "60000":738.83,
    "70000":826.76,
    "80000":967.88,
    "90000":1070.85,
    "100000":1210.1
  },
  "polygon-with-spike.json": {
    "10000":10.97,
    "20000":29.22,
    "30000":40.48,
    "40000":54.95,
    "50000":60.88,
    "60000":72.16,
    "70000":78.66,
    "80000":93.15,
    "90000":107.05,
    "100000":107.27
  },
  "self-intersecting-ring-polygon.json": {
    "10000":112.91,
    "20000":211.96,
    "30000":329.3,
    "40000":448.72,
    "50000":522.93,
    "60000":616.12,
    "70000":760.74,
    "80000":825.39,
    "90000":942.79,
    "100000":1024.98
  }
}