I am trying to draw a chart using d3-js. I want X axis values to be [0.25yrs; 0.50yrs; 1yr; 2yrs; 5 yrs; 10yrs; 15yrs; 20yrs; 30 yrs; 50 yrs]. This can be done using d3's tickValues() & tickFormat() functions. But I need to maintain certain distance between 0.25, 0.50 & 1 year ticks, because most values belong to these years & more distance between them will reduce overlapping of drawn circles.
The tick position I need is something like :
You can see the distance between .01 and .02 in above image. How can we do that?
You will need to implement a custom scale that maps your input range to this non-uniform output range. Then you can give this scale to your axis and it will draw the ticks accordingly.
You could have a look at the scales that D3 provides if anything is close enough to what you want (a log scale maybe?), but if you can't find anything you have no choice but to implement your own.
Related
I'm using d3.js v4.
Is there a more convenient way to find the minimum and maximum values of a brush selection. This is meant to resize the y axis when I select a period in my brush area below.
Here is my method (everything is inside my function called when the brush is used) :
I find the extent limits of my selection
extent = d3.event.selection.map(chartComponent.x2().invert))
Then I have to redo an array containing all my selected points: I go on each point and compare it to the extent[0] or extent[1] to see if it is in the limits. I store the beginning and end point indices and then I use data.slice(begin, end) on my original data to get a new array.
Then apply d3.min and d3.max on the new array to find the min and the max level.
Then set the y axis to use theses limits.
chart.y().domain([chartComponent.ymin, chartComponent.ymax]);
chart.yaxisGraph.call(chartComponent.yAxis(true));
Do someone have a better idea ?
By default scale of x axis is calculated from values. This gives uneven distance between two adjasted points. Like for example if I have an array of values like [1,2,5], there will be different distance on x axis for point, and also x axis labels will contain some other values, like 1,2,3,4,5. In case on dates displayed on x axis there may be cases when two equal dates are printed, looks ugly.
Take a look at this plunker. If you maximize your browser window, you could see that x axis labels have duplicates (like 02/09/2015 is visible 2 times on my screen). Also the distance between point is different.
How can I:
Make so that no duplicate x axis labes are present?
Distance between points is equaly distributed based in graph's width (not scaled based on values)?
You can explicitly set tickValues() and specify what ticks you want to show.
Alternatively, ticks() is more flexible, but gives you less control.
(Search for "D3 duplicate dates". This one may be helpful for example).
The reason the dates are repeating is that they are in fact different (equally spaced) timestamps that occur on the same day, since the spacing is < 24 hours. If you want to label with distinct dates, you could select a specific time on each day for the tick to fall on.
In d3, if you want to create an axis you might do something like this:
var xAxis = d3.svg.axis()
.scale(x)
where x is a scale function. I understand that the domain of x defines the start and ending values for the ticks. I'm having trouble understanding how the range of x changes the resulting axis. What does the domain map to in the context of an axis.
Think about what one must do to create a visual representation of any data set. You must convert each data point (e.g. 1 million dollars) into a point on the screen. If your data has a minimum value of $0 and maximum value of $1000000, you have a domain of 0 to 1000000. Now to represent your data on a computer screen you must convert each data point (e.g. $25) into a number of pixels. You could try a simple 1 to 1 linear conversion ($25 converts to 25 pixels on the screen), in which case your range would be the same as your domain = 0 to 1000000. But this would require a bloody big screen. More likely we have an idea of how large we want the graphic to appear on the screen, so we set our range accordingly (e.g. 0 to 600).
The d3 scale function converts each data point in your dataset into a corresponding value within your range. That enables it to be presented on the screen. The previous example is a simple conversion so the d3.scale() function is not doing much for you, but spend some time converting data points into a visual representation and you will quickly discover some situations where the scale function is doing a lot of work for you.
In the particular case of an axis, the scale function is doing exactly the same thing. It is doing the conversion (to pixels) for each 'tick' and placing them on the screen.
I am trying to create a line chart in using graphael. Both my x and y data have both positive and negative values. The way I am able to plot it now, the x and y axis end up intersecting and the least values in the arrays. For example, they could intersect at (-12,-12).
I want to create the plot such that the axis intersect at (0,0) to make a quadrant plot. Is it possible to do this using graphael?
After searching all over the web, I figured out out there is no option of achieving this in the library itself. I ended up drawing two extra lines for the X and Y axes to create a four quadrant graph.
am trying to use WebGL to plot a 3D surface. My problem is that it is not letting me provide the x and the y values. It plots the z axis values against the values of x ranging from 0 to n and the values of y ranging from 0 to m (all integral values).
How can I make a surface where I can also provide the x and the y values for the 3D surface construction. Also if its not possible to do it in WebGL then what solution can I use?
PS Also, WebGL tooltip function doesnt function. any comments on that?
I'm guessing that you are saying that you can't specify the scale of x and y relative to the plotted (z) value?
What you need is to apply a non-uniform scale to the entire surface (the modelview matrix), so that the X and Y axes are stretched into the shape you want. Are you using three.js or a similar library, or... ? The answer will define the specific commands you should use.
As an example, let's say that you have a 100x50 plot, with the spacing forced by the library to 1.0 between x and y. Instead, you want the size to be 300x200 in x and y. You would scale the matrix by (3,4,1).
If you want to change the displayed range of your Z data, I would suggest adjusting its zero point (i.e., translating it up or down to be centered) and then scaling appropriately as-needed.