Skip to content

Instantly share code, notes, and snippets.

@lsbardel
Last active January 3, 2017 16:46
Show Gist options
  • Save lsbardel/64e007e866535ba45e2c0e9b3a2ccacb to your computer and use it in GitHub Desktop.
Save lsbardel/64e007e866535ba45e2c0e9b3a2ccacb to your computer and use it in GitHub Desktop.
GiottoJS Logo
license: bsd-3-clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Giotto Logo</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://giottojs.org/d3-canvas-transition/0.3.3/d3-canvas-transition.js"></script>
</head>
<body>
<div id="paper" style="position: absolute;">
<label>
<input id='svg' name="type" type="radio" checked>
<span>svg</span>
</label>
<label>
<input id='canvas' name="type" type="radio">
<span>canvas</span>
</label>
</div>
<div id="example" style="max-width: 960px"></div>
<script>
(function () {
d3.select('#svg').on('click', function () {draw('svg');});
d3.select('#canvas').on('click', function () {draw('canvas');});
if (d3.resolution() > 1) {
d3.select('#paper').append('label').html(
"<input id='canvas-low' name='type' type='radio'><span>canvas low resolution</span>"
);
d3.select('#canvas-low').on('click', function () {draw('canvas', 1);});
}
var example = d3.select("#example"),
width = d3.getSize(example.style('width')),
height = Math.min(500, width),
conv = Math.PI/180,
logo = [['Italy', 42772],
['France', 50764],
['Spain', 33397],
['USA', 19187],
['Argentina', 15473],
['China', 13200],
['Australia', 11180],
['Chile', 10463],
['Germany', 9132],
['South Africa', 9725],
['Portugal', 5610],
['New Zealand', 2350],
['Rest of World', 63776]],
colors = ['#005AAA', '#0091E8', '#BB7200', '#F2A605', '#F2E905'],
padAngle = 2,
dangle = 10;
draw('svg');
function draw (type, r) {
example.select('.paper').remove();
var radius = 0.5*Math.min(width, height),
paper = example
.append(type)
.classed('paper', true)
.attr('width', width).attr('height', height).canvasResolution(r).canvas(true);
paper
.selectAll('g')
.data(d3.range(20))
.enter()
.append('g')
.attr('transform', "translate(" + width / 2 + "," + height / 2 + ")")
.each(function (d) {
var inner = 0.9*radius,
arc = d3.arc().cornerRadius(10).outerRadius(radius).innerRadius(inner),
arcs = d3.pie()
.value(function (d) {return d[1];})
.startAngle(d*dangle*conv)
.padAngle(padAngle*conv)(logo);
radius = 0.86*radius;
d3.select(this)
.selectAll('path')
.data(arcs)
.enter()
.append('path')
.attr('d', arc)
.style("stroke-width", 0)
.style("fill", "none")
.transition().delay(function (d) {
return 100*d.startAngle;
})
.style("fill", function (d, i) {
while (i >= colors.length) i-= colors.length;
return colors[i];
});
});
}
}());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment