npashap / viz Goto Github PK
View Code? Open in Web Editor NEWLicense: BSD 3-Clause "New" or "Revised" License
License: BSD 3-Clause "New" or "Revised" License
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 would like to give different color to the subBar.Is there a way to do it. kindly update
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.
Uploaded license file on Github it's BSD3, but Examples has GPL3
Which one is correct?
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 :)
(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?
I'm working in this chart (viz and d3):
When hover (I'm hiding labels when its value is 0):
Thank you!!!
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?
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!
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.
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.
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.
With .sortPrimary()
it works fine initially but on runtime (on mouse hover) it won't work but .sortPrimary()
would called.
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.
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 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?
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?
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!!!
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!
<script> //... var chord = viz.chord() .data(getData()) .source(function(d){ return d[1]}) .target(function(d){ return d[0]}) .value(function(d){ return d[2]/1000}) d3.select("g").call(chord); </script>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 :)
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" .
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.