Built with blockbuilder.org
forked from sxywu's block: Personal logo iteration 4
license: mit |
Built with blockbuilder.org
forked from sxywu's block: Personal logo iteration 4
<!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: 24px; | |
} | |
/* 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 = 300; | |
var height = 300; | |
var svg = d3.select('svg') | |
.attr('width', width) | |
.attr('height', height) | |
var delauney = svg.append('g') | |
.classed('delauney', true) | |
.attr('transform', 'rotate(36, 300, 200)'); | |
var colors = d3.scaleOrdinal() | |
.range(['#F5C6DD', '#B6DEED', '#9E84C2', '#D3BEDA', '#FFE4E1']); | |
var voronoi = d3.voronoi(); | |
var projection = d3.geoGingery() | |
.translate([width / 2, height]); | |
var points = _.map(data, function(points) { | |
// d3 projection takes [long, lat] | |
return projection([points[1], points[0]]); | |
}); | |
var subsets = [ | |
[.1, .7], | |
[.1, .3], | |
[.3, .4], | |
[.6, .75], | |
[.9, 1] | |
]; | |
var triangles = _.map(subsets, function(subset) { | |
var start = Math.round(points.length * subset[0]); | |
var end = Math.round(points.length * subset[1]); | |
start = Math.max(0, start); | |
end = Math.min(points.length, end); | |
var subPoints = _.slice(points, start, end); | |
console.log(start, end, points.length); | |
return voronoi.triangles(subPoints); | |
}); | |
// draw the triangles | |
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('opacity', 0.6); | |
// draw snowflake | |
var snowflake = svg.append('g') | |
.classed('snowflake', true) | |
.attr('transform', 'translate(' + [width / 2, height / 2] + ')scale(1.25)'); | |
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 = 2; | |
var strokeColor = '#9E84C2'; | |
var fillColor = '#fff'; | |
flake.append('line') | |
.attr('y1', -50) | |
.attr('y2', 50) | |
.attr('stroke-width', strokeWidth) | |
.attr('stroke', strokeColor) | |
.attr('stroke-opacity', .85); | |
// draw the diamonds for the snowflake | |
var transforms = [ | |
[[0, -36], 1.25, .5], // translate, scale, opacity | |
[[0, -28], 1, .4], | |
[[0, -20], .85, .25], | |
[[0, 0], .7, 0.2], | |
]; | |
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', .85); | |
svg.append('text') | |
.attr('x', width / 2) | |
.attr('y', height / 5 * 4) | |
.attr('text-anchor', 'middle') | |
.attr('dy', '.35em') | |
.attr('fill', strokeColor) | |
.text('sxywu') | |
</script> | |
</body> |