jasondavies / d3-parsets Goto Github PK

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.

Is there any way to merge ribbons that have the same source and targets?

As title. Does such API exist so that I can rotate the graph? Or I need to rotate manually?

Thanks a lot

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"}
];

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

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.

the totals field is not getting updated, which is resulting in the % calculation being wrong once you update the data. Can this be fixed?

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.

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. :(

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?

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/

1. All mouseover events work correctly on initial page rendering:

• 'Parished,Male,Adult,Third Class' is rendered to the left of 'Parished,Male,Adult,Crew'
• mouseover events match up with the drawn ribbons

1. Sort 'Class' by size

• 'Parished,Male,Adult,Third Class' is now rendered to the right of 'Parished,Male,Adult,Crew'
• mouseover event region for 'Parished,Male,Adult,Third Class' is offset to the left of the associated ribbon
• mouseover event region for 'Parished,Male,Adult,Crew' is offset to the right of the associated ribbon
• (appears that the old values are being used for mousever detection)

The same behavior is observed in Safari 5.0.6 and Firefox 8.0.1.