Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@sxywu
Last active October 7, 2016 16:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sxywu/c6cb4328d14498e152a761ff134ac18a to your computer and use it in GitHub Desktop.
Save sxywu/c6cb4328d14498e152a761ff134ac18a to your computer and use it in GitHub Desktop.
d3.unconf 2016, v6
license: mit
<!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>
// first just make triangle
var midpoint = -2/3;
var halfSide = Math.sqrt(1 / 3);
var favoritesScale = d3.scaleLinear()
.domain([0, 27])
.range([midpoint, -1])
var subtri = [
'M' + (-halfSide) + ',-.99',
'L0,' + favoritesScale(12),
'L' + halfSide + ',-.99',
'Z'
];
var triangle = [
'M' + (-halfSide) + ',-1',
'L' + (halfSide) + ',-1',
'L0,0',
'Z'
]
var svg = d3.select('svg').append('g')
.attr('transform', 'translate(100, 100)scale(75)');
svg.append('path')
.attr('d', triangle.join(' '));
svg.selectAll('.subtri')
.data(_.range(3)).enter().append('path')
.classed('subtri', true)
.attr('transform', i => 'rotate(' + (i * 120) + ' 0 ' + midpoint + ')')
.attr('d', subtri.join(' '))
// .attr('stroke', '#666')
.attr('fill', '#fff');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment