I am working on a project which combines all the d3.js visualizations with backbone.js into a single page application. Since I have many visualizations such as bar chart, pie chart, and so on, i was wondering what the best approach to this problem is.
For instance, lets say I have a two bar charts, and a pie chart. Should I put all set margins, scales, render all data for all the charts together in a view? Since there are two different types of graphs, what should be the model?
What should go to View, Model, Controller, Collection, and so on?
Thanks in advance,
I've looked into combining D3 and Backbone a little and there are a few existing solutions out there:
Overview presentation
Short tutorial on combining Backbone & D3
Longer discussion on marrying Backbone and D3
A bunch of JS libraries for integrating with D3
I also found a library on GitHub but it didn't seem to be supported...
In the end, none of these really satisfied me so I developed my own Backbone models, collections & views. I set up:
ChartPoint Model - X & Y coordinate and a point label
ChartSeries Collection - Collection of ChartPoints that define the full chart
ChartBaseView - A view that interprets the data above, handles events, draws axes and other general functions
BarChartView, LineChartView, PieChartView, etc. - Specific views for rendering the type of charts you want. Most of your D3 code goes here.
Not saying this is the "right" way to do it... just my way.
Related
I am building a dashboard that needs a drill-down pie chart. Does DC.js support drilling down natively? I have implemented drill down in Highcharts quite easily in the past, but we need support for cross filtering and dimensions, so I would like to be able to use DC.js.
Thanks.
No, it does not. You really should be looking to use crossfilter.js and dc.js together. You will find this a lot quicker than implementing drill down in another charting library if you have more than just the one chart. If you’ve just the one chart, than it would make sense to use one of the many javascript charting libraries. I recommend AmCharts as it is easy to write custom listeners with their api.
I am trying to use D3 to create a create a maintainable and customizable map of my application, which has 100+ screens on it in different sections, a bit like a flow chart but much simpler, like the following example:
I believe this would be called a "directed graph", and I have checked out lots of projects that use d3.layout.force to generate the layouts, but is there a type of layout that would allow me to keep the flow from left to right and the lines generally running at right angles to each other, as well as corner radii for the line?
I just am very new to D3 and feel I just may not be searching for the right graph name or missing a library that would be useful for this purpose.
Hi I'm just getting into Data Visualization and D3 and I'm trying to make a diagram that conveys the relationships between a group of people and I was wondering if I should use a Chord Diagram layout or a Hierarchal Bundling layout?
I like the look of the edges in Hierarchal Bundling layout but I really don't have an Hierarchy. Also Im not sure how the bundling works.
Can I make a chord layout in D3 with just strokes and not fills?
Here's a list of resources that can help you choose the right visualization technique for your data:
How to design Charts and Graphs
Guide to Visual Communication
Visualization Cheatseet by Tom MacWright
A Tour through the Visualization Zoo by Jeffrey Heer, Michael Bostock, and Vadim Ogievetsky
if you have number of people plototed against their attributes, then parallel plotting is the best option. In parallel Plotting you can compare the feature of 1 perso with another on the same chart.
Here are the two links that will help you in creating parallel coordinates:
parallel chart 1 with all the capability making use of 1 library`
The famous chart directory blocks.org
I have two network graphs but placing both of them next to each other is the easiest way to compare if the graphs are small. But as the graph grows, it is making hard for the user to compare the views. I wanted to know the best way to merge two graphs and show the comparison.
In the above picture it can be seen that no of nodes are same but the way they are linked is different.
I would like to know how to present the compared data.
Any ideas about different views to present such comparison using d3.js.
I would suggest not trying to apply force layout or similar method for drawing graphs (that would draw the graph in a fashion similar to the on in the picture in your question). Instead, I wold like to suggest using circular layout for both graphs (similar to chord diagram):
This visual example is made for other purposes, but similar principles could be applied to your problem:
Layout all vertexes on a circle, in equidistant style (if there are some vertices belonging only to one of two graphs, they can be grouped and marked different color)
If there is a link between two vertices in both graphs, connect them in one color (lets say green)
If there is a link between two vertices in one graph only, connect them in appropriate color, dependant on a graph (lets say red and purple)
This method scales well with number of vertices.
Hope this helps.
Following methods for network comparison could be useful in the current scenario:
NetConfer, a web application
Nature Scientific Reports, an article guiding comparisons
CompNet, a GUI tool
I'm currently working on building a charting web application, and I've chosen dygraphs for my time series data (Two weeks of data at an hourly level, if anyone finds this information relevant). On the same page, I also have a couple of customized d3.js charts that pull metrics from the same database as the trendline.
I want to know if I will be able to link the selection on my dygraph line (Supposing I zoom in on 3 hours worth of data, i.e., 3 rows) - to my d3 charts, so that the data in the d3 charts also get filtered down to the date range chosen by zooming in?
I'm quite the amateur here, and apologize if my question seems vague, but any sense of direction would be helpful.
I'm guessing I should be able to do this by modifying some class in the dygraphs source code, or reference the same from my d3 chart.
Thanks.
You shouldn't have any trouble doing this. There's no need to modify the dygraphs source. You can implement handlers on the dygraph object (zoomHandler or drawCallback, most likely) which update the D3 chart.
See this demo for an example of synchronization between multiple dygraphs.