Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Created September 24, 2019 21:04
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 jwilber/44bc238edbae5859411374361315e3eb to your computer and use it in GitHub Desktop.
Save jwilber/44bc238edbae5859411374361315e3eb to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.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)
const colors = ['red', 'green', 'blue'];
const labels = ['jared', 'd', 'w'];
const legendItems = labels.map((key, i) => ({
color: colors[i],
text: key
}));
console.log(legendItems);
const legend = svg.append('svg')
.attr('x', 10)
.attr('y', 10);
// add background
legend.append('rect')
.style('fill', 'white')
.attr('fill-opacity', 0.5)
.attr('stroke', 'black')
.attr('stroke-width', 2)
.attr('rx', 5)
.attr('ry', 5)
.attr('width', 150)
.attr('height', 150)
.attr('x', 8)
.attr('y', 5);
legendItems.forEach((item, i) => {
const g = legend.append('g');
g.append('rect')
.style('fill', colors[i])
.attr('width', 8)
.attr('height', 8)
.attr('x', 45)
.attr('y', 17 + 20 * i + 8)
g.append('text')
.style('font-size', '15')
.attr('x', 15 + 12)
.attr('y', 17 + 20 * i + 8)
.text(item.text);
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment