I'd like to implement a population pyramid in dc.js.
The goal is to benefit from all advantages of dc.js in terms of integration of d3 & crossfilter (i.e. my population pyramid would interact with all the other dimensions of my viz. I have already seen pretty good examples in d3 (for instance here: Creating Population Pyramid with D3.js ) put I am looking for a solution within dc.js.
My dataset has columns for each age & sex group.
I was initially thinking of using a "one bar rowchart" for each of those groups, use exactly the same axis scale and bring them together in what could look like a population pyramid.
Though this approach seems like not the right one as I will not be able to have a "one bar row chart" (i.e. I will always get at least 2 bars in my rowchart.
Any hints, ideas, suggestions or examples would be really appreciated.
Thanks!
It might be easier to "simply" write a new graph type to dc. If you install dc.js from git and install grunt, you will be able to add a new pyramid graph in the src source file and get it into your dc.js
It's less scary that it sounds, have a look at existing graphs (rowchart or barchart are probably the closest to start for your own need).
Good luck and probably a good idea to join the dc mailing list, you might want to discuss the idea and get help if you get stuck somewhere
Related
I'm attempting to create a visualization of a .CSV file with 1.2 million lines, similar to the following:
source , destination
12.251.512 , 12.623.743
51.734.312 , 23.233.991
6334.6231.123 , 42.532.54453
(using 40-100k lines for testing purposes)
After much research, I've decided to try out Gephi and probably sigma.JS to implement the visual data into a website. (exporting .GEXF graphs from gephi into sigma.JS to use with web)
Since 1.2 million lines is very hard to visualize, my thought was to create an input box where a user can enter a single address or a range of numbers. Then take those numbers and create a mini-visualization based on that range.
So here is my problem, I have searched sigma.js for an example similar to what I need, with a box to enter ranges or individual values to create miniature graphs based on the larger dataset. But it seems like this may not be possible.
Ideally, I'd like to have a box that can search a range, and display the whole data-set graph if need be.
Is this possible using Gephi and sigmajs? If not, does anyone have any recommendations for tackling this type of project?
I highly recommend D3 library. I'd look at it https://d3js.org/
The biggest part of the job is to group your data in a way that makes sense and make sure that you feed it in JSON format. 1.2 million rows is not much of data as long as your growing makes sense. Also, I highly recommend adding filters in order for your audience to be able to slice and dice the data the way they want.
I have phasor information (polar vector data pairs, each with magnitude and angle, representing voltage and current measurements) that I would like to display using Javascript. They should look something like the image linked below (my rep isn't high enough to directly post it) which I stole from Jesse's question about MatPlotLib. I would also like to easily change which phasors are displayed by a simple mechanic like clicking on the legend entry.
See a phasor diagram example here.
While I have inspected several code sets, I have yet to find a chart package that is built to handle polar vectors like this. Is my Google-fu lacking or do I need to create everything from scratch?
I feel like this is a cheap workaround, but here's what I ended up doing:
I used the polar chart from jqWidgets and with the series type set to "column" and the flip property switched to "true." I put the data in an array with 0 entries for each possible angle except for where I wanted the phasor displayed. Each phasor gets a dedicated series so the legend lists them all. It's not perfect and the array is much larger than it really should need to be, but it's passable.
While it's not surprising that no power system display package is publicly available for Javascript, I'm sure one has to be out there for educational sites if nothing else.
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.
I need to be able to visualize a special sort of diagram. In the past I always used Highcharts or Google charts for my data visualizations, but this time I cannot find any suitable chart in the mentioned libraries.
Actually the desired result should look like this:
So what I have is a cartesian coordinate system (with date axis), which contains several rectangles. Iam really looking forward to any recommendations on this.
If you want to stick with Highcharts, your best is probably going to be the renderer:
http://api.highcharts.com/highcharts#Renderer
You could also work this out using area series, but that could get a little messy after a while...
{{edit:
example using the area method:
http://jsfiddle.net/jlbriggs/8Xwuq/
I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.