1

Im using nivo.rocks which is a library built on top of d3.js. I need to build a marimekko graph like the histogram shown below. I want it to show the number of days a temperature was x faranheit.

  1. I'm trying to set the x-axis as the AvgTempF from lowest temp to highest

  2. The y-axis needs to be the number of dates that the temp was between two numbers. For example, if one bar was 12F to 20F, the count would be number of days it was in that range (if that makes sense)

  3. The bar should have same thickness

something like this:

enter image description here

right now this is what I have : https://codesandbox.io/s/agitated-paper-947cz

Shuib Abdillahi
  • 119
  • 1
  • 10
  • in your example, you are using [this marimekko component](https://nivo.rocks/marimekko/) whereas maybe you want to use a [responsive bar](https://nivo.rocks/bar/). In the responsive bar page, https://nivo.rocks/bar/ you can play with the padding, try setting it to 0 – Bertrand Martel Mar 26 '21 at 22:35
  • i was asked to use the marimekko because you can change the bin-size of the bar. so lets say one bar has a width of 5 different temperatures. I want the length of the bar to show how many days it hit those temperatures, like in the example – Shuib Abdillahi Mar 26 '21 at 22:51
  • 1
    so it would be number of days instead of `Date` in the data, you need to adapt the data with the chosen temperature slices; eg convert date with temperature to days with the temperature slices (for ex: 0-20). Then convert the slice width (ex: 0-20 / 20-50) to x=20 and x=30 – Bertrand Martel Mar 26 '21 at 23:16
  • Ahh so comeplety change the data object? Could you show me an example please? What would I set as the Id and value prop? – Shuib Abdillahi Mar 27 '21 at 07:18
  • i've added detail and more code to the sandbox if you wanna see it? i'd really appreciate any help Bertrand – Shuib Abdillahi Mar 27 '21 at 18:39

0 Answers0