jasondavies / d3-parsets Goto Github PK
View Code? Open in Web Editor NEWAn interactive parallel sets visualisation for D3.js.
Home Page: http://www.jasondavies.com/parallel-sets/
License: Other
An interactive parallel sets visualisation for D3.js.
Home Page: http://www.jasondavies.com/parallel-sets/
License: Other
Error: Uncaught TypeError: d3.rebind is not a function when run against
<script src="https://d3js.org/d3.v4.min.js"></script>
in d3.parsets.js line 428
This is a beautiful implementation of parallel sets and an invaluable example for the D3 universe. Unfortunately it seems to have wilted a bit over time. It doesn't work in v4, and even with v3 there seems to be a bug with the Show Icicle Plot handler.
I think I'll be tweaking it for my own application, but mine is idiosyncratic enough and part of a bigger app, so my fixes won't easily fit back into this repo.
Does anyone know if there's a more current implementation of parallel sets? This one has a lot of forks, but I don't know how to figure out if any of those forks are actively maintained and used by anyone other than their owner.
If anyone wants to take charge of maintaining an up-to-date parsets repo, I'll switch to using it and will pitch in whatever changes I make that might be of general use.
As title. Does such API exist so that I can rotate the graph? Or I need to rotate manually?
Thanks a lot
It seems that with parsets, everything is done internal to the file, so it is hard to add click handlers and be able to tie that back to the data.
Is this something you would consider exposing?
Hi, thanks for a great plugin for d3!
In my data I have weekdays (Monday, Tuesday, etc...) when an event occurs. When I load parsets, it apparently organises events based on what the data had first. So in my chart it may read: Friday, Sunday, Monday, Saturday... etc.
Sorting weekdays alphabetically does not make much sense either. Is there any way to sort a category with a custom sort function?
Maybe it could be an option people pass to parsets and it would render it next to the regular sorting features. (Or even replace one of them) It would also be nice to be able to set the default sorting algorithm to be used on load.
I tried to take a stab at this, but sadly my d3-fu is weak. :(
After sorting there can be a mismatch between (i) the area of the SVG that triggers a mouseover event and (ii) the ribbon that is associated with that event. It appears that the old coordinates/area for a ribbon are used when detecting a mouseover, even though the ribbon is now visually drawn in a new location. For example, in the titanic survivers graph:
http://www.jasondavies.com/parallel-sets/
The same behavior is observed in Safari 5.0.6 and Firefox 8.0.1.
I'm trying to change the dimensions dynamically by calling: vis.call(chart.dimensions(["Survived", "Sex", "Class"])
when the user clicks on a button.
But when the function is called I get an error: Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined
on line 90 which is within the updateDimensions function in the reusable chart.
I've asked a question on StackOverflow but with no luck.
Can this be implemented so that it is possible filter the dimensions dynamically without creating a new svg object?
I've tried modifying the code but it just moves the problem around.
the totals field is not getting updated, which is resulting in the % calculation being wrong once you update the data. Can this be fixed?
As far as I can tell, I am building the chart correctly and the data is formatted correctly. However, when I try to render my chart, I get the error "Error: Invalid value for attribute width="9.399999999999999e-132" "
Could this be because the "frequency" values are too large?
My code is as follows:
//parallel sets chart
var parsetchart = d3.parsets()
.dimensions(['price performance', 'order size', 'order type'])
.tension(.5)
.value(function(row){ return row.freq;});
var parsetvis = d3.select("#vis").append("svg")
.attr("width", parsetchart.width())
.attr("height", parsetchart.height());
var test2 = ... (see below for data)
parsetvis.datum(test2).call(parsetchart);
//test data (this is a legitimate dataset, values are measured aggregates of stock shares traded by the whole exchange, so the values may be very large indeed...much larger than what I have here).
var test2 = [
{"order type":"market","order size":"100-499","price performance":"price improved","freq":"1869390"},
{"order type":"market","order size":"500-1,999","price performance":"price improved","freq":"3246105"},
{"order type":"market","order size":"2,000-4,999","price performance":"price improved","freq":"2175928"},
{"order type":"market","order size":"5,000 or more","price performance":"price improved","freq":"1364679"},
{"order type":"marketable limit","order size":"100-499","price performance":"price improved","freq":"740954"},
{"order type":"marketable limit","order size":"500-1,999","price performance":"price improved","freq":"1636350"},
{"order type":"marketable limit","order size":"2,000-4,999","price performance":"price improved","freq":"1039836"},
{"order type":"marketable limit","order size":"5,000 or more","price performance":"price improved","freq":"990820"},
{"order type":"inside-the-quote limit","order size":"100-499","price performance":"price improved","freq":"0"},
{"order type":"inside-the-quote limit","order size":"500-1,999","price performance":"price improved","freq":"0"},
{"order type":"inside-the-quote limit","order size":"2,000-4,999","price performance":"price improved","freq":"0"},
{"order type":"inside-the-quote limit","order size":"5,000 or more","price performance":"price improved","freq":"0"},
{"order type":"at-the-quote limit","order size":"100-499","price performance":"price improved","freq":"0"},
{"order type":"at-the-quote limit","order size":"500-1,999","price performance":"price improved","freq":"0"},
{"order type":"at-the-quote limit","order size":"2,000-4,999","price performance":"price improved","freq":"0"},
{"order type":"at-the-quote limit","order size":"5,000 or more","price performance":"price improved","freq":"0"},
{"order type":"near-the-quote limit","order size":"100-499","price performance":"price improved","freq":"0"},
{"order type":"near-the-quote limit","order size":"500-1,999","price performance":"price improved","freq":"0"},
{"order type":"near-the-quote limit","order size":"2,000-4,999","price performance":"price improved","freq":"0"},
{"order type":"near-the-quote limit","order size":"5,000 or more","price performance":"price improved","freq":"0"},
{"order type":"market","order size":"100-499","price performance":"at quote","freq":"178528"},
{"order type":"market","order size":"500-1,999","price performance":"at quote","freq":"222823"},
{"order type":"market","order size":"2,000-4,999","price performance":"at quote","freq":"175089"},
{"order type":"market","order size":"5,000 or more","price performance":"at quote","freq":"122417"},
{"order type":"marketable limit","order size":"100-499","price performance":"at quote","freq":"1521296"},
{"order type":"marketable limit","order size":"500-1,999","price performance":"at quote","freq":"2238074"},
{"order type":"marketable limit","order size":"2,000-4,999","price performance":"at quote","freq":"1328908"},
{"order type":"marketable limit","order size":"5,000 or more","price performance":"at quote","freq":"870033"},
{"order type":"inside-the-quote limit","order size":"100-499","price performance":"at quote","freq":"0"},
{"order type":"inside-the-quote limit","order size":"500-1,999","price performance":"at quote","freq":"0"},
{"order type":"inside-the-quote limit","order size":"2,000-4,999","price performance":"at quote","freq":"0"},
{"order type":"inside-the-quote limit","order size":"5,000 or more","price performance":"at quote","freq":"0"},
{"order type":"at-the-quote limit","order size":"100-499","price performance":"at quote","freq":"0"},
{"order type":"at-the-quote limit","order size":"500-1,999","price performance":"at quote","freq":"0"},
{"order type":"at-the-quote limit","order size":"2,000-4,999","price performance":"at quote","freq":"0"},
{"order type":"at-the-quote limit","order size":"5,000 or more","price performance":"at quote","freq":"0"},
{"order type":"near-the-quote limit","order size":"100-499","price performance":"at quote","freq":"0"},
{"order type":"near-the-quote limit","order size":"500-1,999","price performance":"at quote","freq":"0"},
{"order type":"near-the-quote limit","order size":"2,000-4,999","price performance":"at quote","freq":"0"},
{"order type":"near-the-quote limit","order size":"5,000 or more","price performance":"at quote","freq":"0"}
];
Is there any way to merge ribbons that have the same source and targets?
Is there a way to make the parallel set take different values which are in json for a data entity I have did with some random number generator
svg.datum(data).call(chart
.value(function(d, i) {
var v1, v2, v3;
v1 = d["Valu"];
v2 = d["Val"];enter code here
v3 = d["Value"];
console.log(v1);
console.log(v2);
console.log(v3);
var x = Math.floor((Math.random() * 10) + 1);
if (x < 5) {
return v2;
} else {
return v3;
}
})
.mapLevel(levelMap)
.dimensions(arrayOfDimensions)
//dimensions to be displayed by chart. (i.e "Cost Item", "Location" etc)
);
There is three different values named, Value, val, valu , I want nodes to take different values for parallel nodes , So that each set of parallel node has different size of nodes example :
nodeP
]
]
node Parallel to nodeP
]
has different size so ribbon connecting them has varying size from source node to destination node.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.