plouc / nivo Goto Github PK

A heatmap is a very useful visualization. IMO, it'd be a great addition.

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

when trying to access the website

On the examples on nivo.rocks there is a button "Roll the dices", which should be "Roll the dice" as dice is already plural (singular is die).

Charts such as <Bubble/>, <TreeMap/> & <Sunburst/> could benefit of some kind of breadcrumbs component to easily figure out where the node is located in the hierarchy.

For now, tooltip is always placed on right of the current cursor, it could be placed according to container size.

Steps to reproduce:

1. Go to http://nivo.rocks/#/treemap
2. Click on the leavesOnly toggle.
3. Click on the leavesOnly toggle again.
4. (Bonus) Roll The Dice

Expected result:

• The treemap changes somehow, then changes back to how it looked before.
• Changing source data looks fine

Observed results:

1. Load page:
   
2. Leaves Only, On:
   
3. Leaves Only, Off:
   
4. Roll The Dice:
   

Also

Leaves Only says

Only render leaf nodes (no children).

Shouldn't that be (no parents)?

Is it possible to fill the area below the line with a gradient?

Example: http://recharts.org/#/en-US/api/AreaChart

Great lib!

I was wondering why there were no animation when pie datas are updated?
It works for the line component for example and its nice.

Sankey diagrams are excellent tools that are under utilized, but would be great to have within this very nice solution set.

Example: https://bl.ocks.org/mbostock/ca9a0bb7ba204d12974bca90acc507c0

This is a common, but often challenging, interaction. It'd be great to see how it should work in nivo.

Hello guys,

I'm trying to display negative values on a chart, they will display <> when all of them are negative, when there's more than one positive, anything below zero will be ignored, is there a way to have minY maxY config?

Regards,

There are a few files which import from d3 which brings in all the d3-* modules even if they aren't used. While webpack & rollup can mitigate this, they still leave many unused functions.

Looking through the code I found these examples:

# src/lib/charts/bubble/BubbleD3.js
import { hierarchy, pack } from 'd3'

# src/lib/scale.js
import { scaleLinear, scaleBand, scalePoint } from 'd3'

# src/lib/charts/labels.js
import d3 from 'd3'

#src/lib/charts/pie/PieD3Svg.js
import d3 from 'd3'

# src/lib/charts/bubble/BubbleD3Svg.js
import d3 from 'd3'

I apologize for the noise if I've simply found some loose ends that aren't used/exported.

Something similar to what's available on Bubble component

Something similar to https://bl.ocks.org/mbostock/4063318

Opening this so there's a way to track the "I'm also considering canvas support" comment from the README

We should be able to hide certain layers from the Stack component.

Workflow:

• user clicks on a layer
• if there's more than 1 active layer
  • the layer disappear
  • a small circle having the same color appear to re-activate the hidden layer
  • if user clicks on the circle, the layer becomes active

This feature also have an impact on StackDots component.

Hello! Is there currently a way to customize the label that shows in when one hovers over a section of a chart? For example, on the following Pie chart:

Say I want to display the number in a friendlier matter by formatting it the same way one formats the other labels (passing a string or a function that receives the node)

I noticed there is an onClick prop in chart component, but it's probably not used for anything right now. Do you plan on implementing some basic events with access to data of clicked element? I am currently trying to implement bar chart with onClick event (to filter in hourly data). It should also have formatted tooltip. I really like your library, it has beautiful visuals and very useful options, but I sadly need onclick for my use case.

Some components requires intensive calculations when a property change, those calculations should be memoized in order to improve performance.

• CalendarLayout monthPathAndBBox

• <Bubble />
• <RepsonsiveBubble />
• <BubbleD3 />
• <RepsonsiveBubbleD3 />
• <BubblePlaceholders /> with support for html & svg
• <RepsonsiveBubblePlaceholders />

I try to output a Pie chart, but the responsive pie chart only outputs an empty div:

<div style="width: 100%; height: 100%;"></div>

My settings look like this (and I use the sample data from website):

const settings = {
      width: 300,
      height: 300,
      margin: { top: 10, right: 10, bottom: 10, left: 10 },
      innerRadius: 0.9,
      cornerRadius: 3,
      padAngle: 1,
      enableSlicesLabels: false,
      enableRadialLabels: false,
      isInteractive: false,
    };

It does not work if I remove width/height either. Am I doing something wrong?

If I have a pie chart with labels, some labels end up outside of the drawn SVG and are since not shown:

In this image, I gave the SVG tag a gray border color so it is clear what is been cut off.

The code for the chart looks like this:

<Pie 
    data={this.props.chartData}
    height={500} 
    width={500}
    margin={{
      left: 10,
      right: 50,
      top: 10,
      bottom: 10
    }}
    // not relevant other info
 />

The title captures the gist of it. The sankey diagram is not on the demo site. It is linked by the README but leads to a blank page. With that in mind, there may be others.

Thanks for the great project!

Amongst the already pretty color palettes, provide a11y and color blind friendly palettes.

Hello, Plouc!

I am trying to use your Nivo package to create a Mozaik widget but I can't get the Pie Chart to work.

I hosted the code at Webpackbin (which is the same code presented at http://nivo.rocks/#/pie/) so that you can see exactly what I am refering to: https://www.webpackbin.com/bins/-Kts4ISztFmDaec8MYZX

It shows the data but not the chart.
What could it be? Thanks!

Will allow isomorphic rendering, current component being rendered by d3, it's not possible for now.

Greetings.

Very nice work here!

I made a thing that helps with StreamGraph labels, it may be useful for adding labels your Stream components: https://github.com/curran/d3-area-label

Values displayed in stack tooltip are impacted by stackOffset, for example the expand offset cause values to be displayed as ratio (0~1).

After Updating to nivo@^0.26.2:
ERROR in .//nivo/lib/components/charts/bubble/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./BubbleProps in */node_modules/nivo/lib/components/charts/bubble
@ .//nivo/lib/components/charts/bubble/index.js 41:19-43

Because HeatMap can contains a lot of nodes, we should provide a canvas alternative to this component.

I have tried to visit the website and got an error (waterfox screenshot):

Also, to double-confirm the issue, I have tested it via curl:

stefanos@debian:~$ curl -vI https://nivo.rocks/
*   Trying 104.18.44.131...
* TCP_NODELAY set
* Connected to nivo.rocks (104.18.44.131) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: /etc/ssl/certs
* TLSv1.2 (OUT), TLS header, Certificate Status (22):
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.0 (IN), TLS header, Unknown (21):
* TLSv1.0 (IN), TLS alert, Server hello (2):
* error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure
* stopped the pause stream!
* Closing connection 0
curl: (35) error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure

As you can see, on the ticket title I use http://nivo.works whereas in curl I use https protocol, because the link used in project description it redirects to https://nivo.rocks.

Animation is stuck on TreeMap components when using react-motion for transitions

This is a common, but often challenging, interaction. It'd be great to see how it should work in nivo.

Hi, I'm trying to debug some issues setting up a v2 Mozaik dashboard. The mozaik demo version I'm running has ^1.0.0-alpha.8 in the package.json as a dep but there's only 1.0.0-alpha.4 on github afaict.

FWIW: The rev of mozaik-demo I'm building from is plouc/mozaik-demo@f296609

Hello! I'm trying to find a way to group bubbles by color in the same parent so it looks like this:

Is there an easy way to do it?

Very few libraries provide a flame graph chart, it could be useful to have one.

I tried to look at the demo at http://nivo.rocks/ using IE11

Error on endsWith:

export var closedCurvePropKeys = curvePropKeys.filter(function (c) {
return c.endsWith('Closed');
});

Polyfill, if you care to add, or you could use ES6-shim as there might be more issues:

if (!String.prototype.endsWith)
String.prototype.endsWith = function(searchStr, Position) {
// This works much better than >= because
// it compensates for NaN:
if (!(Position < this.length))
Position = this.length;
else
Position |= 0; // round position
return this.substr(Position - searchStr.length,
searchStr.length) === searchStr;
};

IE sucks, but some of us are forced to use it exclusively at work.

Some blabbing about the issue:
https://www.sitepoint.com/community/t/endswith-issue-in-ie11/233838