D3JS Radar Graph Component

We would like to engage a js/d3js developer to create a simple d3js radar graph component for our ember application. We are creating a number of these so please impress us with your work, speed, quality and value.

Here is the brief:

Build a radar graph component from my bar chart example.

We would like it to look like this if possible:


http://bl.ocks.org/nbremer/21746a9668ffdf6d8242

The graph must look good in all three sizes provided in the example code. This helps us meet responsive requirements which are vital.

We need a tooltip to enable the name of the person being compared is available.

D3 Tooltips example:
http://bl.ocks.org/d3noob/a22c42db65eb00d4e369

To successfully complete this component, you will need to know the basics of ember (but I've done the hard work for you). You will need ember and node.

ember-cli: 3.12.0
node: 8.9.0
bower 1.8.2

You will need to do these commands to load relevant modules:

npm install
bower install

Once downloading the bar graph example of how it all works, you can serve it up with this command line command:

ember serve

You can now see the graph example I provided in your browser here: http://localhost:4200

Your job is to generate your graph component using this example as a basis.

To start, you will need to copy the current example of a component to a new component name.

cp app/components/example-bar-graph.js app/components/radar-graph.js

cp app/templates/components/example-bar-graph.hbs app/templates/components/radar-graph.hbs

Then edit the app/components/radar-graph.js to enable the above capability. You can then edit application.hbs, add your components in the three places, over the text I added and it should render on localhost:4200. It will currently look the same as the bar graph. You now need to change it.

The data for your example will look like this:

var data = [
{name:"Jack Dever", [
{axis:"Interviews",value:0.22},
{axis:"Report Quality",value:0.28},
{axis:"Value for Money",value:0.29},
{axis:"Grammar and Spelling",value:0.22},
{axis:"Video Quality",value:0.02},
{axis:"Timeliness",value:0.21},
{axis:"Responsive",value:0.50}
]},
{name:"Fiona Fifer",
[
{axis:"Interviews",value:0.27},
{axis:"Report Quality",value:0.16},
{axis:"Value for Money",value:0.35},
{axis:"Grammar and Spelling",value:0.20},
{axis:"Video Quality",value:0.13},
{axis:"Timeliness",value:0.35},
{axis:"Responsive",value:0.38}
]},
{name:"Samantha Jones",
[
{axis:"Interviews",value:0.26},
{axis:"Report Quality",value:0.10},
{axis:"Value for Money",value:0.30},
{axis:"Grammar and Spelling",value:0.22},
{axis:"Video Quality",value:0.04},
{axis:"Timeliness",value:0.41},
{axis:"Responsive",value:0.30}
]
},
];

Note that I have added the name of the person who's quality measures we are reviewing. Preferably, these will be a tooltip, however they could be a legend.

This obviously replaces the example from the radar graph with a different data set.

Note: There may be more items that these three in the data set, you need to be able to handle as many as 10.

Note: the two attachments include a zip of the example project and a screenshot of it running on localhost:4200