Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Created December 2, 2014 02:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wboykinm/8b649b4f475c840944fd to your computer and use it in GitHub Desktop.
Save wboykinm/8b649b4f475c840944fd to your computer and use it in GitHub Desktop.
Download ZIP
POI
Raw
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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment