sxywu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
  <style>
    /* blend options taken from visual cinnamon tutorial: http://www.visualcinnamon.com/2016/05/beautiful-color-blending-svg-d3.html */
    /*Set isolate on the group element*/
    svg { isolation: isolate; }
    /*Set blend mode on SVG element: e.g. screen, multiply*/
    .delauney path { mix-blend-mode: multiply; }
    .snowflake line, .snowflake path{mix-blend-mode: overlay};
  </style>
</head>

<body>
  <svg></svg>

  <script>
		var data = [
      [14.599512, 120.984222, 'Manila, Philippines'], // lat, long
      [39.922478,	116.443710, 'Beijing, China'],
      [35.443707, 139.638031, 'Yokohama, Japan'],
      [36.0835, 140.0766, 'Tsukuba, Japan'],
      [34.170563, -118.837593, 'Thousand Oaks, USA'],
      [42.361145, -71.057083, 'Boston, USA'],
      [37.871853, -122.258423, 'Berkeley, USA'],
      [40.730610, -73.935242, 'New York, USA'],
      [29.951065, -90.071533, 'New Orleans, USA'],
      [61.217381, -149.863129, 'Anchorage, USA'],
      [51.508530, -0.076132, 'London, UK'],
      [52.344444, 4.916667, 'Amsterdam, Netherlands'],
      [48.870502, 2.304897, 'Paris, France'],
      [41.390205, 2.154007, 'Barcelona, Spain'],
      [40.416775, -3.703790, 'Madrid, Spain'],
      [38.736946, -9.142685, 'Lisbon, Spain'],
      [47.608013, -122.335167, 'Seattle, USA'],
      [35.652832, 139.839478, 'Tokyo, Japan'],
      [34.3852, 132.4553, 'Hiroshima, Japan'],
      [34.6937, 135.5022, 'Osaka, Japan'],
      [64.135666, -21.862675, 'Reykjavík, Iceland'],
      [59.334591, 18.063240, 'Stockholm, Sweden'],
      [22.108543, -159.496765, 'Kauai, USA'],
      [41.7688, 140.7288, 'Hakodate, Japan']
    ];

    var width = 600;
    var height = 400;
    var svg = d3.select('svg')
    	.attr('width', width)
    	.attr('height', height)
    var delauney = svg.append('g').classed('delauney', true);

    var colors = d3.scaleOrdinal()
    	.range(['#B6DEED', '#F5C6DD', '#9E84C2', '#D3BEDA', '#FFE4E1']);

    var voronoi = d3.voronoi();
    var projections = [
      'geoGringortenQuincuncial',
//       'geoGingery',
//       'geoPeirceQuincuncial',
//       'geoSinuMollweide',
//       'geoWiechel'
    ];
    var triangles = _.map(projections, function(projection) {
      projection = d3[projection]()
      	.translate([width / 2, height / 2]);
      var points =  _.map(data, function(points) {
        // d3 projection takes [long, lat]
        return projection([points[1], points[0]]);
      });
      return voronoi.triangles(points);
    });

    delauney.selectAll('g')
    	.data(triangles)
    	.enter().append('g')
    		.selectAll('path')
    			.data(function(d) {return d;})
          .enter().append('path')
          .attr('d', function(d) {
            return 'M' + _.map(d, function(point) {
              return point.join(',');
            }).join(' L') + 'Z';
          }).attr('fill', function(d, i) {return colors(i)})
          .attr('stroke', function(d, i) {return colors(i)})
    //     	.attr('stroke-width', 1.5)
          .attr('opacity', 0.75);

    // draw snowflake
    var snowflake = svg.append('g')
    	.classed('snowflake', true)
    	.attr('transform', 'translate(' + [width / 2, height / 2] + ')scale(2)');
    var angles = _.times(6, function(i) {
      return 60 * i;
    });
    var flake = snowflake.selectAll('g')
    	.data(angles).enter().append('g')
    	.attr('transform', function(d) {
        return 'rotate(' + d + ')';
      });
    var strokeWidth = 1.25;
    var strokeColor = '#fcfcfc';
    flake.append('line')
    	.attr('y1', -50)
    	.attr('y2', 50)
    	.attr('stroke-width', strokeWidth)
    	.attr('stroke', strokeColor);
    // draw the diamonds for the snowflake
    var transforms = [
      [[0, -36], 1.25, .5], // translate, scale, opacity
      [[0, -28], 1, .25],
      [[0, -20], 1, .25],
      [[0, 0], .7, 0.1],
    ];
    flake.selectAll('path')
      .data(transforms)
      .enter().append('path')
        .attr('d', 'M0,-12 L10,0 L0,12 L-10,0 L0,-12Z').attr('transform', function(d) {
      		return 'translate(' + d[0] + ')' +
            'scale(' + d[1] + ')';
        }).attr('fill', strokeColor)
    		.attr('fill-opacity', function(d) {
      		return d[2];
        }).attr('stroke-width', strokeWidth)
        .attr('stroke', strokeColor);
  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
	<style>
	/* blend options taken from visual cinnamon tutorial: http://www.visualcinnamon.com/2016/05/beautiful-color-blending-svg-d3.html */
	/Set isolate on the group element/
	svg { isolation: isolate; }
	/Set blend mode on SVG element: e.g. screen, multiply/
	.delauney path { mix-blend-mode: multiply; }
	.snowflake line, .snowflake path{mix-blend-mode: overlay};
	</style>
	</head>

	<body>
	<svg></svg>

	<script>
	var data = [
	[14.599512, 120.984222, 'Manila, Philippines'], // lat, long
	[39.922478, 116.443710, 'Beijing, China'],
	[35.443707, 139.638031, 'Yokohama, Japan'],
	[36.0835, 140.0766, 'Tsukuba, Japan'],
	[34.170563, -118.837593, 'Thousand Oaks, USA'],
	[42.361145, -71.057083, 'Boston, USA'],
	[37.871853, -122.258423, 'Berkeley, USA'],
	[40.730610, -73.935242, 'New York, USA'],
	[29.951065, -90.071533, 'New Orleans, USA'],
	[61.217381, -149.863129, 'Anchorage, USA'],
	[51.508530, -0.076132, 'London, UK'],
	[52.344444, 4.916667, 'Amsterdam, Netherlands'],
	[48.870502, 2.304897, 'Paris, France'],
	[41.390205, 2.154007, 'Barcelona, Spain'],
	[40.416775, -3.703790, 'Madrid, Spain'],
	[38.736946, -9.142685, 'Lisbon, Spain'],
	[47.608013, -122.335167, 'Seattle, USA'],
	[35.652832, 139.839478, 'Tokyo, Japan'],
	[34.3852, 132.4553, 'Hiroshima, Japan'],
	[34.6937, 135.5022, 'Osaka, Japan'],
	[64.135666, -21.862675, 'Reykjavík, Iceland'],
	[59.334591, 18.063240, 'Stockholm, Sweden'],
	[22.108543, -159.496765, 'Kauai, USA'],
	[41.7688, 140.7288, 'Hakodate, Japan']
	];

	var width = 600;
	var height = 400;
	var svg = d3.select('svg')
	.attr('width', width)
	.attr('height', height)
	var delauney = svg.append('g').classed('delauney', true);

	var colors = d3.scaleOrdinal()
	.range(['#B6DEED', '#F5C6DD', '#9E84C2', '#D3BEDA', '#FFE4E1']);

	var voronoi = d3.voronoi();
	var projections = [
	'geoGringortenQuincuncial',
	// 'geoGingery',
	// 'geoPeirceQuincuncial',
	// 'geoSinuMollweide',
	// 'geoWiechel'
	];
	var triangles = _.map(projections, function(projection) {
	projection = d3[projection]()
	.translate([width / 2, height / 2]);
	var points = _.map(data, function(points) {
	// d3 projection takes [long, lat]
	return projection([points[1], points[0]]);
	});
	return voronoi.triangles(points);
	});

	delauney.selectAll('g')
	.data(triangles)
	.enter().append('g')
	.selectAll('path')
	.data(function(d) {return d;})
	.enter().append('path')
	.attr('d', function(d) {
	return 'M' + _.map(d, function(point) {
	return point.join(',');
	}).join(' L') + 'Z';
	}).attr('fill', function(d, i) {return colors(i)})
	.attr('stroke', function(d, i) {return colors(i)})
	// .attr('stroke-width', 1.5)
	.attr('opacity', 0.75);

	// draw snowflake
	var snowflake = svg.append('g')
	.classed('snowflake', true)
	.attr('transform', 'translate(' + [width / 2, height / 2] + ')scale(2)');
	var angles = _.times(6, function(i) {
	return 60 * i;
	});
	var flake = snowflake.selectAll('g')
	.data(angles).enter().append('g')
	.attr('transform', function(d) {
	return 'rotate(' + d + ')';
	});
	var strokeWidth = 1.25;
	var strokeColor = '#fcfcfc';
	flake.append('line')
	.attr('y1', -50)
	.attr('y2', 50)
	.attr('stroke-width', strokeWidth)
	.attr('stroke', strokeColor);
	// draw the diamonds for the snowflake
	var transforms = [
	[[0, -36], 1.25, .5], // translate, scale, opacity
	[[0, -28], 1, .25],
	[[0, -20], 1, .25],
	[[0, 0], .7, 0.1],
	];
	flake.selectAll('path')
	.data(transforms)
	.enter().append('path')
	.attr('d', 'M0,-12 L10,0 L0,12 L-10,0 L0,-12Z').attr('transform', function(d) {
	return 'translate(' + d[0] + ')' +
	'scale(' + d[1] + ')';
	}).attr('fill', strokeColor)
	.attr('fill-opacity', function(d) {
	return d[2];
	}).attr('stroke-width', strokeWidth)
	.attr('stroke', strokeColor);
	</script>
	</body>