I can't seem to find a simple example where a chart can easily bounce between time grouping levels. Say I have daily data, and I want the ability to display this data on a chart at different levels of aggregation (daily, weekly, monthly).
Is there a good way to do this with D3 without a lot of processing (removing all rects, and replacing with new rects grouped at a different level)?
d3 has a general update pattern that you should use for this case.
The convention is to have two functions, one to setup the visualization, and another to take data and update the visualization.
The update function takes in the new data, binds it, updates existing svg's (rects in your case) and then adds or removes objects as necessary.
Mike Bostock has a great 3 part series explaining this which you can find here: https://twitter.com/mbostock/status/252496768267333632
Since it's time series data, have you considered a line/area chart with brushing? You could add UI components to dynamically set the brush filter to certain date ranges.
Related
I'm working on replacing a dynamic chart implemented in highcharts. The current implementation is a line-area chart that expands over time with incoming streaming data, so the replacement needs to be dynamically alterable, and preferrably animated.
Currently I'm looking at D3 for the replacement. There are a few examples I've found which show that there may be something similar which is possible, such as the charts for streaming data found here, but in this example the line is redrawn at every iteration. It's not terribly inefficient as the visualization is limited to a fixed window of data, but in my case a high volume of data needs to be displayed from start to finish as the data streams in. Redrawing the chart at every addition will likely result in rapid performance loss.
In D3, is there a method of adding a single segment to an existing plot that does not require a redraw?
I ended up abandoning D3 as it required too much development to make it as presentable as an interactive chart that was ready out-of-the-box, but I did figure out how to do what I was thinking.
Instead of re-adding a new line with additional points at every iteration, I ended up using a path component which allows additional points to be added progressively. The path does have to be re-rendered and generates a short svg path string, so I'm not exactly sure which method is more efficient, but a short path string reduces complexity of the resulting html in the case that one were to add multiple lines to the plot, one for each segment.
If an addition to the path involves only the generation of a new string using concatenation of the original then I imagine this could be much more efficient than iterating through an array of series data that grows at every update.
The result was fast enough to keep up with streaming data without any visible slowing of the UI, but it was just unfortunate that I needed something a little more developed.
I have a database where I maintain an entity Ids in one table while maintaining a source and target entity on other table.
I have generated a json of nodes and links. and used the following example as a reference (thought it would be enough to only generate the json file):
Force directed graph for D3.js v4 with labelled edges and arrows
Same code with my generated data
The issue is that the graph is messy and I can't infer anything by looking at it. so what I'm trying to do is, since I am familiar with the relations between the entities I would like the nodes to be ordered top down by labels by some certain order. e.g siteref -> ro -> ba -> gr -> ca
Is that achievable at all? I have looked around for some other examples but did not find anything that could suit my needs.
You can add forceY, and optionally pass it a strength. In the forceY function you can set to return 0 for siteref, 100 for ro, and so on. Then you can tune in at your needs by playing a little bit with the strength in the links and in the different forces. Here is an updated fiddle so you can take a look at the idea. Update fiddle
I'm using angular nv-d3 and while making a chart, I'd like to have a specific point on the graph be highlighted.
My graph looks like:
I'm getting the data by consuming a rest response, my graphs will have 1 to 3 lines, and the each line is guaranteed to have the date point that I will be highlighting.
I could also live with just having a straight vertical line through that date, I just want a way to differentiate that specific date in the rest of the chart.
Couldn't find anything in the docs about this, and most of the methods I've found to do this use d3.select and jQuery, but I'm not sure if that will work with angular.
I have a question regarding ShieldUI pie chart. What I need is to provide following functionality on a web page. Initially a pie chart will represent some data. When user clicks on a slice
I need that slice’s compound data to be broken down taking up the whole chart. Let’s give an example with sales volumes. Initially we have the sales volumes for all the four quarters of the year. Than the user clicks on the first quarter slice. And it divides into let’s say months, or weeks. All that data I need to take up the whole chart. In other words in need some sort of multi dimensional data zooming.
I searched for some sort of hierarchical pie charts, but what they do is to show all the data a once, which is not quite I really need.
Looking at what you need it might be not the chart itself, but the relation of multiple charts that provide the functionality you want.
You may take a look at this answer:
Linking graphs of two Shield UI Charts
The number of related and subordinate charts will be equal to the data depth you have. For instance if you have 3 levels- quarters, weeks and days, you will have 3 related chart. The users will first click on the quarter slice, than on the week.
You could even more fully match the functional behavior needed by using one container for rendering all the charts to. There is however one disadvantage that you will need a button or a link to provide users the possibility to return to the top level.
I am trying to plot data collected live from bee hives. We plan to collect data every 5 minutes, so in a year there will be on the order of 100,000 data points. I want to set up a chart to plot the data, and have new data enter the chart everytime the database changes (using Meteor).
I have a simple mockup at datacomb.meteor.com These charts were made using dc.js, a d3 wrapper.
Is there a way to use the topojson.simplify (http://bost.ocks.org/mike/simplify/) functionality to pre-process the lines and reduce the number of points rendered? Has a more general simplification method been integrated into d3?
Have you looked at Simplify.js? It does exactly this.