Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/.block

Last active October 11, 2017 06:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wboykinm/de0a53fa22fe2cb01418b549b11dd788 to your computer and use it in GitHub Desktop.
Save wboykinm/de0a53fa22fe2cb01418b549b11dd788 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

A simple mandala-like compass rose made up entirely of circles. Built with blockbuilder.org

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: #593067;
font-family: 'Cinzel Decorative', cursive;
}
.arc {
fill:#e2e3e3;
fill-opacity:0.4;
stroke-width: 0.2px;
stroke: #111;
}
.arc-heavy {
fill:none;
stroke-width: 0.8px;
stroke: #e2e3e3;
}
.arc-minor {
fill:#e2e3e3;
fill-opacity:0.2;
stroke-width: 0.8px;
stroke: #555;
stroke-dasharray:2,2;
}
.mask {
stroke: #593067;
stroke-width: 200px;
fill:none;
}
.direction {
font-size:24px;
fill: #e2e3e3;
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);
// labels
svg.append("text")
.attr("class","direction")
.attr("y",pad)
.attr("x",width/2)
.text("N")
svg.append("text")
.attr("class","direction")
.attr("y",height - pad)
.attr("x",width/2)
.text("S")
svg.append("text")
.attr("class","direction")
.attr("y",height/2)
.attr("x",pad)
.attr("dy","0.5em")
.text("W")
svg.append("text")
.attr("class","direction")
.attr("y",height/2)
.attr("x",width - pad)
.attr("dy","0.4em")
.text("E")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment