Old school D3 from simpler times

All examples By author By category About

dbeach24

Full window Github gist

Icon Markers

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>

https://d3js.org/d3.v4.min.js