Skip to content

Instantly share code, notes, and snippets.

@davelandry
Last active August 22, 2016 15:24
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 davelandry/5c57d9d71aa309d180c2 to your computer and use it in GitHub Desktop.
Save davelandry/5c57d9d71aa309d180c2 to your computer and use it in GitHub Desktop.
Simple Radar

Radar charts are used to create a filled area based on an n-sided polygon.

Featured on D3plus.org

<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var sample_data = [
{"name": "alpha", "skill": "power", "value": 4},
{"name": "alpha", "skill": "courage", "value": 8},
{"name": "alpha", "skill": "wisdom", "value": 2},
{"name": "beta", "skill": "power", "value": 5},
{"name": "beta", "skill": "courage", "value": 4},
{"name": "beta", "skill": "wisdom", "value": 6}
];
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.id(["name", "skill"])
.size("value")
.type("radar")
.draw();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment