block by wboykinm 8b649b4f475c840944fd

POI

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #2E2E2E;
}

</style>
<link rel="stylesheet" href="https://s3.amazonaws.com/icomoon.io/36347/Faraglyph/style.css">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

d = {
	properties: {
		magnitude:16,
		color:'#C569FF',
		icon: 'hammer'
	}
};

var poiMagnitude = d.properties.magnitude || 8,
	poiColor = d.properties.color || '#888888',
	poiIcon = d.properties.icon || "zap";

var width = 960,
  height = 500;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var poiSite = svg.append('g')
	.attr("transform","translate(200,100)")

poiSite.append('circle')
  .attr("r", poiMagnitude)
  .style("fill", poiColor)

poiSite.append('circle')
  .attr("r", poiMagnitude + poiMagnitude*1.5)
  .style("fill-opacity",0)
  .style("stroke", poiColor)
  .style("stroke-opacity",0.05)
  .style("stroke-width",poiMagnitude/2)

poiSite.append('circle')
  .attr("r", poiMagnitude + poiMagnitude)
  .style("fill-opacity",0)
  .style("stroke", poiColor)
  .style("stroke-opacity",0.1)
  .style("stroke-width",poiMagnitude/2)

poiSite.append('circle')
  .attr("r", poiMagnitude + poiMagnitude/2)
  .style("fill-opacity",0)
  .style("stroke", poiColor)
  .style("stroke-opacity",0.15)
  .style("stroke-width",poiMagnitude/2)

poiSite.append("svg:foreignObject")
  .attr("width", poiMagnitude*2)
  .attr("height", poiMagnitude*2)
	.attr("transform","translate(" + -poiMagnitude/2 + "," + -poiMagnitude/2 + ")")
	.style("color","#FEFEFE")
	.style("font-size", poiMagnitude)
  .html("<i class='fg" + poiIcon + "'></i>");

</script>