D3js line graph component
- or -
Post a project like this1638
$200
- Posted:
- Proposals: 3
- Remote
- #2570695
- Awarded
Description
Experience Level: Entry
We would like to engage a js/d3js developer to create a simple d3js line graph component for our ember application. We expect that this is the first of many such needs so please impress us with your work, speed, quality and value.
Here is the brief:
Build a line graph component from my bar chart example.
We would like this effect (curtain effect)
http://bl.ocks.org/markmarkoh/8700606
This a general layout example of what we are looknig for, please thicken the line and add dots at each data point.
https://bl.ocks.org/d3noob/08af723fe615c08f9536f656b55755b4
For an idea about how to add dots see this example:
http://bl.ocks.org/romsson/f205420d21ced66810058d4cdf25c6dd/bde5fc56d3fa8a05852e108e6bffb1aa09734589
The graph must look good in all three sizes provided in the example code. This helps us meet responsive requirements which are vital.
To make things fit, you may drop the legend for example on smaller sizes and replace with a tooltip.
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 line 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/line-graph.js
cp app/templates/components/example-bar-graph.hbs app/templates/components/line-graph.hbs
Then edit the app/components/line-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:
const data = [{"date":"2019-11-11","item":"TOJ","qty:5},{"date":"2019-11-12","item":"TOJ","qty:2.5},{"date":"2019-11-13","item":"TOJ","qty:8}
,{"date":"2019-11-11","item":"TT","qty:1.25},{"date":"2019-11-13","item":"TT","qty:1.5},{"date":"2019-11-11","item":"TT","qty:1.5}
,{"date":"2019-11-10","item":"ADMN","qty:0.5},{"date":"2019-11-13","item":"ADMN","qty:0.5},{"date":"2019-11-15","item":"ADMN","qty:0.5},{"date":"2019-11-19","item":"ADMN","qty:1.25}}
];
This obviously replaces the example from the bar graph with a different data set.
This should create 3 lines TOJ, TT, ADMN and represent their data across the data ranges with the qty being the height of each line.
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
Here is the brief:
Build a line graph component from my bar chart example.
We would like this effect (curtain effect)
http://bl.ocks.org/markmarkoh/8700606
This a general layout example of what we are looknig for, please thicken the line and add dots at each data point.
https://bl.ocks.org/d3noob/08af723fe615c08f9536f656b55755b4
For an idea about how to add dots see this example:
http://bl.ocks.org/romsson/f205420d21ced66810058d4cdf25c6dd/bde5fc56d3fa8a05852e108e6bffb1aa09734589
The graph must look good in all three sizes provided in the example code. This helps us meet responsive requirements which are vital.
To make things fit, you may drop the legend for example on smaller sizes and replace with a tooltip.
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 line 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/line-graph.js
cp app/templates/components/example-bar-graph.hbs app/templates/components/line-graph.hbs
Then edit the app/components/line-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:
const data = [{"date":"2019-11-11","item":"TOJ","qty:5},{"date":"2019-11-12","item":"TOJ","qty:2.5},{"date":"2019-11-13","item":"TOJ","qty:8}
,{"date":"2019-11-11","item":"TT","qty:1.25},{"date":"2019-11-13","item":"TT","qty:1.5},{"date":"2019-11-11","item":"TT","qty:1.5}
,{"date":"2019-11-10","item":"ADMN","qty:0.5},{"date":"2019-11-13","item":"ADMN","qty:0.5},{"date":"2019-11-15","item":"ADMN","qty:0.5},{"date":"2019-11-19","item":"ADMN","qty:1.25}}
];
This obviously replaces the example from the bar graph with a different data set.
This should create 3 lines TOJ, TT, ADMN and represent their data across the data ranges with the qty being the height of each line.
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
Stuart G.
100% (6)Projects Completed
6
Freelancers worked with
5
Projects awarded
55%
Last project
6 Sep 2020
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies