Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active September 13, 2017 18:39
Show Gist options
  • Save mbostock/6d9d75ee13abbcfea6e0 to your computer and use it in GitHub Desktop.
Save mbostock/6d9d75ee13abbcfea6e0 to your computer and use it in GitHub Desktop.
Download ZIP
Seven Symbols
Raw
.block
license: gpl-3.0
Raw
README.md

The seven symbols supported by d3-shape. Each has a configurable area (here, 2500 square pixels) and is positioned around its centroid.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
float: left;
}
circle {
fill: none;
stroke: #f00;
stroke-width: 1.5px;
}
</style>
<div style="width:700px;margin:200px auto;display:block;">
<svg width="100" height="100"><g transform="translate(50,50)"><path data-type="symbolCircle"/><circle r="28"></circle></g></svg>
<svg width="100" height="100"><g transform="translate(50,50)"><path data-type="symbolCross"/><circle r="35"></circle></g></svg>
<svg width="100" height="100"><g transform="translate(50,50)"><path data-type="symbolDiamond"/><circle r="46"></circle></g></svg>
<svg width="100" height="100"><g transform="translate(50,50)"><path data-type="symbolSquare"/><circle r="36"></circle></g></svg>
<svg width="100" height="100"><g transform="translate(50,50)"><path data-type="symbolStar"/><circle r="47"></circle></g></svg>
<svg width="100" height="100"><g transform="translate(50,50)"><path data-type="symbolTriangle"/><circle r="44"></circle></g></svg>
<svg width="100" height="100"><g transform="translate(50,50)"><path data-type="symbolWye"/><circle r="37"></circle></g></svg>
</div>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script>
var symbol = d3.symbol().size(2500);
var path = d3.selectAll("path")
.datum(function(d) { return d3[this.getAttribute("data-type")]; });
d3.timer(function(elapsed) {
path
.attr("d", function(d) { return symbol.type(d)(); })
.attr("transform", function(d) { return "rotate(" + elapsed / 20 + ")"; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment