Coder Social home page Coder Social logo

q-m / d3.chart.sankey Goto Github PK

View Code? Open in Web Editor NEW
107.0 107.0 36.0 350 KB

Reusable D3 Sankey diagram using d3.Chart

Home Page: http://bl.ocks.org/cab9b01816490edb7083

License: MIT License

JavaScript 78.26% HTML 21.74%
chart d3 javascript sankey

d3.chart.sankey's People

Contributors

kepoling avatar nihey avatar wvengen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

d3.chart.sankey's Issues

alignLabel issue

Hi,
When I assign to alignLabel 'start' the names of the last nodes are lost, the same happen with the label 'end', in this case the names of the first node are lost.
btw thanks for the plugin, is great.

Vertical graph

Is it possible to make to graph go vertical in stead of horizontal? If not integrated, where do I have to look to make it work myself?

Sankey.Path Highlight full path

Is there anyway with the Sankey.Path variant to highlight the full path from the first source to the last target? Right now, i am unable to get it to function as such.

image

I really would need the path to highlight as indicated by the red arrow in the above picture.

Thanks for any advice

Dragable Node

How Can I implement the drag functionality?

Something like this:

.on("drag", dragmove));
function dragmove(d) {
		d3.select(this).attr("transform", 
			"translate(" + d.x + "," + (
					d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
				) + ")");
		sankey.relayout();
		link.attr("d", path);
	} 

Sorting algorithm

Dear author!

Appreciate your work, it's really a state of art tool!

But I have an issue with the way it sorts the flows of diagram, it makes a lot of crossings (please see the screenshot here). If you could give a tip where to look - would really appreciate it!

If you want to contact me - please write on [email protected]

Thank you in advance!
Best regards!

Trying to extend functionality es6

Hello,

Trying to find a way to extend this great module you've created by doing something like...

import { Sankey, Path } from 'd3.chart.sankey'

class MySankey extends Sankey {
  constructor() {
  	super()
  
	console.info('...my code goes here...')
  }

  initialize() { console.info('initialize')

  }
}

export { MySankey as Sankey }

But it doesn't seem to work quite right, wondering if this is because you are using require etc. not sure. Thanks for any thoughts, I may fork your module and rewrite it using ES6 pragma.

zero waited links remove the source

if your data has a zero waited link the source node is removed from the diagram so that if:
A => C with 5
A => B with 5
B => C with 0

B doesn't appear one the chart
A is size 10 with only half its value going to C

What i would like is for the elements to be positioned as if B => C had a value > 1 but with no visible link from B to C.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.