npashap / viz Goto Github PK

In the demo as below, it seems chord has default 'width' and 'height'. Setting the width and height of 'svg' cannot take effect. The result diagram still in 'fixed' size. Is there any way to change the size of chord? Thanks!

With .sortPrimary() it works fine initially but on runtime (on mouse hover) it won't work but .sortPrimary() would called.

Sorry, didn't know how else to contact you. We're interested in using your Chord visualization, and would like to contract with you to make some (hopefully) minor enhancements. Please let me know if interested.

The bipartite graph is really beautiful, unfortunately it can't fit my use case. I wish 1. being able to add multiple levers of bars, 2. currently bar height's calculation is under assumption of flow conservation, sometimes the flow conservation may not hold as in my case, I'd like to have the option to define bar height (similar to node weight) independently rather than inferred as sum of inputs or outputs, 3. when mouseover on a bar part, is it possible to just highlight related links, and don't focus related bar parts and re-scale those parts. Just wanna know if these things are in your roadmap?

Hello,

It seems that if there are a lot of labels, they do overlap. I tried to play with svg height and height() but the results are either hidden or overlapping.

What does the fourth column of the data mean?

Hi:
In your example in: http://bl.ocks.org/NPashaP/9994181 .
What is the type of license?
Can I use it in a GPL proyect?
http://xinzodelimia.esy.es/nova/economia.php
Regards :)

Would you kindly provide sample code for using color scales with your biPartite layout.

For example, changing from:

var color = {Elite:"#3366CC", Grand:"#DC3912", Lite:"#FF9900", Medium:"#109618", Plus:"#990099", Small:"#0099C6"};

to:

var color = d3.scaleOrdinal(d3.schemeCategory20);

Does not work. What's the trick? Thanks and Great Work!!!

What is the license on this graph? http://bl.ocks.org/NPashaP/a74faf20b492ad377312. It says the contact the author and this isn't apart of your github page that has a license.

I get this error for d3 3.4.13 version.

Uploaded license file on Github it's BSD3, but Examples has GPL3
Which one is correct?

valueFormat not recognized if I use the unminified version from GitHub; pulling from http://vizjs.org/viz.v1.1.0.min.js works as expected.

I am using d3 v4. Drawing biPartite - Adding labels Example URL TO Example
My sample data is
var data = [ ['host1', 'Call 1', 524, 'Kb'], ['host2', 'Call 2', 56, 'Kb'], ];
I want this 4th element accessible in a variable e.g "unit"

So far I have declared unit like this

var key_scale, value_scale ,keyPrimary, keySecondary, value, unit ,width, height, orient, barSize, min, pad ,data, fill, g, edgeOpacity, duration ,sortPrimary, sortSecondary, edgeMode ;

added a function in viz.bP like this

bP.unit = function(_){ if(!arguments.length) return typeof unit !== "undefined" ? unit : function(d){ return d[3]; }; value = _; return bP; }

But it is not accessible like other variables like d.part, d.percent, d.value and d.key

I tried to add it into calculateMainBars() function as a key value pair like this

` function calculateMainBars(part){

        function v(d){ return isSelKey(d, part) ? bP.value()(d): 0;};

        var ps = d3.nest()
            .key(part=="primary"? bP.keyPrimary():bP.keySecondary())
            .sortKeys(part=="primary"? bP.sortPrimary():bP.sortSecondary())
            .rollup(function(d){ return d3.sum(d,v); })
            .entries(bP.data());

        var bars = bpmap(ps, bP.pad(), bP.min(), 0, _or=="vertical" ? bP.height() : bP.width());
        var bsize = bP.barSize();
        ps.forEach(function(d,i){
            mainBars[part].push({
                 x:_or=="horizontal"? (bars[i].s+bars[i].e)/2 : (part=="primary" ? bsize/2 : bP.width()-bsize/2)
                ,y:_or=="vertical"? (bars[i].s+bars[i].e)/2 : (part=="primary" ? bsize/2 : bP.height()-bsize/2)
                ,height:_or=="vertical"? (bars[i].e - bars[i].s)/2 : bsize/2
                ,width: _or=="horizontal"? (bars[i].e - bars[i].s)/2 : bsize/2
                ,part:part
                ,key:d.key
                ,unit:d.unit
                ,value:d.value
                ,percent:bars[i].p
            });
        });
    }`

but it is not accessible here.

I know I am missing something very basic but please help me out :)

Hello, my English is not good

I first used D3.JS, I find it very interesting

I tried using "biPartite" and would like to ask

How do I use the output percentage instead of displaying the value in "var data"?

I tried to modify ".text (function (d) {return d3.format (d.percent)})"

But display object.

Hi.
Thank you for your amazing project.
I found an issue.

I try to use d.value, but d.value is undefined value.
I confirmed source code. LINE 184 ",value:d.value" should be ",value:d.values" .

This is the graph before update

After I click "A" it will update the graph, then

This is the code I made for update

`var bp = viz.biPartite()
    .height(580)
    .width(chartContainer.width() - 230)
    .keyPrimary(d=>d.group)
    .keySecondary(d=>d.subgroup)
    .value(d=>d.count)
    .data(data);

g.call(bp);

g.selectAll(".viz-biPartite-mainBar")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .on("click", mouseClick);
    	
g.selectAll(".viz-biPartite-mainBar")
    .append("text")
    .attr("class","label")
    .attr("x", d => (d.part == "primary" ? -30 : 30))
    .attr("y", d => +6)
    .text(d => d.key)
    .attr("text-anchor", d => (d.part == "primary" ? "end" : "start"));

g.selectAll(".viz-biPartite-mainBar")
    .append("text")
    .attr("class", "perc")
    .attr("x", d => (d.part == "primary" ? -100 : 80))
    .attr("y", d => +6)
    .text(function (d) { return d3.format("0.0%")(d.percent) })
    .attr("text-anchor", d => (d.part == "primary" ? "end" : "start"));

function mouseClick(d){
    childChartsId.forEach( function (data) {
        if(data.group === d.key){
            sendRequest("/api/mongodb/findByID", "data", JSON.stringify(new queryObject("analysis_charts_data", data.chartId)), function (chartsData) {
                // executeFunctionByName(chartsData.functionName, chartsData, $(".resultUserCharts"));
                // g.call(bp.data(chartsData.data));                    
                bp.update(chartsData.data);
            });
        }
    })
}`

Is this a BUG?

d3 version: 4.12.2
viz version: 1.4.0

Thanks!

This is more of question than an actual issue. One of the columns on my bP is a date (MMM-YY, JAN-16 and such). Is there a way to unsort the labels so the order shows up chronologically (because it's a date) and not alphabetically?

(UPDATE: Finally I've solved that problem, if you are interested you can see the changes here)

Hello,

Is there a way to rotate labels, even when it's hover?

Like this:

I'm working in this chart (viz and d3):

When hover (I'm hiding labels when its value is 0):

Thank you!!!

NPasha great visualization.
How does one update the data. For instance, if I wanted to have the viz change for different years selected?
Thanks

I would like to give different color to the subBar.Is there a way to do it. kindly update

Pasha,
Thanks for adding the update.
However it only works when the data changes but not the number of connections.

See the example below.
As shown when you run the program, the edges do not update correctly.

The Visualization biPartite is really good and sticks to the promise os the Definition very well.
Unfortunately this doesn't seem to work in Internet Explorer 9, 11.

I tried to export as an png image drawing the svg base64 image in a canvas but the drawImage function throw a "Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.(anonymous function)"

I made a img and serialize the svg to svg+xml string, and then convert it to base64. this img i pass to canvas.getContext("2d").drawImage function.

this canvas i will export with canvas.toDataUrl.

the same data:image/svg+xml;base64 open nicely in a new tab, like in http://desafio.kayran.com.br/desafio page, but the same data doesnt open im img tag and no open in canvas.

how to solve this issue?