Custom chart with d3.js
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Looking for a custom chart built with d3.js that will look and act like this chart out of tableau

https://www.dropbox.com/s/95cney0gy31ooht/2019-12-20_15-26-01.gif?dl=0

in particular here is that we have weeks along the bottom. those weeks are then grouped in to months along the top. each segment/month then has a nice avg dotted line that shows the avg for that period. The reason we are headed in the custom d3 route is that I have not seen or found an existing chart that captures some of the various intricacies.

The last nuance here is that the chart is responsive to fill its container. youll notice at the end I squished and stretched it and the ui seemed to handle it nicely.

This bounty is for a custom d3.js chart with the following

-Bar chart grouped in to weeks along the X axis (label is turned 90 degrees)
-Label along the top X axis that has the weeks grouped in to months

-Bars have a hover with popover of data details in it

-Each month group has a dotted line avg almost as a watermark with label

-responsive to the container

-y-axis labels are scaled and created based on the series data in the chart

It would be awesome if we could compute month/week grouping and monthly averages of this from weekly series data.

awarded to Wuddrum
Tags
javascript

Crowdsource coding tasks.

2 Solutions

Winning solution

Hey Qdev, here's my version:

Source: https://github.com/Wuddrum/js-d3-bar-chart

Demo: https://wuddrum.github.io/js-d3-bar-chart/

The chart inherits its size from its parent container and responsively resized horizontally along with the parent container.

Since you didn't provide any data, I had to come up with a demo data that's hopefully close enough to yours. There's some minor processing in the data.js file, which I might increase a bit later, to alleviate some repetitive calculations while drawing the chart.

The chart is compatible with IE10+ and all modern browsers.

great work on this!
Qdev 1 month ago
View Timeline