Develop Reference

How to add a single data point to a line graph in D3 without redrawing

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.

Highcharts: Best way to show related events to data

I work with a lot of time series data that comes from various devices. In this post, I will just use an example of battery data because it's nice and simple. I can easily take the battery data and chart it over time in highcharts using the DateTime axis. I always have other event data that is important to know about because it gives you context to what you are looking at but doesn't need to be charted. As an example, Someone turned on or off a light. Knowing that gives you context why the battery usage has changed. Today I put those in as a plotline. The problem with a plot like is that you are very limited on interacting with it. You can have a label but when you have a lot of plot lines close together the labels are a complete mess. I also can't really do a nice tool tip that would give the user more information about what they need to know. An example is they see the plot band and they see it was a "light turned on" event and they do something and they can see that a light with x watts turned on pulling Y amount from that battery. What works well for a plot band is that when I zoom in they are respond to the change.
I am looking for a solution, a pattern, an approach to allowing the user to display their time series based data with some related events that are overlayed over it. This approach would allow the user to dig into it a little bit to get context and a better understanding of their time series data
I don't know if this is something that is solved with Highcharts or if it's just a general UX problem. I am definitely looking for some help. Hightcharts is here to stay in this project but I can't seem to solve this problem
This is a sample battery chart that I made for this post. these are grey plot lines for events that are happening a lot and are really close together. As you can see the user has no context oh what they mean. They do know something has happened and can go crawl the data to see what those plots might be. In the real world, they know that grey is a debug event and they can dig into it from there but this really isn't a solving the problem

You could:
1. use a separate scatter series to mark events with a specific point marker, which allows you to leverage the legend, data label, and
tooltip functionality automatically
2. use the plotLines / plotBands, and create custom mousein/out events to
mimic a tooltip
3. use the flags series type from Highstock
http://www.highcharts.com/stock/demo/flags-general
4. Use the Annotate plugin found in the Highcharts plugin repository
http://www.highcharts.com/plugin-registry

Making a colored box plot without whiskers using D3

I am new to D3 and am hoping to show a range of prices (lowest price, median price, highest price) for different services using a graph similar to what Glassdoor uses (see this example: http://bit.ly/1koKeLL).
It's a horizontal bar chart that has a variable margin on the right and left so that it graphically shows the low, median, and high data points. Does anyone know the best way to implement this, especially for someone just learning D3?

I think this guy implemented very well a chart that is more complex than your chart:
Bullet Chart in D3
However, if you want to get to know D3, and to use it in an intelligent and productive way, my strong advice is:
Don't take shortcuts.
This means that before you start implementing anything, you go through at least one good tutorial, and take at least brief look at D3 documentation.
A good tutorial is here. Go through ALL 20 lessons. Implement ALL examples on your local machine. You can do it in several days. And only then you come back to your example.
Don't be seduced by stories that you can find on the net like "I started with D3 yesterday, and now I create craziest visualizations". They are either lies or profound ignorance.

Canvas or SVG (or a blend) for large Org Chart

The main question is pretty simple... I'm making a rather large Organization Chart (or genealogy) and I'm wondering whether I should be using SVG or Canvas.
Some of the requirements might sway the choice:
Must be able to display between 1 to 50,000 nodes/people
Needs to pan and zoom much like a Google/Bing map.
Need to be able to click on a node and pop open a dialog with extra details on the person.
I was initially leaning towards SVG, but I heard somewhere that it would have performance problems when drawing a large number of items. Also, it seems Canvas has better support in older browsers.

Thanks everyone for your input. The following is what I have come up with after exploring some of the advice given.
SVG: This route was very tempting due to its vectorized nature and its integration into the DOM. Sadly the performance of rendering +100k nodes killed this route.
Canvas: Performance wise this seemed to be a winner. However, at this point I will need to explore how to add onClick/onHover functionality to each of the rendered nodes.
Leaflet: This too is a winner. It takes care of a lot of concerns like the map-like navigation, performance and mobile ready. Though it isn't a solution as to 'how' to draw the org chart. However, what is nice about it is that you can feed it image tiles or canvas. Which gives us some choice.
So in the end it is likely that I'll be using image titles to begin with and then migrating to canvas... while keeping my eye on performance advancements in SVG.

Violin chart in D3

Any ideas on where to even begin with making a violin chart using d3? Does it exist already?
I've looked around and have figured out how to do it using ggplot2 and was hoping there'd be a ready-made example that I could learn from but haven't found one yet.
I suppose I could do a really painful process of making various size bars on top of each other, or taking a distribution, rotating it and mirroring it. But surely there's a better way.

I needed that for myself so here it is: violin plot

As far as I know, nobody has done this before, but it shouldn't be too hard. I would start as if I was making a line chart (or boxed instead of lines) for one half of a violin. That is, create the appropriate x and y scales and add the data in. The result of this I would rotate and translate to the correct position. Then do the same thing again and mirror it as well to get the other half of the violin.
This may sound complex, but SVG has built-in support for these operations (rotating and mirroring). You should be able to approach this pretty much like drawing a line graph of the distribution with 2-3 simple operations on top of that. Wrap everything in a function and you've got something you can call to create a violin.
It of course also depends in what form you have the data to make the plot. A line plot might not be feasible because of too few data points, but then you can easily use bars instead.