| license: mit |
Some markers / icons I'm experimenting with for my visualization of Missing Migrants project.
Each marker and color represents a different cause of death category:
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| .drowning { fill: #60B0FF; } | |
| .exposure { fill: #FFA030; } | |
| .mechanical { fill: #404040; } | |
| .violence { fill: #A00000; } | |
| .medical { fill: #609000; } | |
| .unknown { fill: #FFA0C0; } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| // Feel free to change or delete any of the code you see in this editor! | |
| var svg = d3.select("svg"); | |
| function newg(parent, x, y, s) { | |
| return parent.append('g') | |
| .attr('transform', `matrix(${s}, 0, 0, ${s}, ${x}, ${y})`); | |
| } | |
| function drowning(parent, cx, cy, s) { | |
| const myscale = 120; | |
| var g = newg(parent, cx-s/2, cy-s/2, s/myscale).attr('class', 'drowning'); | |
| g.append("path") | |
| .attr('d', ` | |
| M 0 34 | |
| A 22 22 0 0 0 20 20 | |
| A 22 22 0 0 0 60 20 | |
| A 22 22 0 0 0 100 20 | |
| A 22 22 0 0 0 120 34 | |
| L 120 50 | |
| A 22 22 0 0 1 80 50 | |
| A 22 22 0 0 1 40 50 | |
| A 22 22 0 0 1 0 50 | |
| L 0 34 | |
| M 0 89 | |
| A 33 33 0 0 0 30 70 | |
| A 33 33 0 0 0 90 70 | |
| A 33 33 0 0 0 120 89 | |
| L 120 120 | |
| L 0 120 | |
| L 0 85 | |
| `); | |
| return g; | |
| } | |
| function exposure(parent, cx, cy, s) { | |
| const myscale = 120; | |
| var g = newg(parent, cx-s/2, cy-s/2, s/myscale).attr('class', 'exposure'); | |
| g.append('circle') | |
| .attr('cx', 60) | |
| .attr('cy', 60) | |
| .attr('r', 30); | |
| for(var theta = 0; theta < 360; theta += (360/5)) { | |
| var t = (theta*Math.PI) / 180; | |
| g.append('circle') | |
| .attr('cx', 60+45*Math.cos(t)) | |
| .attr('cy', 60+45*Math.sin(t)) | |
| .attr('r', 10); | |
| } | |
| return g; | |
| } | |
| function vehicular(parent, cx, cy, s) { | |
| const myscale = 120; | |
| var g = newg(parent, cx-s/2, cy-s/2, s/myscale).attr('class', 'mechanical'); | |
| g.append('rect') | |
| .attr('x', 0).attr('y', 20).attr('width', 80).attr('height', 50); | |
| g.append('path').attr('d', ` | |
| M 85 70 | |
| L 120 70 | |
| A 30 30 0 0 0 85 40 | |
| L 85 40 | |
| L 85 70`) | |
| g.append('circle') | |
| .attr('cx', 12).attr('cy', 85).attr('r', 12); | |
| g.append('circle') | |
| .attr('cx', 68).attr('cy', 85).attr('r', 12); | |
| g.append('circle') | |
| .attr('cx', 105).attr('cy', 85).attr('r', 12); | |
| return g; | |
| } | |
| function violence(parent, cx, cy, s) { | |
| const myscale = 100; | |
| var g = newg(parent, cx-s/2, cy-s/2, s/myscale).attr('class', 'violence'); | |
| g.append('path').attr('d', ` | |
| M 10 20 | |
| L 100 20 | |
| A 30 30 0 0 1 100 40 | |
| L 45 40 | |
| A 13 13 0 0 1 30 55 | |
| L 30 80 | |
| L 0 80 | |
| A 150 150 0 0 0 0 20 | |
| `); | |
| return g; | |
| } | |
| function roundrectpath(x, y, w, h, r) { | |
| return ` | |
| M ${x} ${y+r} | |
| A ${r} ${r} 0 0 1 ${x+r} ${y} | |
| L ${x+w-r} ${y} | |
| A ${r} ${r} 0 0 1 ${x+w} ${y+r} | |
| L ${x+w} ${y+h-r} | |
| A ${r} ${r} 0 0 1 ${x+w-r} ${y+h} | |
| L ${x+r} ${y+h} | |
| A ${r} ${r} 0 0 1 ${x} ${y+h-r} | |
| L ${x} ${y+r} | |
| ` | |
| } | |
| function medical(parent, cx, cy, s) { | |
| const myscale = 120; | |
| var g = newg(parent, cx-s/2, cy-s/2, s/myscale).attr('class', 'medical'); | |
| g.append('path').attr('d', roundrectpath(0, 30, 120, 80, 15)); | |
| g.append('rect').attr('x', 33).attr('y', 60).attr('width', 54).attr('height', 20).attr('fill','white'); | |
| g.append('rect').attr('x', 50).attr('y', 43).attr('width', 20).attr('height', 54).attr('fill','white'); | |
| g.append('path').attr('d', ` | |
| M 35 25 | |
| A 25 25 0 0 1 85 25 | |
| L 75 25 | |
| A 15 15 0 0 0 45 25 | |
| `); | |
| return g; | |
| } | |
| function unknown(parent, cx, cy, s) { | |
| const myscale = 120; | |
| var g = newg(parent, cx-s/2, cy-s/2, s/myscale).attr('class', 'unknown'); | |
| g.append('circle').attr('cx', 60).attr('cy', 60).attr('r', 60); | |
| g.append('path').attr('d', ` | |
| M 25 50 | |
| A 30 25 0 0 1 95 50 | |
| C 90 80 68 61 67 85 | |
| L 53 85 | |
| C 52 55 80 65 80 50 | |
| A 20 15 0 0 0 40 50 | |
| L 25 50 | |
| `).attr('fill', 'white'); | |
| g.append('circle').attr('cx', 60).attr('cy', 100).attr('r', 8).attr('fill', 'white'); | |
| return g; | |
| } | |
| const scale = 128; | |
| drowning(svg, 100, 200, scale); | |
| exposure(svg, 250, 200, scale); | |
| vehicular(svg, 400, 200, scale); | |
| violence(svg, 550, 200, scale); | |
| medical(svg, 700, 200, scale); | |
| unknown(svg, 850, 200, scale); | |
| </script> | |
| </body> |
