d3 is pretty cool and I just got started with it as a novice. There are several examples for histograms and I settled on this one. And I did a brief search for cumulative line chart, cumulative distribution, and cumulative frequency, all with respect to d3 but didn't find anything like what I was looking for, but the closest I came to was this, and in light of a better solution, I will try to pursue that and see if I can customize it for my needs. Ideally though, I'm looking for something akin to what Excel offers in terms of histogram with a cumulative frequency/distribution line overlaid on top (with its axis/label being the y-axis on the right). Is there such an equivalent capability with d3 (ideally available as an example/demo to work off of)? That way I have 1 chart rather than 2.
If no readily available examples/demo, any tips for extending my chosen histogram implementation with the cumulative frequency line on same chart with an axis label to the right? As I'm a novice, it will be hard/tricky for me to figure out on my own.
Would this example be close to what you are looking for? D3 has a histogram layout that does a lot of the computational legwork for you and can be plotted like any other bar graph. Just sum up the count data to create the CDF.
Related
Using chart.js, I have a bar chart with datapoints spread across many years:
If you look closely near the x-axis, you can see some grey bars. Here's a line chart with the same data for reference:
While using a line chart for this example could make sense, it makes the charts with less data a bit awkward:
and with bars instead of lines
Is there an option that could be used on bar charts to improve the readability when large x-axis are involved? I am representing occurrences of events over-time, another adapted kind of chart could be acceptable too.
Thanks.
I am not sure there will be an option on chart.js.
One way to deal with it is to render line charts initially and then switch the type to 'bar' when zoomed into certain date ranges.
Depending on the type of data, you could also group up the data by summing (or averaging) the data by day (or week or month). Then pass it into the chart and the time series option should be able to display the x axis dates in a more sensible manner.
Otherwise you will have to look into more power charting libraries that can handle and manipulate bigger datasets like amCharts: https://www.amcharts.com/demos/stock-chart-candlesticks/
Or look into using D3 that is highly customisable, but a bit more complex to work with.
I'm currently designing a financial timescale with quite a large dataset, as a result I have noticed that using d3's built-in timescale doesn't really allow for "clipping" parts of the day out, and results in quite an ugly looking graph if I'm wanting to span say, weeks or months (a lot of flat lines like this):
I'm aware that I can use ordinal scales and input my own data but with a dataset of over 2000 points for just a week, this isn't really feasible. I was wondering if there were any plug-ins for d3 that I could use to have custom defined timescales in my chart so that I could clip say, from 9pm to 9am and exclude weekends?
The project d3 discontinuous scale could be useful for your use case.
They have an example to remove weekends https://github.com/d3fc/d3fc-discontinuous-scale/blob/1a2e551fbcaec2852581e20c30e3e5fd7c3e9b32/src/discontinuity/skipWeekends.js that could be a good starting point.
Also here's a blog post and a gist that can be useful too
Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them
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.
Does anyone have any examples of stacked graphs (or stream graphs) in Raphael?
I'm wondering if there is a working Raphael equivalent of this D3 streamgraph:
The closest I've seen is this line chart example:
I guess I could just knock up a stacked graph based on this, but it'd be great if anyone already had some outline code.
Are you looking for something like this. It's based on Raphael.
If you need something more powerful I could recommend Sencha ExtJS.
Area Graph #1 and Area Graph #2 are looking quite like your posted D3 streamgraph.