Skip to content

Instantly share code, notes, and snippets.

@dbeach24
Last active October 13, 2017 03:46
Show Gist options
  • Save dbeach24/176e0abf00503bdb59678849e5579e60 to your computer and use it in GitHub Desktop.
Save dbeach24/176e0abf00503bdb59678849e5579e60 to your computer and use it in GitHub Desktop.
Icon Markers
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:

  • Drowning / Asphyxiation
  • Exposure / Dehydration / Starvation
  • Mechanical / Vehicular / Trauma
  • Violence / Homicide
  • Illness / Medical Issues
  • Unknown

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment