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.
Related
I'm trying to find a way to dynamically scale a chart's y-axis so the values are shown in single digits, with a exponential denotation at the top, effectively changing this:
To this:
Note, this works automatically in e.g. Matlab/Matplotlib/etc., but I'm struggling to find a solution with the web plotting frameworks (maybe my search language is wrong)... I know D3.js is not a charting library, but I'd be open to a solution that works with the frontend DC.js or the backend D3.js
Edit based on #Gordon's answer below, I get the following graph using this
chart.yAxis().tickFormat(d3.format('.1e'));
Is it somehow possible to move all of the e+6 to the top? Or do I need to write a custom scaling function and insert a separate text box myself?
In dc.js, the axes are straight from d3-axis.
Access them using chart.xAxis() and chart.yAxis(), and to reduce confusion, do this in a separate statement from the rest of your chart initialization.
You can use axis.tickFormat to control how the tick text is formatted.
You can use d3.format to do automatic formatting. It seems like exponent or SI notation might suit what you're doing, although it's not exactly the same as having the exponent in a separate text element like in your screenshot.
Putting it together, this is pretty close
chart.yAxis().tickFormat(d3.format('.1e'))
The tick formatting question comes up a lot. I wonder where we could put this information so that people don't have to ask.
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
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 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/
Can anyone recommend an API that will support multiple groupings in the data? What I mean by that is along the X axis I need to have a group, which contains a number of groups, which each contain a further number of groups which then contain 3 data items.
I have spent hours looking but at the moment I cant seem to find anything that can show this sort of data.
To try and further explain what it is I need to show in case it isnt very clear imagine I wanted to show County, for each County I want to show a number of schools and for each school two tests (Math, English) and then for each test at each school the male and female average test score.
So far I have only been able to find api's that support standard column charts with a single X axis label.
Thanks
My recommendation: keep it simple. The exact chart you're looking for probably doesn't exist because it's so specific. Pick something that comes close.
You can always do the grouping visually, by colour. I've found Google Charts API to be quite usable. If you use the dynamic JavaScript variant you can make charts with as many data points as you like, of any dimension.