Skip to content

Instantly share code, notes, and snippets.

@jonyrock

jonyrock/.block

Last active December 12, 2016 13:12
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 jonyrock/066366ec01bdb44407c2f3cafe9194fb to your computer and use it in GitHub Desktop.
Save jonyrock/066366ec01bdb44407c2f3cafe9194fb to your computer and use it in GitHub Desktop.
Download ZIP
RegularPolys
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var width = 960;
var height = 500;
var lineLength = 150;
var legendWidth = 360;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var poly = undefined;
var angle = undefined;
var angleRad = undefined;
var angleOut = undefined;
var angleOutRad = undefined;
function drawArcs() {
function getD(inRad, outRadOffset, startAngle, endAngle) {
return d3.arc()
.innerRadius(inRad)
.outerRadius(inRad + outRadOffset)
.startAngle(startAngle)
.endAngle(endAngle)();
}
poly
.append('path')
.attr('d',
getD(
lineLength * 0.2, 1,
Math.PI / 2, Math.PI / 2 - angleRad
)
);
poly
.append('path')
.attr('d',
getD(
lineLength * 0.18, 1,
Math.PI + Math.PI / 2,
Math.PI + Math.PI / 2 + angleOutRad
)
)
.attr('transform', `translate(${lineLength}, 0)`)
poly
.append('path')
.attr('d',
getD(
lineLength * 0.18 + 2, 1,
Math.PI + Math.PI / 2,
Math.PI + Math.PI / 2 + angleOutRad
)
)
.attr('transform', `translate(${lineLength}, 0)`)
var arcOut2AngleStart = 3 * Math.PI / 2;
poly
.append('path')
.attr('d',
getD(
lineLength * 0.08, 1,
arcOut2AngleStart + angleOutRad,
arcOut2AngleStart - angleOutRad
)
)
.attr('transform',
`rotate(${-angle}), translate(${lineLength}, 0)`
)
poly
.append('path')
.attr('d',
getD(
lineLength * 0.08 + 2, 1,
arcOut2AngleStart + angleOutRad,
arcOut2AngleStart - angleOutRad
)
)
.attr('transform',
`rotate(${-angle}), translate(${lineLength}, 0)`
)
poly
.append('path')
.attr('d',
getD(
lineLength * 0.08 + 4, 1,
arcOut2AngleStart + angleOutRad,
arcOut2AngleStart - angleOutRad
)
)
.attr('transform',
`rotate(${-angle}), translate(${lineLength}, 0)`
)
}
function drawLabels() {
var f = d3.format('.1f');
poly
.append('text')
.text(f(angle))
.attr('y', -lineLength * 0.22 * Math.sin(angleRad/2))
.attr('x', lineLength * 0.22 * Math.cos(angleRad/2))
.attr('text-anchor', 'start')
.style('font-size', 10)
.style('font-family', 'monospace')
poly.append("text")
.text(f(angleOut) + "°")
.attr("y", -lineLength * 0.22 * Math.sin(angleOutRad/2))
.attr("x", lineLength - lineLength * 0.22 * Math.cos(angleOutRad/2))
.attr('text-anchor', "end")
.style("font-size", 10)
.style("font-family", "monospace")
poly
.append('text')
.text(f(angleOut * 2))
.attr('y', -lineLength * 0.77 * Math.sin(angleRad))
.attr('x', lineLength * (0.77 * Math.cos(angleRad)))
.attr('text-anchor', 'middle')
.style('font-size', 10)
.style('font-family', 'monospace')
}
function drawPoly(count) {
if(poly) {
poly.remove();
}
poly = svg.append('g');
angle = 360 / count;
angleRad = Math.PI * angle / 180;
angleOut = (180 - angle) / 2;
angleOutRad = Math.PI * angleOut / 180;
for(var i = 0; i < count; i++) {
poly
.append('line')
.attr('stroke', '#ddd')
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', lineLength)
.attr('y2', 0)
.attr('transform', `rotate(${angle * i})`)
poly
.append('line')
.attr('stroke', 'black')
.attr('x1', lineLength)
.attr('y1', 0)
.attr('x2', Math.cos(angleRad) * lineLength)
.attr('y2', -Math.sin(angleRad) * lineLength)
.attr('transform', `rotate(${angle * i})`)
}
drawArcs();
drawLabels();
poly
.attr(
'transform',
`translate(${(width - legendWidth)/2},${height/2})`
)
}
drawPoly(10)
d3.csv('polyNames.csv', function(data){
var nameG = svg.append('g')
var labels = nameG
.selectAll('g')
.data(data)
.enter()
.append('text')
.text(function(d){
return d.name
})
.attr('transform', (d,i)=>{
return `translate(0, ${i * 13})`
})
.style('font-size', 10)
.style('font-family', 'monospace')
.style('cursor', 'pointer')
.on('click', function(d,i){
drawPoly(i+3)
labels.style('fill', 'black')
d3.select(this).style('fill', 'red')
})
labels.filter(function(d,i){
if(i===0) {
d3.select(this).on('click').call(this, d,i);
}
})
nameG
.attr(
'transform',
`translate(
${width - legendWidth},
${(height - data.length * 13)/2}
)`
)
});
</script>
</body>
Raw
polyNames.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
name
Triangle
Square
Pentagon
Hexagon
Heptagon
Octagon
Nonagon
Decagon
Hendecagon
Dodecagon
Triskaidecagon
Tetrakaidecagon
Pentadecagon
Hexakaidecagon
Heptadecagon
Octakaidecagon
Enneadecagon
Icosagon
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment