Built with blockbuilder.org
forked from sxywu‘s block: Personal logo iteration 4
forked from sxywu‘s block: Personal logo iteration 5
<!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: //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: 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;
var height = 400;
var svg = d3.select('svg')
.attr('width', width)
.attr('height', height);
var colors = d3.scaleOrdinal()
.range(['#F5C6DD', '#B6DEED', '#9E84C2', '#D3BEDA', '#FFE4E1']);
/*************************************
** background rectangle??
*************************************/
// svg.append('rect')
// .attr('width', width)
// .attr('height', height)
// .attr('fill', '#FFE4E1')
// .attr('fill-opacity', 0.25);
/*************************************
** draw snowflake
*************************************/
var strokeWidth = 2;
var strokeColor = '#83CCF5';
var fillColor = '#B6DEED';
var angles = _.times(6, function(i) {
return 60 * i;
});
// data for the diamonds for the snowflake
var transforms = [
[[0, -36], 1.25, .25], // translate, scale, opacity
[[0, -26], 1, .2],
[[0, -16], .85, .2],
// [[0, 0], .7, 0.2],
];
// do da drawing
var snowflake = svg.append('g')
.classed('snowflake', true)
// .attr('opacity', .5)
.attr('transform', 'translate(' + [width / 2, height / 2] + ')scale(.95)');
var flake = snowflake.selectAll('g')
.data(angles).enter().append('g')
.attr('transform', function(d) {
return 'rotate(' + d + ')';
});
flake.append('line')
.attr('y1', -50)
.attr('y2', 50)
.attr('stroke-width', strokeWidth)
.attr('stroke', strokeColor)
.attr('stroke-opacity', 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', fillColor)
.attr('fill-opacity', function(d) {
return d[2];
}).attr('stroke-width', strokeWidth)
.attr('stroke', strokeColor)
.attr('stroke-opacity', 1);
/*************************************
** 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)');
delauney.selectAll('path')
.data(triangles)
.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('opacity', .4);
/*************************************
** 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>