Papermashup

Subscribe


Tweets


"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 3 days ago

"RT @lalpra: Galaxy Note 7 Unboxing https://t.co/FM8gZmqpBK"

@ashleyford 5 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

D3.js Radar Chart Plugin

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations

AshleyAshley

I’ve had a love hate relationship with D3 over the last few months, some things are incredibly easy to get your head around and other parts of the API are just mind bendingly bonkers. I recently had to create a radar chart using D3 and found this awesome plugin created by Alvaro Graves which allows you to create great radar charts like the image below.

Screen Shot 2014-05-26 at 22.06.51

The Code

The setup is really simple. You can configure the look of the chart by directly editing the plugin script and checking out the options, but the basic setup couldn’t be easier.

Firstly make sure you include the d3.js library and the radar-chart.js script.



<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="radar-chart.js"></script>

Then simply add your holder div. In this instance we’re injecting the graph into the div with an id of #chart, and include the javascript with our data points in. The final function calls the chart plugin and passses the data. Simple!



<div id="chart"></div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="radar-chart.js"></script>

<script>
var data = [
[
{axis: "strength", value: 13},
{axis: "intelligence", value: 1},
{axis: "charisma", value: 8},
{axis: "dexterity", value: 4},
{axis: "luck", value: 9}
],[
{axis: "strength", value: 3},
{axis: "intelligence", value: 15},
{axis: "charisma", value: 4},
{axis: "dexterity", value: 1},
{axis: "luck", value: 15}
],[
{axis: "strength", value: 5},
{axis: "intelligence", value: 1},
{axis: "charisma", value: 16},
{axis: "dexterity", value: 10},
{axis: "luck", value: 5}
]
];

RadarChart.draw("#chart", data);
</script>

Demo Download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 2
  • Matt
    Posted on

    Matt Matt

    Reply Author

    I would also much appreciate a draggable points radar graph. There seems to be a real lack of examples.


  • Horacio
    Posted on

    Horacio Horacio

    Reply Author

    Hi! I have a question: How I can add draggable points on this example?

    Thanks! I need your help!