I am using this (http://bl.ocks.org/mbostock/4061502) implementation of boxplot in d3.js.
Could someone please help me with implementing a checkbox that would allow me to dynamically turn the graphing of outliers on/off. As a result I would like to see the outliers removed and the y axis adapt itself to show a clearer view of the boxplots. Ideally you can implement this within the box.js file from the given implementation by adding a drawOutliers parameter.
In the sample below you can see my problem (it sometimes get's so bad you can't even see the boxplots).
My problems are implementing it in JS using d3 and selecting a good way of filtering them out from the data (simply not plotting them or filtering the data, #1 seems better).
Please do not get into discussions as to why it is bad to hide/ignore outliers, etc. I am not ignoring/deleting them, I just need a clearer view of the rest of the graph.
Thank you!
Related
I want to create an animated d3 Treemap, like in this example: http://bl.ocks.org/Rnhatch/1820583
The Problem is, that this code uses a JSON file but I will have a CSV file.
The main idea is to change/ animate the Treemap with some filters (for example age filter)
Do you know some example code, where they also animate the content of the Treemap with buttons and use a CSV file?
Here is another example: (but it is not working) http://bl.ocks.org/jarobertson/1446865
I looked for hours but I coundnt find something.
My coding skills are to bad to change such a code. I hope someone can help me out
You will need to adjust the data access component to use D3's csv parser. (Line 71 of the Gist). Here are the docs for that: https://github.com/d3/d3-dsv/blob/v1.1.1/README.md#dsv_parse
This Gist is really old and I'm sure Mike Bostok has provided much better ways of getting your requirements achieved in the 8 years since I created it.
I am working with Chart.js (http://www.chartjs.org/docs) and I am dealing with some problems here.
Is it possible to show values for each data point? It seems it is lacking that functionality or am I wrong?
I am also using the stacked bar chart (with additional line chart applied on it) so I would like to show the value for each data point for these two bar data sets (excluding the Line chart)
The app is made with Ionic 2 (Angular2) and it seems, that I don't have all of the possibilites to call different helpers provided by Chart class. I see that a lot of examples include such things.
Is it safe to use this in production, regarding the support of the project?
Thank you very much in advance!
I'm about to develop a UI for medical research application. I need to make a time series line graph. Main issue is the amount of data:
5,000 points per graph, with a few of them displayed simultaneity. I’m expecting 50,000 points processed all together.
The question is what presentation library?
The main features I’m looking for are: Handles huge data sets, Zoom, annotations, live update.
I’m already looking into http://dygraphs.com/ and http://meteorcharts.com/
I wouldn't want any library that renders the data as DOM elements, or that uses SVG (from performance perspective)
Well, I think I'll give everyone my own answer to my question:
Dygraphs (http://dygraphs.com/) seems to be on the spot. The documentation, although a lot of apparent efforts, leaves a lot to be desired. But from performance, features and flexibility, it's the best I've seen. At least for my current project needs.
Way to go, Dygraphs!
Have you checked out D3? I'm using that for a lot of graph visualization. It looks like this example renders to svg.
My stuff renders to a SVG for force graph visualizations too, but it looks like D3 might be able to use either a canvas or SVG, but I'm not positive about what all can be rendered to which. Honestly, I'd give D3 a try even with SVG, it might be fast enough. I remember reading something about someone simulating thousands of particles using D3's force graph visualizations without issues. It's SUPER easy to get your data into the right format for it to use.
Good luck!
I am developing a very similar application.
I am currently using Flot for the chart rendering. It handles annotations and zoom, take a look at their plugin library.
I recommend this downsampling plugin which will speed up graph rendering. Rendering 5000 points on your graph is useless: you have less vertical pixels on your screen than that! so this library will only render those that actually have a visual importance.
This only gives you the graph. You may want some kind of dashboard to present all that... I am currently looking at Grafana, which is used for a totally different purpose but makes awesome dashboards. It may be possible to "rip out" their dashboarding features (it uses Flot as well).
Another option is Hightcharts, but that's not free.
Check raphael js Library
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Here is my requirement:
I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.
Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.
What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.
Here are the ones I've looked at:
Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.
jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.
D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.
I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.
I ended up using Arbor with Raphael as my rendering library and it's worked out very well.
Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.
I'm looking for a Javascript API to draw this kind of graph :D3 graph
Except I don't need/want the "force" effect. Something static is ok, it can be an image generated or some JS rendering (I prefer this).
I've gone through a lot of google results without success, and every JS plugins i've found based on D3 is overkill.
The data will be from 10 to 100 nodes, and performance is not the key (though highly appreciated).
Thank you !
EDIT : a perfect solution would accept XML as data input, but I can accomodate with other formats. Also, I need something as "plug-and-play" as possible, I'm far from mastering JS/webdesign, which is the reason why I don't create my own rendering based on D3.js
You could simply delete this part of the example that you have found, and it will become static :
.call(force.drag);
Use This..
http://thejit.org/static/v20/Jit/Examples/ForceDirected/example1.html