Skip to content

Instantly share code, notes, and snippets.

@curran

curran/.block

Last active October 2, 2017 11:39
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 curran/a05f3e2ac2b5e241606e67cdd391e1f2 to your computer and use it in GitHub Desktop.
Save curran/a05f3e2ac2b5e241606e67cdd391e1f2 to your computer and use it in GitHub Desktop.
Download ZIP
[unlisted] Re-create Marks & Channels Graphic
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<style>
body {
margin: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var data = ["Cross", "Circle", "Square", "Triangle"];
svg.selectAll('path')
.data(data) // v4
.enter()
.append('path')
.attrs({
d: d3.symbol()
.size(50 * 50)
.type(d => d3['symbol' + d]),
transform: function (d, i) {
return 'translate(' + (i * 120 + 80) + ',' + (80 + i * 4.5) + ')';
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment