I am trying to add grid lines to my existing code, and have seen many tutorials but none with zoomable and dragable grid lines.
A stripped version of my existing code is here :
http://jsfiddle.net/p4cmx1kj/
I understand that I must have a scale :
this.x = d3.scale.linear()
.domain([this.options.xmin, this.options.xmax])
.range([0, this.size.width]);
And draw it later. But I don't know how.
I would like to have vertical grid lines that "change" as I zoom (eg : go from 10-20-30-40 to 10-15-20-25) and move as I drag my graph around.
How can I do that ?
I guess you could do something like this example :
http://blog.scottlogic.com/2014/09/26/an-interactive-stock-comparison-chart-with-d3.html
And then add some limit, where if above a certain threshold it adds more / less tick labels on the axis. (At-least that is what I plan to attempt to do on a force layout now).
Or better still make your labels a function of the range, eg something along the lines of min + n*(min-max)/4 , where n is your tick label {1,4}.
Related
If one examines this block:
https://bl.ocks.org/mbostock/8d2112a115ad95f4a6848001389182fb
The gridlines are in increments of 20. However the radius of each gridline does not appear to be equal as it scales up:
I'm guessing there is some geometric justification for this, but that's not what I'm after for my chart. I only want aesthetics, I need the gridline circles to be equidistant from each other.
Question
Using Bostock's radial scale script as seen in the above block, is there any way to adjust the scaling of the radii? I want the scaling to be equidistant.
The only thing you need is to change this...
var y = d3.scaleRadial()
... for this:
var y = d3.scaleLinear()
Here is the bl.ocks with that change only: https://bl.ocks.org/GerardoFurtado/0a0b22d15c4e715e4c748335e37330fb/1670bbcdfdcbed6b6a0ae2a56d5f153570d969d1
PS: There is indeed a geometrical explanation for this: a circle with radius 2r has an area four times bigger than a circle with a radius r. That's why we always (at least in truthful charts) scale the circle's radius to the square root of the encoded datum. Well, you mentioned that "I only want aesthetics". As a data visualisation specialist/enthusiast who happens to be a D3 programmer, not the other way around, I suggest you reconsider your approach and keep the radial scale. Charts that prioritise aesthetics over information are normally bad charts, and charts that impose aesthetics ignoring information are simply untruthful charts.
Im working on this project where I have a big amount of data. It's segmented by categories Soybean, MA20, MA50, MA100, BBW_2 and date.
What I've done so far was to use a code where you can filter and zoom in the data. The result is
Selecting Soybean:
Selecting MA50:
Selecting BBW_2 !HERE IS THE PROBLEM! :
The problem is when BBW_2 is selected. You can see an orange line touching the X axis. This is BBW_2. It has it's Y' axis max value of 2, which is infinitely smaller than 1200, so the scale doesn't work as expected. This doesn't occur with the other categories because they have similar Y' axis values.
What Do I Want to Achieve?
I want to plot all the categories that the user selects appending the selected categories`generated linechart to the same X axis but with different Y scales. One example of what it would look like is this one: .
What I've tried:
Change the Y scale by changing it when the user selects BBW_2.
Plot in different SVG`s. This doesnt work great because it loses the zooming effect.
The code:
https://jsfiddle.net/ldepaula/3q1k9hyj/1/
I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.
I tested it by running the line:
d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')
in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?
EDIT:
I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).
Going by your comments:
You don't want to see the " the first vertical line in the grid for an nvd3 chart"
Which is the y axis:
Two ways to achieve that:
Option1
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(false) //hide the y-axis
.showXAxis(true); //Show the x-axis
Option2:
Since in your example you are going for a CSS option
d3.selectAll('.nv-y').attr('display','none')
I will prefer Option1
EDIT post your clarification, you wish to make the y axis line light you can use:
d3.selectAll('.nv-y path').attr('opacity','0.1')
or if you want to hide it completely
d3.selectAll('.nv-y path').attr('display','none')
One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.
Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.
I am using highchairs 3.0 to create a graph that has N Boxes on it. So far so good. However, one of the user desires is to draw a few plotLines (based on values on the Yaxis) for each Box on the graph. The catch is that the information is different for each of the boxes, so they want the plotLine to just extend from the start of the box on the left side (x-axis basis) to the right of the single box.
Highchairs by default draws the y-axis plotLines (and plotBands, looked at those too) all the way from left to right, causing a very chaotic chart indeed!
Is there a way to limit the length (start / end on the x-axis I guess) of a plotLine in a box plot to just the width of the box?? I guess I basically want to overlay lines onto the area of each Box on the graph.
Thanks!
The best way that I have found to do this is by extending the marker symbol types to create a horizontal line.
Use this as the marker symbol type for a scatter series to accomplish what you're looking for.
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};
Example:
http://jsfiddle.net/jlbriggs/m85yv3aq/
Required inputs of: radius, lineWidth, color
((also a useful way to build bullet charts:
http://jsfiddle.net/jlbriggs/UGs2E/
))
I have 2 line chart shown side by side which has 5 lines being plotted on each chart. So there are 5 legend for each of them. Unchecking each legend would hide the respective line specific to legend and optimize(May be zooming or scale) the chart with new scale measurement.
This is default functionality of legend. What i am looking for is ONLY just show/hide respective line. No other functionality like zoom/scale so that user does get distracted by zooming as s/he is comparing 2 charts side by side. I hunted documentation but did not find these feature on/off information.
Force X
List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). The numbers tell the d3.js the values to use in the scale, rather than d3.js determining the values.
Force Y
List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). The numbers tell the d3.js the values to use in the scale, rather than d3.js determining the values.
Datatype: Array of Numbers (i.e. [0, 50]
Reference: http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html