martgnz · October 28, 2017 11:01
diff --git a/.block b/.block
 license: mit
 height: 630
 border: none
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8" /> 
 <style>
 body {
    max-width: 960px;
    position: relative;
 }
 .legend {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
 }
 .legend circle {
    fill: none;
    stroke: rgb(130,130,130);
    stroke-width: 1px;
 }
 .legend text {
    fill: #777;
    font: 10px sans-serif;
    text-anchor: middle;
 }
 </style>
 <body>
 <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <script src="https://d3js.org/queue.v1.min.js"></script>
 <script src="https://d3js.org/topojson.v1.min.js"></script>
 <script src="https://unpkg.com/[email protected]/rbush.js"></script>
 <script src="https://unpkg.com/[email protected]"></script>
 <script src="https://unpkg.com/[email protected]/spam.min.js"></script>

 <script type='text/javascript'>
 var width = 960;
 var height = 630;

 var radius = d3.scale
  .sqrt()
  .domain([0, 3141991])
  .range([0, 45]);

 var svg = d3
  .select("body")
  .append("svg")
  .attr("class", "legend");

 var legend = svg
  .append("g")
  .attr("transform", "translate(" + 50 + "," + 90 + ")")
  .selectAll("g")
  .data([300000, 1000000, 3000000])
  .enter()
  .append("g");

 legend
  .append("circle")
  .attr("cy", function(d) {
    return -radius(d);
  })
  .attr("stroke-dasharray", "5, 5")
  .attr("r", radius);

 legend
  .append("text")
  .attr("y", function(d) {
    return -2 * radius(d);
  })
  .attr("dy", "1.3em")
  .text(d3.format(".1s"));

 queue()
  .defer(d3.json, "provincias.json")
  .defer(d3.csv, "data.csv")
  .await(ready);

 function ready(error, provincias, ciudades) {
  if (error) throw error;

  topojson.presimplify(provincias);

  var map = new StaticCanvasMap({
    element: "body",
    width: width,
    height: height,
    projection: d3.geo
      .conicConformalSpain()
      .translate([width / 2 + 300, height / 2 + 100])
      .scale(960 * 4.3),
    data: [
      {
        features: topojson.feature(
          provincias,
          provincias.objects["provincias"]
        ),
        static: {
          paintfeature: function(parameters, d) {
            parameters.context.lineWidth = 2;
            parameters.context.strokeStyle = "rgb(255,255,255)";
            parameters.context.fillStyle = "rgb(221, 221, 221)";
            parameters.context.stroke();
            parameters.context.fill();
          },
          postpaint: function(parameters) {
            ciudades
              .sort(function(a, b) {
                return b.population - a.population;
              })
              .forEach(function(d) {
                var projectedPoint = parameters.map
                  .settings()
                  .projection([+d.lng, +d.lat]);

                parameters.context.beginPath();
                parameters.context.arc(
                  projectedPoint[0],
                  projectedPoint[1],
                  radius(d.population),
                  0,
                  2 * Math.PI,
                  true
                );
                parameters.context.fillStyle = "rgba(44, 127, 184, .5)";
                parameters.context.fill();
              });

            // Get Canary Island border from the projection
            parameters.context.beginPath();
            parameters.context.moveTo(0, 0);
            parameters.context.lineTo(300, 150);
            parameters.context.lineWidth = 0.5;

            var p = new Path2D(
              parameters.map.settings().projection.getCompositionBorders()
            );
            parameters.context.strokeStyle = "#555";
            parameters.context.stroke(p);
          }
        }
      }
    ]
  });
  map.init();
 }
 </script>
diff --git a/provincias.json b/provincias.json
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8" />
	<style>
	body {
	max-width: 960px;
	position: relative;
	}
	.legend {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	}
	.legend circle {
	fill: none;
	stroke: rgb(130,130,130);
	stroke-width: 1px;
	}
	.legend text {
	fill: #777;
	font: 10px sans-serif;
	text-anchor: middle;
	}
	</style>
	<body>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script src="https://unpkg.com/[email protected]/rbush.js"></script>
	<script src="https://unpkg.com/[email protected]"></script>
	<script src="https://unpkg.com/[email protected]/spam.min.js"></script>

	<script type='text/javascript'>
	var width = 960;
	var height = 630;

	var radius = d3.scale
	.sqrt()
	.domain([0, 3141991])
	.range([0, 45]);

	var svg = d3
	.select("body")
	.append("svg")
	.attr("class", "legend");

	var legend = svg
	.append("g")
	.attr("transform", "translate(" + 50 + "," + 90 + ")")
	.selectAll("g")
	.data([300000, 1000000, 3000000])
	.enter()
	.append("g");

	legend
	.append("circle")
	.attr("cy", function(d) {
	return -radius(d);
	})
	.attr("stroke-dasharray", "5, 5")
	.attr("r", radius);

	legend
	.append("text")
	.attr("y", function(d) {
	return -2 * radius(d);
	})
	.attr("dy", "1.3em")
	.text(d3.format(".1s"));

	queue()
	.defer(d3.json, "provincias.json")
	.defer(d3.csv, "data.csv")
	.await(ready);

	function ready(error, provincias, ciudades) {
	if (error) throw error;

	topojson.presimplify(provincias);

	var map = new StaticCanvasMap({
	element: "body",
	width: width,
	height: height,
	projection: d3.geo
	.conicConformalSpain()
	.translate([width / 2 + 300, height / 2 + 100])
	.scale(960 * 4.3),
	data: [
	{
	features: topojson.feature(
	provincias,
	provincias.objects["provincias"]
	),
	static: {
	paintfeature: function(parameters, d) {
	parameters.context.lineWidth = 2;
	parameters.context.strokeStyle = "rgb(255,255,255)";
	parameters.context.fillStyle = "rgb(221, 221, 221)";
	parameters.context.stroke();
	parameters.context.fill();
	},
	postpaint: function(parameters) {
	ciudades
	.sort(function(a, b) {
	return b.population - a.population;
	})
	.forEach(function(d) {
	var projectedPoint = parameters.map
	.settings()
	.projection([+d.lng, +d.lat]);

	parameters.context.beginPath();
	parameters.context.arc(
	projectedPoint[0],
	projectedPoint[1],
	radius(d.population),
	0,
	2 * Math.PI,
	true
	);
	parameters.context.fillStyle = "rgba(44, 127, 184, .5)";
	parameters.context.fill();
	});

	// Get Canary Island border from the projection
	parameters.context.beginPath();
	parameters.context.moveTo(0, 0);
	parameters.context.lineTo(300, 150);
	parameters.context.lineWidth = 0.5;

	var p = new Path2D(
	parameters.map.settings().projection.getCompositionBorders()
	);
	parameters.context.strokeStyle = "#555";
	parameters.context.stroke(p);
	}
	}
	}
	]
	});
	map.init();
	}
	</script>