I've got some homework tasks in topic surveys and diagrams. The first task is to normalize the input of a survey, because the structure of the data is changing from time-to-time.
So there are three types of surveys:
static fields, where text is stored
dynamic ones, where the user can select one option
and multiselect fields, where the user can select multiple options
So I'm not really a statistics guy, so I have really no idea what I can do with that incomming data.
So the data I have is stored in an huge XML file from there I can easily get how man times a survey was filled, and how many times a field was filled, so I can (for eg on a pie chart show the relation of filled or not filled).
The second idea is to show the relation between the content of a multi option element using a bar chart or so.
In case of the multi option elements I've got the idea to show data in implication of one option.
But the question is, what could be shown?
The other problem are the static elements (text fields and so). What data could be represented from a single field?
The data in the XML field is collected from 2001 to 2005 So maybe I can work with the dates of the surveys, but as I said, I don't really know how to process the data, to collect as much as possible, to create a really great amount of diagrams.
After normalizing your data (which could be more difficult than the visualizing part of your job), you might do the followings:
To show your static fields, which contains texts, you could recode theese text to new variables containing fewer categories, which could fit on a graph/plot. Another way is to make word clouds of the texts - like on wordle.net.
The dynamic fields, each containing only one answere, could be the easiest to display. You could make a pie chart to show the percentages of the attributes, or rather a bar chart which could also display percentages/densities or frequencies (e.g. see the ggplot2 package in R).
To display the multiselect fields, you should restructure the date to the appropriate format (I do not know how it looks like now). This could be done by different tables, that show the counts (frequencies) for every categories in all variables. E.g.: 187 people ate choclate, 160 ate bread and 50 people ate pizza yesterday. You could then show the values by a barchart easily. Look out for: the sum of theese vaules will not equal to the sample size, as anyone could select multiple values, so a pie chart would be a really bad choice.
I hope I could help.
I would not recommend pie charts. Use bar charts or dot plots instead. It is much easier to distinguish similar frequencies for different categories in them. Ordering the categories by frequencies in them is almost always a good idea, too. Here you can find a short article about why Pie Charts Are Bad.
3D diagrams might look nice and are a neat way of impressing people with little knowledge about data visialization (which might be what you need ;-) ). But they are considered bad practice by most experts, because using extra dimensions, which are not absolutely needed, distracts the reader from the actual data.
Personally I think that crosstables and scatter plots are pretty self-explanatory ways of displaying relationships between two dimensions of data.
It is often a good idea to report some basic statistics along with diagrams, but make sure you only do this when it's appropriate. See this Wikipedia article if you want to learn, which univariate statistics (like a mean for example) are appropriate for which data.
If you seriously want to learn about data visualization, I can highly recommend the books by Edward Tufte about the topic. They are really a pleasure to read. While they stand on a solid scientific base, they are easy to understand, even with little or no background in the field.
Good luck,
Alex
Related
Summary
I wonder if anyone else has had this requirement and could steer me in the right direction. I am currently working on getting a chart library implemented for a crosstab BI that allows multiple groupings on the X axis.
Example
The functionality I'm trying to achieve works¹ in Spotfire as shown here (dev data, not live!):
With the colours representing the columns from the crosstab:
¹ - the rendering of the labels is a bit funky, but the grouping works
Requirement
I am looking to replicate this in (at minimum) JavaScript, preferably with a premade React library if possible. I'm currently looking at d3 and in particular Nivo, as this has a nice aesthetic that has appealed to the team, but this appears to be limited to grouping only on 2 levels (for the example above, I could group by Country, but I am then unable to group by gender as a sub-group).
What I've tried
My solution so far is to merge the remaining layers, so for example in the France group we'd have Male - Not Tested, Male - Mutant, Male - Wild Type, etc. The problem this presents is that I need to allow up to 6 levels of grouping - the example shows 3 levels. (6 levels is rare, but I need to allow it as a requirement)
Plan
My next steps if I can't find a library to do it, is to branch off Nivo and try to modify it to implement it myself, but of course as we all know, this conflicts with the time we have to implement this. I would really appreciate hearing from someone that has had to deal with this before, and what solutions you came up with.
I think you need to checkout AmCharts, it offers one of the best charts libraries with a very rich API that allows you to perform several combination
here's an example for nested Value Axis but you can also generate similar thing for XAxis
https://www.amcharts.com/demos/multiple-value-axes/
I am searching for a way to build a multi-edge graph with Javascript.
The edges have to be different in color and thickness. Data for building it comes from a json file.
I already looked into d3.js, But the forced layout isn't what I am looking for, so please don't link my question to solutions with forced layout!
The treelayout offers no multiple edges or does it?
Any other way to get 5 edges between every node wich show a different grade of flow?
Sorry for my bad English.
I have two similar javascripting challenges I am looking to solve in Cognos with the help of conditional formatting.
I would like to be able to show a data item, for only the item that I am comparing other items to in Cognos. For example, If my chart shows a comparison of Florida to the rest of the US States -- Florida is what I am doing am doing the comparison to within my charts.
So I would like to show the data label for Florida only. Conditional formatting in Cognos will let you either turn all item labels on, or off. I am looking to find a way to turn them all on with conditional formatting, but hide all the values, except the Florida value which is the focus of my report with javascript.
Here is an example of my chart and how it looks with all the data labels showing:
http://i.imgur.com/aM4gEYu.jpg
I only need to show the number for Florida. The rest of the numbers make the chart look way too cluttered.
Also - My second challenge is when my mouse hovers over the other labels - I would like to show the values for them (but only on hover). So basically the label will default to showing the Florida label only, but if the user hovers over the United States, or the World values - then the user will be able to see that item.
Yeah conditional rendering unfortunately is not available everywhere, so it's not a viable solution.
Writing JS against a chart is tough, but I suppose not impossible. First, I'd highly recommend the FireBug plugin for Firefox. It will allow you to more easily see the generated HTML for a graph in Cognos. I just looked at a sample bar chart. Unfortunately, none of the elements have individual IDs. You will have to pull the "area" elements by attribute. The hover text for the bars and the label text are both in the TITLE attribute.
I have to put the obligatory "no JS" statement in here as I guarantee such a solution will break between versions of Cognos and potentially browsers.
An alternative may be to hide the standard chart labels and put Singletons below the chart to control the shown information.
If you still need help - can you take a screenshot of this chart? If not - can you elaborate on what type of chart it is and what other data values exist (other than FL, US, World). I think I may not be visualizing this properly.
I have this Excel file with over 30 calculation, but i am having doubts about how to create that on the web.
In excel it is very easy, but on the web it must all be made in javascript, and it is not as easy as reference inputs as in excel where you can just say (C4 + C5 / E9 * 1000).
All the calculations has to be calculated in realtime, so that they can se the final price at the end, without submitting it first.
Since some of the inputs depend on others values, how I see it, the formular must be recalculated a lot of times.
Has anybody done something like this before, and did they do it? Right now I can not seem to find any good javascript libraries which can ease the process.
This is a neat grid plugin for jQuery which supports creating "Excel like" Grids on Webpages.
http://www.trirand.com/blog/
https://github.com/tonytomov/jqGrid
http://trirand.com/blog/jqgrid/jqgrid.html
Give each input an "id" attribute (will make the use of getElemetntById possible). Google for "javascript oninput event".
You want to take an Excel spreadsheet and translate that into javascript code that receives the input variables (the ones you have to fill in Excel) and outputs all of them?
The way to do this is describe each Excel cell as a node in a graph. If cell Y needs cell X to perform a computation, then you must have an edge from node X to node Y.
You must then find a topological ordering for the graph (that is, an order of the cells/nodes such that when you try to compute any cell D you have already computed all the cells it depends on). The algorithm to do this is simple and linear in the size of the graph: http://en.wikipedia.org/wiki/Topological_sorting
You can just write javascript code in sequence according to the topological order, and you'll be able to find all the results with having to visit any operation more than once.
There are several js libraries (AngularJS is one I enjoy) which offer real-time databinding. If you set up a few input text boxes (NumberA, NumberB), and have some read-only text areas databound to the formulas you need (NumberA + NumberB/10), you might be able to accomplish this without too much stress.
Of course, this assumes you need only one "row" of information- a recreation of Excel is going to be a mite trickier.
As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/