- How to use an external SVG in a D3 visualisation
- How to do custom line endings in SVG eg. arrows or turtles
Last active
August 2, 2019 07:39
-
-
Save tomgp/d59de83f771ca2b6f1d4 to your computer and use it in GitHub Desktop.
SVG Arrow heads
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
| <html> | |
| <head> | |
| <title>SVG Arrows with D3</title> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <link rel="stylesheet" type="text/css" href="http://www.toffeemilkshake.co.uk/tgp-ui-styles/ui-style.css"> | |
| <style type="text/css"> | |
| .arrow{ | |
| stroke-width:5; | |
| stroke:#000; | |
| stroke-dasharray:5, 5; | |
| } | |
| circle{ | |
| stroke-width:5; | |
| stroke:#000; | |
| fill:#FFF; | |
| } | |
| #turtle-icon, #arrow{ | |
| stroke-width:1; | |
| stroke-dasharray:0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Arrow heads and turtles in D3</h1> | |
| <div class="viz"></div> | |
| <hr> | |
| <p><a href="http://www.toffeemilkshake.co.uk">Tom Pearson 2014</a></p> | |
| <p>Turtle Icon by Martin Smith from <a href="http://thenounproject.com/">The Noun Project</a></p> | |
| </body> | |
| <script type="text/javascript"> | |
| d3.xml('turtle.svg', "image/svg+xml", function(xml){ | |
| var importedNode = document.importNode(xml.documentElement, true).getElementsByTagName("g")[0], | |
| height = 500, width = 800, | |
| margin = 50, | |
| type = ['turtle','arrow']; | |
| svg = d3.select(".viz").append("svg") | |
| .attr("width", 800) | |
| .attr("height", 600), | |
| defs = svg.append("defs") | |
| defs.append("marker") | |
| .attr({ | |
| "id":"arrow", | |
| "viewBox":"0 -5 10 10", | |
| "refX":5, | |
| "refY":0, | |
| "markerWidth":4, | |
| "markerHeight":4, | |
| "orient":"auto" | |
| }) | |
| .append("path") | |
| .attr("d", "M0,-5L10,0L0,5") | |
| .attr("class","arrowHead"); | |
| defs.append("marker") | |
| .attr({ | |
| "id":"turtle", | |
| "viewBox":"0 0 100 100", | |
| "refX":50, | |
| "refY":50, | |
| "markerWidth":10, | |
| "markerHeight":10, | |
| "orient":"auto" | |
| }) | |
| .node().appendChild(importedNode); | |
| d3.range(15).forEach(function(){ //I don't normally do loops like this, just a whim | |
| svg.append('line') | |
| .attr({ | |
| "class":"arrow", | |
| "marker-end":"url(#" + type[Math.round(Math.random())] + ")", | |
| "x1":width/2, | |
| "y1":height/2, | |
| "x2":margin + Math.random()*(width-margin*2), | |
| "y2":margin + Math.random()*(height-margin*2) | |
| }); | |
| }) | |
| svg.append('circle') | |
| .attr({ | |
| cx:width/2,cy:height/2,r:20 | |
| }) | |
| }) | |
| </script> | |
| </html> |
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
| <?xml version="1.0" encoding="utf-8"?> | |
| <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
| <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> | |
| <g id="turtle-icon"> | |
| <path d="M62.895,60.089c-0.478,0.276-0.901,0.947-0.949,1.497l-0.363,4.355c-0.046,0.55,0.303,0.769,0.758,0.455 | |
| c3.169-2.17,5.356-5.301,6.566-9c0.172-0.524-0.1-0.732-0.577-0.457L62.895,60.089z"/> | |
| <path d="M60.128,60.007l-3.621-4.194c-0.361-0.418-0.997-0.471-1.42-0.115l-4.28,3.585c-0.422,0.354-0.804,1.088-0.85,1.638 | |
| l-0.643,7.688c-0.045,0.549,0.27,1.017,0.705,1.029c0.264,0.01,0.527,0.014,0.788,0.014c3.247,0,6.068-0.578,8.489-1.601 | |
| c0.509-0.214,0.948-0.858,0.994-1.407l0.406-4.879C60.745,61.21,60.488,60.425,60.128,60.007z"/> | |
| <path d="M48.281,68.533l0.615-7.369c0.045-0.551-0.246-1.299-0.653-1.673L43.461,55.1c-0.406-0.373-1.109-0.431-1.57-0.127 | |
| l-5.351,3.521c-0.461,0.304-0.872,0.996-0.918,1.546l-0.408,4.89c-0.046,0.551,0.322,1.188,0.827,1.411 | |
| c3.564,1.571,7.43,2.649,11.161,3.087C47.751,69.492,48.234,69.083,48.281,68.533z"/> | |
| <path d="M34.118,64.393l0.377-4.496c0.046-0.549-0.209-1.334-0.569-1.754l-3.031-3.52c-0.358-0.419-0.994-0.471-1.418-0.115 | |
| l-3.697,3.104c-0.422,0.354-0.77,0.695-0.773,0.761s0.273,0.462,0.646,0.866c1.99,2.172,4.586,4.098,7.498,5.686 | |
| C33.637,65.188,34.072,64.941,34.118,64.393z"/> | |
| <path d="M30.895,45.376l3.031-3.519c0.36-0.418,0.615-1.204,0.569-1.754l-0.377-4.496c-0.046-0.55-0.481-0.794-0.968-0.529 | |
| c-2.912,1.588-5.508,3.513-7.498,5.682c-0.373,0.407-0.654,0.806-0.648,0.87s0.354,0.404,0.775,0.759l3.697,3.102 | |
| C29.898,45.847,30.534,45.795,30.895,45.376z"/> | |
| <path d="M43.268,52.546c0,0.554,0.33,1.304,0.736,1.677l4.639,4.258c0.405,0.373,1.08,0.391,1.501,0.035l4.567-3.826 | |
| c0.423-0.354,0.767-1.088,0.767-1.642v-6.096c0-0.552-0.343-1.288-0.767-1.642l-4.567-3.823c-0.423-0.354-1.096-0.339-1.501,0.034 | |
| l-4.639,4.258c-0.406,0.374-0.736,1.124-0.736,1.676V52.546z"/> | |
| <path d="M34.605,42.628l-2.996,3.48c-0.36,0.418-0.652,1.206-0.652,1.758v4.268c0,0.554,0.292,1.339,0.652,1.759l2.996,3.479 | |
| c0.358,0.419,1.024,0.512,1.485,0.208l5.341-3.516c0.461-0.305,0.836-0.998,0.836-1.551v-5.029c0-0.552-0.375-1.246-0.836-1.55 | |
| l-5.341-3.515C35.632,42.117,34.966,42.21,34.605,42.628z"/> | |
| <path d="M35.622,39.959c0.046,0.55,0.457,1.243,0.918,1.546l5.351,3.521c0.461,0.304,1.164,0.247,1.57-0.126l4.782-4.392 | |
| c0.407-0.374,0.698-1.123,0.653-1.673l-0.615-7.369c-0.047-0.55-0.53-0.959-1.079-0.896c-3.731,0.437-7.599,1.515-11.161,3.087 | |
| c-0.506,0.223-0.873,0.861-0.827,1.412L35.622,39.959z"/> | |
| <path d="M29.191,53.426c0.422-0.354,0.766-1.09,0.766-1.643v-3.566c0-0.552-0.344-1.288-0.766-1.643l-4.156-3.487 | |
| c-0.424-0.355-1.032-0.283-1.331,0.182c-1.353,2.1-2.134,4.366-2.134,6.731s0.781,4.632,2.134,6.73 | |
| c0.299,0.465,0.907,0.537,1.331,0.183L29.191,53.426z"/> | |
| <path d="M60.671,40.923l-3.54,4.102c-0.361,0.418-0.653,1.205-0.653,1.757v6.436c0,0.554,0.292,1.339,0.653,1.757l3.54,4.104 | |
| c0.36,0.418,1.041,0.53,1.519,0.256l6.465-3.746c0.479-0.274,0.958-0.938,1.05-1.481c0.221-1.326,0.34-2.695,0.34-4.105 | |
| s-0.12-2.78-0.341-4.104c-0.092-0.545-0.571-1.207-1.05-1.484l-6.465-3.746C61.711,40.39,61.031,40.504,60.671,40.923z"/> | |
| <path d="M49.316,31.397l0.642,7.685c0.046,0.55,0.427,1.284,0.85,1.639l4.28,3.583c0.423,0.354,1.059,0.303,1.42-0.115l3.621-4.196 | |
| c0.36-0.418,0.616-1.203,0.569-1.753l-0.406-4.877c-0.046-0.55-0.485-1.196-0.994-1.41c-2.421-1.021-5.242-1.6-8.489-1.6 | |
| c-0.261,0-0.523,0.005-0.788,0.014C49.584,30.38,49.271,30.847,49.316,31.397z"/> | |
| <path d="M61.583,34.059l0.363,4.354c0.047,0.55,0.472,1.221,0.949,1.498l5.436,3.148c0.478,0.277,0.749,0.068,0.577-0.457 | |
| c-1.21-3.699-3.397-6.83-6.567-9.001C61.885,33.29,61.536,33.509,61.583,34.059z"/> | |
| <path d="M60.854,28.27c0.65,0.27,1.26,0.7,1.78,1.24c0.689,0.11,1.37,0.38,1.97,0.8c1.66,1.13,3.13,2.5,4.38,4.07 | |
| c1.75-1.22,4.2-2.75,4.891-4.6c0.84-2.24-0.69-5.89-1.681-9.11c-2-6.47-8.27-10.94-13.97-13.4c-5.87-2.62-10.319-2.43-9.89-2.04 | |
| c0.17-0.08,1.54,2.56,3.35,3.71c4.351,2.77,11.24,6.54,9.86,12.56c-0.04,2.44-0.67,4.59-1.431,6.48 | |
| C60.363,28.07,60.613,28.17,60.854,28.27z"/> | |
| <path d="M58.224,92.73c5.7-2.461,11.97-6.933,13.97-13.4c0.99-3.221,2.521-6.87,1.681-9.109c-0.69-1.851-3.15-3.381-4.9-4.591 | |
| c-1.25,1.57-2.72,2.931-4.38,4.07c-0.59,0.409-1.271,0.68-1.96,0.79c-0.521,0.539-1.14,0.97-1.8,1.24 | |
| c-0.24,0.1-0.48,0.199-0.721,0.277c0.75,1.9,1.391,4.051,1.431,6.49c1.38,6.021-5.51,9.79-9.86,12.561 | |
| c-1.81,1.149-3.18,3.791-3.35,3.711C47.904,95.16,52.354,95.35,58.224,92.73z"/> | |
| <path d="M28.684,33.09c-1.068-2.37-2.75-4.62-5.18-6.16c-2.729-1.82-5.59-4.61-8.439-4.38c-1.721,0.14-1.801,2.06-3.229,3.13 | |
| c-1.738,1.31-4.62,1.96-5.37,2.82c-1.521,1.74,5.979,3.06,12.921,7.63c1.141,0.73,2.131,1.51,3,2.28 | |
| c0.102-0.12,0.211-0.24,0.319-0.36C24.354,36.26,26.354,34.59,28.684,33.09z"/> | |
| <path d="M28.664,66.9c-2.32-1.5-4.32-3.16-5.96-4.961c-0.12-0.129-0.22-0.25-0.319-0.369c-0.881,0.779-1.881,1.56-3.031,2.3 | |
| c-6.938,4.569-14.438,5.899-12.92,7.63c0.75,0.859,3.643,1.51,5.371,2.82c1.439,1.068,1.521,2.988,3.239,3.13 | |
| c2.841,0.229,5.71-2.562,8.431-4.38C25.904,71.529,27.594,69.279,28.664,66.9z"/> | |
| <path d="M31.714,67.561c0.521,0.279,1.091,0.42,1.649,0.449c0.41,0.45,0.9,0.83,1.471,1.08c3.859,1.7,8.02,2.852,12.02,3.32 | |
| c0.541,0.061,1.082,0.01,1.603-0.15c0.45,0.221,0.94,0.36,1.47,0.37c0.29,0.011,0.589,0.021,0.879,0.021 | |
| c3.521,0,6.771-0.618,9.65-1.84c0.649-0.271,1.229-0.721,1.689-1.278c0.65-0.03,1.3-0.25,1.891-0.66 | |
| c3.609-2.472,6.279-6.108,7.729-10.54c0.13-0.41,0.2-0.818,0.2-1.21c0-0.222-0.03-0.431-0.07-0.63c0.04-0.07,0.08-0.131,0.12-0.2 | |
| c0.32-0.528,0.55-1.108,0.65-1.688c0.25-1.521,0.38-3.069,0.38-4.602c0-1.53-0.13-3.08-0.38-4.6c-0.101-0.58-0.33-1.16-0.65-1.69 | |
| c-0.04-0.07-0.08-0.13-0.12-0.2c0.04-0.2,0.07-0.41,0.07-0.63c0-0.39-0.07-0.8-0.21-1.21c-1.44-4.43-4.11-8.07-7.72-10.54 | |
| c-0.591-0.41-1.24-0.63-1.891-0.66c-0.46-0.56-1.04-1.01-1.68-1.28c-2.89-1.22-6.14-1.84-9.66-1.84c-0.29,0-0.59,0.01-0.879,0.02 | |
| c-0.53,0.01-1.02,0.15-1.47,0.37c-0.521-0.16-1.062-0.21-1.603-0.15c-4,0.47-8.158,1.62-12.02,3.32 | |
| c-0.57,0.25-1.061,0.63-1.471,1.08c-0.561,0.03-1.129,0.17-1.649,0.45c-3.319,1.82-6.11,3.93-8.271,6.29 | |
| c-0.659,0.72-1.062,1.31-1.26,1.88c-0.392,0.28-0.74,0.62-1,1.03C19.454,44.33,17.574,50,17.574,50s1.88,5.67,3.609,8.359 | |
| c0.26,0.41,0.608,0.75,0.988,1.029c0.21,0.579,0.609,1.159,1.271,1.881C25.604,63.63,28.395,65.74,31.714,67.561z M24.914,59.91 | |
| c-0.471-0.5-0.75-0.9-0.85-1.189l-0.211-0.591l-0.5-0.36c-0.211-0.147-0.381-0.317-0.49-0.5c-1.521-2.357-2.289-4.81-2.289-7.27 | |
| s0.77-4.91,2.289-7.27c0.109-0.18,0.279-0.34,0.49-0.5l0.5-0.36l0.211-0.58c0.107-0.3,0.379-0.7,0.85-1.2 | |
| c2.02-2.2,4.63-4.18,7.76-5.89c0.23-0.13,0.5-0.2,0.78-0.21l0.84-0.04l0.56-0.63c0.23-0.26,0.5-0.45,0.78-0.58 | |
| c3.69-1.62,7.65-2.72,11.45-3.16c0.26-0.03,0.529-0.01,0.79,0.07l0.76,0.23l0.7-0.35c0.21-0.1,0.43-0.16,0.65-0.16 | |
| c0.28-0.01,0.55-0.02,0.82-0.02c3.25,0,6.24,0.57,8.88,1.68c0.33,0.14,0.65,0.39,0.93,0.72l0.561,0.66l0.86,0.05 | |
| c0.289,0.02,0.6,0.13,0.869,0.32c3.24,2.22,5.641,5.51,6.95,9.51c0.07,0.21,0.11,0.41,0.11,0.59c0,0.1-0.021,0.18-0.04,0.27 | |
| l-0.04,0.25l-0.1,0.54l0.43,0.66c0.25,0.38,0.42,0.78,0.479,1.13c0.23,1.41,0.351,2.84,0.351,4.27c0,1.42-0.12,2.859-0.351,4.27 | |
| c-0.06,0.353-0.229,0.75-0.479,1.131l-0.43,0.66l0.1,0.539l0.04,0.25c0.02,0.08,0.04,0.17,0.04,0.271c0,0.18-0.04,0.38-0.11,0.59 | |
| c-1.31,4-3.71,7.29-6.95,9.51c-0.279,0.19-0.569,0.301-0.88,0.32l-0.859,0.05l-0.551,0.66c-0.279,0.33-0.6,0.58-0.93,0.72 | |
| c-2.64,1.11-5.63,1.682-8.88,1.682c-0.27,0-0.54-0.012-0.82-0.021c-0.22,0-0.44-0.062-0.65-0.159l-0.71-0.351l-0.75,0.229 | |
| c-0.261,0.08-0.53,0.102-0.79,0.069c-3.8-0.438-7.76-1.54-11.45-3.159c-0.28-0.131-0.55-0.318-0.78-0.58l-0.56-0.631l-0.83-0.039 | |
| c-0.29-0.011-0.56-0.08-0.8-0.211C29.544,64.09,26.934,62.109,24.914,59.91z"/> | |
| <path d="M75.764,43.44c-0.85,0.19-1.72,0.28-2.6,0.29c0.229,0.48,0.399,1,0.489,1.5c0.261,1.59,0.391,3.2,0.391,4.77 | |
| c0,1.57-0.13,3.18-0.391,4.76c-0.09,0.5-0.26,1.021-0.489,1.51c0.87,0.013,1.739,0.11,2.6,0.291c1.13,1.399,2.72,2.26,4.7,2.26 | |
| c1.58,0,3.31-0.538,4.87-1.471c5.189-0.658,8.43-7.22,8.43-7.22s-3.02-6.11-7.88-7.14c-1.7-1.13-3.66-1.81-5.42-1.81 | |
| C78.483,41.18,76.894,42.04,75.764,43.44z"/> | |
| </g> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment