Draggable multi-column color legend. Powered by d3-legend.
Last active
November 17, 2017 15:39
-
-
Save fandu/63dc67ea433b0606b7453f9b66a8ad8f to your computer and use it in GitHub Desktop.
Draggable Color Legend
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js"></script> | |
| <script> | |
| var names = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; | |
| var colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"]; | |
| drawLegend(names, colors, 1); | |
| drawLegend(names, colors, 3); | |
| drawLegend(names, colors, 6); | |
| drawLegend(names, colors, 100); | |
| function drawLegend(names, colors, cols, dx, dy, padding) { | |
| dx = typeof dx !== 'undefined' ? dx : 10; | |
| dy = typeof dy !== 'undefined' ? dy : 10; | |
| cols = typeof cols !== 'undefined' ? cols : 1; | |
| padding = typeof padding !== 'undefined' ? padding : 12; | |
| var drag = d3.behavior.drag() | |
| .on("drag", function() { | |
| var svg = d3.select(this); | |
| var x = parseInt(svg.style("left")); | |
| var y = parseInt(svg.style("top")); | |
| svg.style("left", x + d3.event.dx).style("top", y + d3.event.dy); | |
| }); | |
| var svg = d3.select("html") | |
| .append("svg") | |
| .style("position", "relative") | |
| .style("left", dx) | |
| .style("top", dy) | |
| .call(drag); | |
| var container = svg.append("g"); | |
| var background = container.append("rect"); | |
| var legend = container.append("g"); | |
| var rows = Math.ceil(names.length / cols); | |
| var curStart = 0; | |
| for (var i = 0; i < cols; i++) { | |
| var curLegend = legend.append("g") | |
| .attr("transform", "translate(" + curStart + ",0)") | |
| .call(d3.legend.color() | |
| .shapeRadius(5) | |
| .shapePadding(15) | |
| .shape('circle') | |
| .orient('vertal') | |
| .scale(d3.scale.ordinal() | |
| .domain(names.slice(i * rows, (i + 1) * rows)) | |
| .range(colors.slice(i * rows, (i + 1) * rows)) | |
| ) | |
| ); | |
| curStart += curLegend.node().getBBox().width + padding; | |
| } | |
| // adapting sizes based on the bounding box of legend | |
| var size = container.node().getBBox(); | |
| container.attr("transform", "translate(" + (-size.x) + "," + (-size.y) + ")"); | |
| legend.attr("transform", "translate(" + padding + "," + padding + ")"); | |
| background.attr("x", size.x).attr("y", size.y).attr("width", size.width + 2 * padding).attr("height", size.height + 2 * padding); | |
| svg.attr("width", size.width + 2 * padding).attr("height", size.height + 2 * padding); | |
| // css styles | |
| svg.style("cursor", "move") | |
| .style("font-family", "Helvetica, Arial, serif") | |
| .style("font-size", "14px") | |
| .style("box-shadow", "2px 2px 1px #888888"); | |
| background.attr("fill", "white") | |
| .style("stroke", "black") | |
| .style("stroke-width", 2); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment