D3JS Radar Graph Component
Budget
258$
per month
Posted: 5 years ago
Opened
- Description
- 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
Skills:
editing,video,d3 js,software development,user interface (UI)
- Category
Source: peopleperhour.com
Drag