Built with blockbuilder.org
forked from sxywu's block: d3.unconf 2016, v6
license: mit |
Built with blockbuilder.org
forked from sxywu's block: d3.unconf 2016, v6
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script> | |
<script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script> | |
<script type="text/javascript" src="http://gka.github.io/chroma.js/vendor/chroma-js/chroma.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { | |
width: 1000px; | |
height: 1000px | |
} | |
</style> | |
</head> | |
<body> | |
<svg></svg> | |
<script> | |
var colors = chroma.cubehelix() | |
.start(200) | |
.rotations(-0.35) | |
.gamma(0.7) | |
.lightness([0.3, 0.8]) | |
.scale() // convert to chroma.scale | |
.correctLightness() | |
.colors(27); | |
var midpoint = -2/3; | |
var halfSide = Math.sqrt(1 / 3); | |
var favoritesScale = d3.scaleLinear() | |
.domain([0, 27]) | |
.range([midpoint, -1]); | |
var versionScale = d3.scaleLinear() | |
.domain([1, 4]).range([6, 3]); | |
var firstScale = d3.scaleOrdinal() | |
.domain(_.range(27)).range(colors); | |
var triangle = [ | |
'M' + (-halfSide) + ',-1', | |
'L' + (halfSide) + ',-1', | |
'L0,0', | |
'Z' | |
]; | |
var hexSize = 75; | |
var hexData = { | |
favorite: 12, | |
version: 1, | |
first: 23, | |
}; | |
var svg = d3.select('svg').append('g'); | |
var hex = svg.append('g') | |
.datum(hexData) | |
.attr('transform', 'translate(' + [hexSize * 2, hexSize * 2] + ')' + | |
'scale(' + hexSize + ')'); | |
var triangles = hex.selectAll('g') | |
.data(d => { | |
var start = _.random(6); | |
return _.times(versionScale(d.version), i => { | |
return { | |
angle: ((i + start) % 6) * 60, | |
midpoint: favoritesScale(d.favorite), | |
color: firstScale(d.first), | |
}; | |
}); | |
}).enter().append('g') | |
.attr('transform', d => 'rotate(' + d.angle + ')'); | |
triangles.append('path') | |
.attr('d', triangle.join(' ')) | |
.attr('fill', d => d.color); | |
triangles.selectAll('.subtri') | |
.data(d => _.times(3, i => { | |
return Object.assign({ | |
subangle: i * 120, | |
}, d); | |
})).enter().append('path') | |
.classed('subtri', true) | |
.attr('transform', d => 'rotate(' + d.subangle + ' 0 ' + midpoint + ')') | |
.attr('d', d => { | |
return [ | |
'M' + (-halfSide) + ',-.99', | |
'L0,' + d.midpoint, | |
'L' + halfSide + ',-.99', | |
'Z' | |
].join(' '); | |
}).attr('fill', '#fff'); | |
</script> | |
</body> |