How to set a nvd3 axis to use strings instead of numerical values ?
Asked Answered
W

3

4

Instead of numerical values on the x-axis, i want to set my attribute names. I am no Javascript hero. I am using the scatter Chart.

I believe it should be something like :

chart.xAxis.tickFormat(d3.format(String));

and then i can set:

chart.xAxis
  .axisLabel('Attributes').staggerLabels(true).tickValues(["A", "B", "C"]);;

and then set the values:

data[i].values.push({
 x : "A" ,
       y : 29.765957771107,
    size: Math.random(), 
    shape: shapes[j % 6]
     } , ..

How to see my attributes "A", "B", etc on the x-axis ? I browsed the nvd3 source code also but not finding the right API call.

Whichsoever answered 6/9, 2013 at 1:40 Comment(0)
L
3

You can pass in a format function that returns label. This is an API of d3js.

var x_format = function(num) {
    if (num === 2.3)
        return "A";
    else if (num === 5.6)
        return "B";
    else if (num === 45.2)
        return "C";
};

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(x_format);

Check out this example that I make for scatterplot.

http://vida.io/documents/jSGz9TQEmzwMqQzhs

{(A, 2.3), (B, 5.6), (C, 45.2) }

Update: my answer with fixed value.

Update: hybrid combination between line, bar, scatterplot:

http://vida.io/documents/fN5FjsYaHaJSXEjz7

Lianneliao answered 6/9, 2013 at 5:2 Comment(4)
Thanks @phuoc-do - but that's not what i meant; the data i have is comprised of one numerical dimension only ( the y values) ; i.e.: {(A, 2.3), (B, 5.6), (C, 45.2) } . So i want to show the ticks with my labels (A,B.C) on the x-axis, and be able to display the graph with the values associated with these labels.Whichsoever
You would want to get a chart between line, bar, scatter plot. How about this one. vida.io/documents/fN5FjsYaHaJSXEjz7Lianneliao
thanks - how can i use this axis on a nvd3 chart (like scatter plot), though ? Seems like the Vida code uses plain d3 libraries only -Whichsoever
I'm not familiar with nvd3 but I assume it has similar API. Yes, vida uses d3 only. The graph you want isn't really scatter plot.Lianneliao
A
1

I have the same problem. My simple solution consists in avoiding the code declaring the x axis. In the nvd3 web also there is this solution: see http://nvd3.org/livecode/index.html#codemirrorNav for an example.

Agatha answered 25/2, 2014 at 22:41 Comment(0)
H
1

Rotating a bar chart into a column chart largely involves swapping x with y. However, a number of smaller incidental changes are also required. This is the cost of working directly with SVG rather than using a high-level visualization grammar like ggplot2 On the other hand, SVG offers greater customizability; and SVG is a web standard, so we can use the browser’s developer tools like the element inspector, and use SVG for things beyond visualization.

When renaming the x scale to the y scale, the range becomes [height, 0] rather than [0, width]. This is because the origin of SVG’s coordinate system is in the top-left corner. We want the zero-value to be positioned at the bottom of the chart, rather than the top. Likewise this means that we need to position the bar rects by setting the "y" and "height" attributes, whereas before we only needed to set "width". (The default value of the "x" attribute is zero, and the old bars were left-aligned.)

var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.range([0, 1, 2, 3, 4, 5]);

It would be tedious to enumerate the positions of each bar by hand, so instead we can convert a continuous range into a discrete set of values using rangeBands or rangePoints. The rangeBands method computes range values so as to divide the chart area into evenly-spaced, evenly-sized bands, as in a bar chart. The similar rangePoints method computes evenly-spaced range values as in a scatterplot.

For example:

 var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.rangeBands([0, width]);

For more information Click http://bost.ocks.org/mike/bar/3/

Hammel answered 3/12, 2014 at 5:25 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.