I use jqplot to draw a graph. I have a huge difference between point values: point a is 2, point 2 is 5, point 3 is 500, point 4 is 10.
The jqplot scale system builds correct the graph, but because of such big difference the smaller values are represented as tiny lines, almost not visible on the graph (point a is not visible, point b is a tiny line).
In order to better see the values representation I'd like to build soemething like this (photoshop image, not jqplot render):
Example:
Is any way to do this? I don't even know how is called this option, but I know I saw in some graphs something like this. Do I have an option in jqplot to enable this?
Thank you.
You can define your y-axis as a logarithmic axis :
axes: {
yaxis:{
renderer: $.jqplot.LogAxisRenderer
}
}
after having included this file : <script type="text/javascript" src="../plugins/jqplot.logAxisRenderer.(min.)js"></script>
You can find an example here, and some documentation here
Related
I'd like to build a chart similar to:
Elevation over distance
This chart shows 3 things: elevation (y) distance (x) and colour represents the gradient change. How can I replicate this using D3.js?
You can check sample in the samples and pick something suitable for you depending on your requirement. But I'm suggesting something like this or this . First one does not give you color changing capability with it. You may need to read the documentation and find out. You can use the second one after reducing the width of bar to be very small. You may need to convert this to cater your data input method. I'm strongly suggesting you to go through the samples. As a help I'm posting few more samples you can customize.
Area Gradient fill
Applying a colour gradient to an area fill in d3.js
I am trying to plot a line chart using D3.js. The problem is that for some stock symbols the graph is correct and for some it gives a wrong chart.
I have attached two images. One showing a line chart that shows the wrong graph for a particular stock.The other one shows the correct graph for an another stock.
Look the d attribute of the path tag in the svg (in the images that I hace attached).The values of the d attribute are way off the charts for the wrong graph.The two graphs that I have shown are generated from the same program.
Wrong Chart
Correct Chart
Your scale is off. If you look at the axis on your wrong chart the numbers are in a tight range, apparently outside of the highs and lows. Check the code where you define the domain for the y scale.
I got a data set that where each sample has a size (0-1000) and a value (grade 1-5). I want to visualise the data with circles of different sizes along a line (domain axis), much like:
http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=1&
(note that circles even with the same effective taxrate do not overlap)
Example data:
sample 1: size 300 value 3.2
sample 2: size 45 value 3.8
sample 3: size 4400 value 4.0
sample 5: size 233 value 0.2
sample 6: size 4000 value 4.2
How can the data above be visualised using circles on a line (size decides diameter, value decides approximate position on the line) so that circles do not overlap?
I've been looking at D3's packing layout, but from what I can tell it doesn't support this out of the box. Anyone got any ideas on how to approach this?
Oooh, this one was a puzzle...
If you look at the code for the NYTimes graphic, it uses pre-computed coordinates in the data file, so that's not much use.
However, there's an unused variable declaration at the top of the script that hints that the original version used d3.geom.quadtree to lay out the circles. The quadtree isn't actually a layout method; it is used to create a search tree of adjacent nodes, so that when you need to find a node in a given area you don't have to search through the whole set. Example here.
The quadtree can therefore be used to identify which of your datapoints might be overlapping each other on the x-axis. Then you have to figure out how much you need to offset them in order to avoid that overlap. The variable radii complicate both functions...
I've got a test case implemented here:
http://fiddle.jshell.net/6cW9u/5/
The packing algorithm isn't perfect: I always add new circles to the outside of existing circles, without testing whether they could possibly fit closer in, so sometimes you get significant extra whitespace when it is just the far edges of circles bumping into each other. (Run it a few times to get an idea of the possibilities -- note that I've got x-variables distributed as random normal and r-variables distributed as random uniform.) I also got a stack overflow on the recursive methods during one iteration with N=100 -- the random distribution clearly wasn't distributed well enough for the quadtree optimization.
But it's got the basic functionality. Leave a comment here if you can't follow the logic of my code comments.
--ABR
Update
New fiddle here: http://fiddle.jshell.net/6cW9u/8/
After a lot of re-arranging, I got the packing algorithm to search for gaps between existing bubbles. I've got the sort order switched (so that biggest circles get added first) to show off how little circles can get added in the gaps -- although as I mention in the code comments, this reduces the efficiency of the quadtree search.
Also added various decoration and transition so you can clearly see how the circles are being positioned, and set the r-scale to be square root, so the area (not radius) is proportional to the value in the data (which is more realistic, and what the O.P. asked for).
D3's packing layout is not the answer here. It places circles in a spiral fashion around the existing group. Here's me reverse-engineering the algorithm behind packing layout:
I would suggest a force layout-based approach. That way, you can give your nodes force towards a gravitational center, and then let gravity do its thing.
Force layouts (e.g. Clustered Force Layout I) are usually animations, so you'll want to apply a static force layout.
I've wrapped up this approach in an example block, which looks like this:
I am trying to create a graph based on Mike Bostock's Heirarchical Edge Bundling(here is the gist). I need to make my JSON look as readme-flare-imports.json looks, but I can't figure out what "size" is. I read the API and it didn't seem to help me. Also, it will be a dynamic JSON file based on a mySQL database, so I won't be able to set the size myself. Is anybody able to clear things up for me as to what it is or how I may be able to determine what the size should be? Thank you in advance!
cluster.size determines how large of an area the cluster will take up. You pass values to it like so
// The angle
var x = 360;
// The radius
var y = window.height / 2;
cluster.size([x, y])
x will determine how much of a circle the cluster will use to branch out children. A value of 360 will use the entire circle to display all values. A value of 180 will only use half the circle to branch out values.
y will determine how wide the circle will become in any single direction, i.e., the radius of the circle.
In the Heirarchical Edge Bundling example, I believe the size attribute in the json file is ignored as I could not find anything in the code that cared about it.
Suppose one has a d3.js plot; At the moment I've been pulling apart the stream demo, but I'm sure this question is slightly more general.
I have some number of x points I'd like to highlight by drawing vertical lines through as labels, sort of like the tics here.
I'm not picky about data representation, so I can modify the data representation as needed. Just for concreteness sake, suppose I have the points and labels in a js array: [{point: 10, label: "L1"},{point: 39, label: "L2"}]
I'm leaning towards looping over and adding the lines, but it also feels like there must be a nicer way to do this, especially since the labels will be a mess if I do this manually.