Personal logo iteration 8

forked from sxywu's block: Personal logo iteration 4

forked from sxywu's block: Personal logo iteration 5

forked from sxywu's block: Personal logo iteration 6

<!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>
  <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
  <style>
    * {
      font-family: "Libre Baskerville";
      font-size: 32px;
    }
    
    /* blend options taken from visual cinnamon tutorial: https://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: screen; } */
/*     .snowflake line, .snowflake path{mix-blend-mode: multiply}; */
  </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, Portugal'],
      [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 = window.innerWidth / 2;
    var height = 400;
    var svg = d3.select('svg')
    	.attr('width', width)
    	.attr('height', height);
    var defs = svg.append('defs');
    
    var colors = d3.scaleOrdinal()
    	.range(['#F5C6DD', '#B6DEED', '#9E84C2', '#D3BEDA', '#FFE4E1']);
    var strokeWidth = 4;
    var strokeColor = '#1193dd';
    var fillColor = '#F5C6DD';
    
    /*************************************
    ** gradient
    *************************************/
    //Set up a horizontal gradient
    var gradient = defs.append("radialGradient")
    	.attr('id', 'gradient')
//     	.attr('r', '35%')
//     	.attr("cx", (-radius / 3) + "px")
//       .attr("cy",  (-radius / 3) + "px")
//       .attr("r", (radius * 1.25) + "px")
    	.attr("gradientUnits", "userSpaceOnUse");
    
    //First stop to fill the region between 0% and 40%
    gradient.append("stop")
      .attr("offset", "20%")
      .attr("stop-color", fillColor);
    //Second stop to fill the region between 40% and 100%
    gradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", strokeColor);
    
    /*************************************
    ** draw triangles
    *************************************/
    var voronoi = d3.voronoi();
    var projection = d3.geoGingery()
    	.translate([width / 2, height / 2]);
    
    var points = _.map(data, function(points) {
      // d3 projection takes [long, lat]
      return projection([points[1], points[0]]);
    });
    var triangles = voronoi.triangles(points);
    
    // do the actual drawing
    var delauney = svg.append('g')
    	.classed('delauney', true)
    	.attr('transform', 'rotate(36,' + [width / 2, height / 2] + ')translate(24, 56)scale(.75)');
    delauney.selectAll('path')
      .data(triangles)
      .enter().append('path')
      .attr('d', function(d) {
        return 'M' + _.map(d, function(point) {
          return point.join(',');
        }).join(' L') + 'Z';
      })
    //     delauney.selectAll('line')
//       .data(triangles)
//       .enter().append('line')
//       .attr('x1', function(d) {return d.source[0]})
//     	.attr('y1', function(d) {return d.source[1]})
//     	.attr('x2', function(d) {return d.target[0]})
//     	.attr('y2', function(d) {return d.target[1]})
      .attr('fill', function(d, i) {return colors(i)})
    	.attr('fill-opacity', .05)
    	.style('stroke', 'url(#gradient)')
//       .attr('stroke', function(d, i) {return colors(i)})
    	.attr('stroke-width', strokeWidth)
    	.attr('stroke-linecap', 'round')
    	.attr('stroke-linejoin', 'round')
    	.attr('stroke-opacity', .75);
    
    
    /*************************************
    ** sxywu text
    *************************************/
    svg.append('text')
    	.attr('x', width / 2)
    	.attr('y', height / 2 + 125)
    	.attr('text-anchor', 'middle')
    	.attr('dy', '.35em')
    	.attr('fill', strokeColor)
//     	.text('sxywu')
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo-projection.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js