Angular-7 - How to create hybrid network and bubble chart - javascript

I have requirement to design a chart with hybrid of network and bubble chart in Angular-7. The result looks something like in the image below It also should show the flow of data like there in the site Union Budget 2020. I am using chart.js and ng2-charts in angular-7. Is there a way around to design such graph in chart.js or need to use some other library? I have gone through these libraries as of now:
Vis Network
D3
GoJS
but did not found the perfect one.

Related

Is there any treemap graph library for React-Native?

I've been looking for treemap chart library for React Native. It looks something like in the photo shown above, I checked a lot of chart libraries like react-native-svg, victory-native etc. I'm not able to find. I appreciate any recommendations.

Is there a way to create a bubble chart with Chartist.js?

I'm searching for a chart tool to integrate into my app and I really liked the Chartist.js but I couldn't found any resources showing how to create bubble charts like this one in D3.
My goal is to create a non-overlapping bubble chart with images.
I would like to know if there is a way to achieve this natively or with a plugin.

Can every d3 chard drawn by rickshaw for cloud-computing software platform?

I have included tags openstack and amazon-web-services because they are cloud-computing platform.
I am going to start Rickshaw chart. It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS.
I am working on openstack. It is a free and open-source cloud-computing software platform. This is alternative to Amazon Web Services. Openstack is in initial phase of development. For demonstration purpose they are using very simple chart like bar-chart, pie-chart, line chart.
My Question that Is it possible to draw every d3 chart through rickshaw.
In Open-Stack project (like Amazon Web Services )
they are using d3 and rickshaw to draw very simple chart like pie chart, bar chart
Is it possible to draw every D3 chart through rickshaw?
No. Rickshaw is a graph library (focused on time series), whereas D3 is more of a framework, so it gives you much more functionality.

What does fusion chart buy you that D3 doesn't?

We are trying to build heavy graph based dashboards. One of the things we have to choose between is D3.js and Fusion charts. Fusion charts is paid. So my question is what does fusion chart have better that d3 doesn't?
D3 is a library to manipulate the DOM based on the data, not a charting library, you have to build the charts for yourself. It gives you absolute control, but you need to spend time creating the chart (scales, margins, etc...). There are some libraries like NVD3 that can ease the process but they could be tricky to modify.
Also:
Fusion charts has support for IE 6, 7 and 8, while D3 doesn't support them.
Fusion charts allows to export the charts to PDF, PNG... easily.
Fusion charts has no support for time series, while d3 support it.
Fusion charts has no brush component while d3 has: http://bl.ocks.org/mbostock/1667367
To know more about the capabilities of D3 and FusionCharts, read more at: http://www.quora.com/What-are-some-capabilities-of-D3-js-which-cannot-be-achieved-using-fusion-charts/answers/2928546

ready to use dynamic pie chart in d3.js

I am evaluating to change the graphics I generated so far using highcharts.js to d3.js
just for fun and I want to learn how d3.js works.
I wonder if there is something similar to the url below (see if you click on a pie it gives you new data), something dynamic and ready to use (or not to implement from zero).
What I wanna achieve, more or less...
http://lully.snv.jussieu.fr/gbif/mapping/graphs/examples/pie-legend.htm
thanks in advance
Pere
If you want to replace Highcharts, I think the only good open-source alternative available at the moment is Bob Monteverde's Novus charts library: http://novus.github.com/nvd3/. NVD3 has a nice pie chart and also has good legends. Take a look at all the charts from this library and you will see what I mean. You can also find a good pie chart in Stephen Boak's tutorial: http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html. Another interesting option is to look for Frank Guerino's questions on the D3 js google group. I would use NVD3 if I were you. It might need some adjustments, but it seems to be the best option currently. Good luck!
Simple function to generate Pie Charts utilisiing d3.js. This function is part of the http://xhprof.io/ project. It is able to handle datasets of arbitrary size. It has several options that allow for customisation, such as the label margin, circle radius and visibility of the percentage data (refer to the source code).
The demo is available at https://dev.anuary.com/858b33b7-bd66-507b-a9f1-533e4de79ba3/. The source code is available at https://github.com/gajus/pie-chart.

Categories