d3 zooming charts together in different divs - javascript

I have multiple charts in different divs on the same page. All charts
have zoom/pan implemented. However, I want to implement synchronized zooming/panning across all charts, such that when someone zooms/pans one chart all charts zoom/pan together.
In other words, I'd like to implement mbostock's Focus and Context (http://bl.ocks.org/mbostock/1667367) when they are in different divs.
I'm using angular.

Related

Is there a common time range widget for zooming in multiple charts (highcharts)

I am using Highcharts-Vue and I have multiple stockChart charts that I want to synchronize their x-axis zoom. So, when I zoom in one, all the others zoom at the same region.
Is there a way to do so?

Customize tooltip for multiple graphs in one plot

I am using React plotly.js
in our application. We are plotting multiple graphs (line, area, bar). I need a way to customise look and feel of tooltip which appears on hover of graph.
This the code sandbox for references of my code.
This is the output of the plot.
Currently the tooltips appear clumsy when we have multiple lines with multiple graphs which appear individually at each line.
Do we have a way to show only one tooltip with data of all lines at a hovered point.

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.

Is there any way to make multiple graphs in Javascript and show them as stacked cards?

I'm hoping to make an application which shows multiple graphs but show them as stacked cards. There can be a button nearby to cycle through the cards, or the user can hover on one of the graph-cards to highlight it. I've used CanvasJS before and while it has stacked graphs, it doesn't have anything for stacked cards. I've searched quite a bit but all I've found are ways to make stacked graphs, but sort of like what CanvasJS already has. I found this code to make some stacked cards, but I couldn't integrate CanvasJS graphs into it.
Does anyone know any way by which I can have graphs stacked on top of one another?
It seems like it was more of an implementation issue, rather than framework. I found this code which works perfectly with my requirements.

interaction between d3.js graph and dc.js graph

I am working on d3.js and dc.js libraries from few weeks. I have created scatter plot in d3.js and bar graph in dc.js. I want to know that is there possibility to interact between these two different graphs created in two different javascripts. In short, is it possible to interact between two different graphs created in d3.js and dc.js?
thank you.
Not going to give you the codes, sorry.
You'll want to use crossfilter as the bridge between the graphs, though:
create a dimension which is for the scatterplot (different from the dimensions used in the dc.js charts, but same crossfilter instance)
react to the interaction in d3 and set the filter on that dimension
Often when creating a dimension for a scatterplot, you will use a key that is unique for each row, or barring that, the row index itself. If you search around for dc.js scatterplot or bubblechart, you ought to find examples.
Also dc.js has a scatterplot now. It needs some love and is not as feature-rich as the bubble plot, but it exists.

Categories