Built with blockbuilder.org
Last active
August 29, 2016 18:49
-
-
Save sxywu/f53c7be8967bd51d76edf3b022ab4ff9 to your computer and use it in GitHub Desktop.
Personal logo iteration 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment