Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/.block

Last active October 17, 2016 17:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wboykinm/599cf6a879bcd7befb326fe0b4833e5f to your computer and use it in GitHub Desktop.
Save wboykinm/599cf6a879bcd7befb326fe0b4833e5f to your computer and use it in GitHub Desktop.
Download ZIP
d3js compass rose
Raw
.block
license: cc-by-4.0
border: no
height: 600
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Cinzel+Decorative' rel='stylesheet' type='text/css'>
<style>
body {
background: #fff;
font-family: 'Cinzel Decorative', cursive;
}
.arc {
fill:none;
fill-opacity:0.4;
stroke-width: 0.6px;
stroke: #111;
}
.arc-heavy {
fill:none;
stroke-width: 0.8px;
stroke: #555;
}
.arc-minor {
fill:none;
fill-opacity:0.2;
stroke-width: 0.4px;
stroke: #555;
stroke-dasharray:2,2;
}
.location {
fill:none;
fill-opacity:0.2;
stroke-width: 0.8px;
stroke: #555;
}
.mask {
stroke: #fff;
stroke-width: 200px;
fill:none;
}
.direction {
font-size:24px;
fill: #555;
text-anchor:middle;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// set constants
var height = 600
var width = 600
var radius = 150
var interact = radius * 0.7
var pad = radius * 0.25
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
// build the intercardinal winds
svg.append("circle")
.attr("class", "arc-minor")
.attr("cx", width/2 - interact)
.attr("cy", height/2)
.attr("r", interact);
svg.append("circle")
.attr("class", "arc-minor")
.attr("cx", width/2)
.attr("cy", height/2 + interact)
.attr("r", interact);
svg.append("circle")
.attr("class", "arc-minor")
.attr("cx", width/2 )
.attr("cy", height/2 - interact)
.attr("r", interact);
svg.append("circle")
.attr("class", "arc-minor")
.attr("cx", width/2 + interact)
.attr("cy", height/2)
.attr("r", interact);
// build the cardinal winds
svg.append("circle")
.attr("class", "arc")
.attr("cx", width/2 - interact)
.attr("cy", height/2 - interact)
.attr("r", radius);
svg.append("circle")
.attr("class", "arc")
.attr("cx", width/2 + interact)
.attr("cy", height/2 - interact)
.attr("r", radius);
svg.append("circle")
.attr("class", "arc")
.attr("cx", width/2 - interact)
.attr("cy", height/2 + interact)
.attr("r", radius);
svg.append("circle")
.attr("class", "arc")
.attr("cx", width/2 + interact)
.attr("cy", height/2 + interact)
.attr("r", radius);
// add mask
svg.append("circle")
.attr("class", "mask")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 212 + 100);
// build the outer circle
svg.append("circle")
.attr("class", "arc-heavy")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 212);
// build the outer toposcope ring
svg.append("circle")
.attr("class", "arc-heavy")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 242);
// build the toposcope locations
var locations = [
{
name: 'middlebury',
bearing: 238
},
{
name: 'vuelta larga',
bearing: 175
},
{
name: 'boston',
bearing: 162
},
{
name: 'harwichport',
bearing: 152
},
{
name: 'mont albert',
bearing: 40
},
{
name: 'central city',
bearing: 270
}
]
for (var i = 0; i < locations.length; i++) {
var outerRadius = 227
var rads = (locations[i].bearing - 90) * Math.PI / 180
var x = Math.cos(rads) * outerRadius + (width/2);
var y = Math.sin(rads) * outerRadius + (width/2);
svg.append("circle")
.attr("class", "location")
.attr("cx", x)
.attr("cy", y)
.attr("r", 15)
}
// labels
svg.append("text")
.attr("class","direction")
.attr("y",pad)
.attr("x",width/2)
.text("N")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment