D3JS Labella.js Component required
Budget
258$
per month
Posted: 4 year ago
Opened
- Description
- We would like to engage a js/d3js developer to create a simple d3js labella component for our ember application.
We expect many such needs so please impress us with your work, speed, quality and value.
Here is the brief:
Build a labella.js component from my bar chart example.
We would like these effects possible driven by a parameter change of V or H:
http://twitter.github.io/labella.js/with_text.html
http://twitter.github.io/labella.js/with_text2.html
Please make the background white not black.
The timescale values on the axis need to be shown so that we can understand the date/time period. This explains how to achieve it. http://www.d3noob.org/2016/08/changing-number-of-ticks-on-axis-in.html
The chart should be scrollable if it's too long for the fixed width/height provided.
Each label should show a tooltip from the field 'additionalText' as per data below.
Tooltips example:
http://bl.ocks.org/d3noob/a22c42db65eb00d4e369
The graph must look good in all three sizes provided in the example code. This helps us meet responsive requirements which are vital.
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
We use d3 v5.7.0.
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 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/timeline.js
cp app/templates/components/example-bar-graph.hbs app/templates/components/timeline.hbs
Then edit the app/components/timeline.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", label: 'Opened', additionalText: 'Opened by: Fred Flintstone'},
{date: "2019-11-15", label: 'Accepted', additionalText: 'Accepted by: Mary Mooly'},
{date: "2019-11-19", label: 'Case Work Begins', additionalText: '25km in traffic to get there'},
{date: "2019-11-19", label: 'On Site', additionalText: '6 hours'},
{date: "2019-11-19", label: 'End of Day report', additionalText: 'Roof 1/2 completed'},
{date: "2019-11-20", label: 'Case Work Begins', additionalText: '25.5km but faster'},
{date: "2019-11-20", label: 'On Site', additionalText: '5.5 hours'},
{date: "2019-11-20", label: 'End of Day report', additionalText: 'Roof completed'},
{date: "2019-11-26", label: 'Report Submitted', additionalText: 'See http://google.com for final report'},
{date: "2019-11-31", label: 'Closed', additionalText: ''}
];
This obviously replaces the example from the bar graph with a different data set.
This should create a set of labels across the time line, the user should be able to read the timescale tick values and also the labels clearly. Please attempt to make it look great!
Note: the two attachments include a zip of the example project and a screenshot of it running on localhost:4200
Skills:
editing,d3 js,development,timescale
- Category
Source: peopleperhour.com
Drag