nvd3 scatter plot with ordinal scale - javascript

Im relatively new to d3 and nvd3 and wanted to create a simple scatterplot, just like the example but with an ordinal y-axis. So y axis values are categorical strings. This is what I thought I needed to do:
var xfun = function (d) { return d.Pos } //simple ints
, yfun = function (d) { return d.Title } //the ordinal values
var chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.color(d3.scale.category10().range())
.margin({ top: 30, right: 20, bottom: 50, left: 130 })
.tooltips(false)
.x(xfun)
.y(yfun);
// create an ordinal scale with some test values
var ys = d3.scale.ordinal()
.domain(["this","is","an","ordinal","scale"])
.range(5);
// tell nvd3 to use it
chart.yAxis.scale(ys);
// add to the page
nv.addGraph(function () {
d3.select(selector).datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
However, no luck:
Error: Invalid value for <circle> attribute cy="NaN" d3.js:690
Error: Invalid value for <line> attribute y1="NaN" d3.js:690
Error: Invalid value for <line> attribute y2="NaN" d3.js:690
Error: Invalid value for <circle> attribute cy="NaN" d3.js:7532
Uncaught TypeError: Cannot read property '0' of undefined
..
And the y-axis simply shows a linear axis from -1 to 1. Iterestingly there are some circles plotted at y=-1 and y=1 (the extremes).
To manually force correct values for cy I tried adding after call(chart):
d3.selectAll("#mychart circle").attr("cy", function(d){
return = ys(yfun(d));
});
But still the same error. How do I get the ordinal scale to work properly? Note I also need it to update correctly when I use the nvd3 legend to switch between dataseries (which will contain different x/y data).
There is a related question on github, but no solution.
Update: after some debugging I tried replacing chart.yAxis.scale(ys) with chart.scatter.y(ys) and this gets rid of the errors. I can also drop the manual selectAll.
However, the y-axis still shows a linear scale from 0.99-1.01 and all points are plotted at y=1. So a step closer but no ordinal scale yet.

In case somebody else stumbles upon this, here's what worked for me: instead of trying to force an ordinal scale on the axis (X, in my case), I used a linear scale, but provided a custom tickFormat function that returned the desired label.
chart.xAxis.tickFormat(function(d){
return labelValues[d];
});
Where labelValues maps between the numerical value and the desired label.

There is an easy solution by #robinfhu.
Don't use an ordinal scale!
Instead, set your x function to return the index of the element:
chart.x(function(d,i){ return i;})
And set your tickFormat function to read the proper label:
tickFormat(function(d) {return that.data[0].values[d].x;})
Working example: Plunker
Copy and paste:
nv.models.lineChart()
.x(function(d, i) {
return i;
}).xAxis
.tickFormat(function(d) {
return that.data[0].values[d].x;
});

I haven't used nvd3.js, but from my d3 experience, the error seems to be the range on your scale. For an ordinal scale, you need to define an array of corresponding values for the domain to map to. For example, I could set the following scale:
var myScale = d3.scale.ordinal()
.domain(['this','is','an','ordinal','scale'])
.range([1,2,3,4,5])
This scale would map my domain to numbers in the range 1:5, with 'this' -> 1, 'is' -> 2, etc. If I didn't want to set each point individually, I could also define my range with rangePoints, as follows:
var myScale = d3.scale.ordinal()
.domain(['this','is','an','ordinal','scale'])
.rangePoints([1,5])
rangePoints gives me an evenly spaced range of points from the minimum specified value to the max specified value, so this would result in the same range being generated.
I've made some circles that illustrate how to do this here.
When you change to a different data series, you'll have to update your domain. Since range corresponds to where on the page your points are mapping to, you won't need to update it, unless nvd3.js applies a secondary mapping and does ordinalDomain -> integers -> pointLocation in two steps.
Another option is to apply the scale in the function definition.
yfun = function (d) { return ys(d.Title) }

Related

Remove every other column label on a D3 bar chart

I'm trying to recreate the following in D3
And I've got the following so far: http://codepen.io/jpezninjo/pen/dNwmVK
I looked it up and the best I could find was this answer: Show every other tick label on d3 time axis?, but I'm not using a class to create each column label. I think the following two lines are the ones that control my labels, but I'm not sure how to go about this.
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
x.domain(data.map(function(d) { return d.key; }));
I'm also trying to figure out how I can put some padding on the left and right of the bars
At least two possible ways:
Make your X axis a time axis, and use d3.timeDay.every(2) to specify every 2nd day. That approach is shown here: http://codepen.io/anon/pen/YNdaRB.
Key part: var axisBottom = d3.axisBottom(x).ticks(d3.timeDay).tickArguments([d3.timeDay.every(2)]);.
To make this work, I also had to (a) make d.key equal to the result from parseDate instead of the formatted date string, (b) hard-code a width for the bars instead of using x.bandwidth(), and (c) translate the x axis by width/2 px to center it under the bars (line 94). Might be nicer ways to do (b) and (c) but I mainly wanted to show d3.timeDay.every(2)'s ability (docs).
Use your current approach but apply a style to every 2nd tick. d3 adds some classes automatically so selecting the ticks is easy. This is what they described in the post you linked to. http://codepen.io/anon/pen/qRLogy?editors=1010
Key part: d3.selectAll(".tick text").style("display", function (d, i) { return i % 2 ? "none" : "initial" })

D3 bar chart from objects with arrays

Good afternoon.
I am using this D3 bar chart example with my data (that is in the same format whereof in the
jsfiddle example).
The chart works well but i have some problems that i do not know i solve.
The xAxis have the number of index of the key parameter and not the key parameters values;
When I sort the data after pressing the "sort" button;
The numbers over the bars after the sort disappear or appear the the left side insted of over the correspondent bars
var dataset = {key: [0, 30], value:[60, 30]};
http://jsfiddle.net/3HL4a/75/
Here is the link where you can see the code and perform the changes.
Thanks
To reference the key values, you have to use those instead of the index:
var xScale = d3.scale.ordinal()
.domain(dataset.key)
.rangeRoundBands([0, w], 0.05);
// ...
.attr("x", function(d, i) {
return xScale(dataset.key[i]);
})
You can make this nicer by merging the key and value arrays such that both are part of the same data element.
As for the other problem, this is because you're selecting text elements, which include the axis labels. Even with the key function this doesn't work here, as one of the axis labels is the same as the label you want to display on the bar. Assigning a special class to these labels and selecting accordingly fixes this.
See here for the complete jsfiddle.

dc.js bar chart with ordinal x axis scale doesn't render correctly

I've recently discovered dc.js and have been trying to implement a simple bar chart using the bar chart example provided on d3.js's website: http://bl.ocks.org/mbostock/3885304.
However, as part of dc.js implementation, a crossfilter dimension and group is required.
So using a simple TSV file with "letters" and "frequencies", I've changed the code a bit to look as follows:
d3.tsv('testdata.tsv', function(error, data) {
var cf = crossfilter(data);
var dimension = cf.dimension(function(d){
return d.letter;
}
var group = dimension.group().reduce(
function(p,v){
p.frequency += v.frequency
},
function(p,v){
p.frequency -= v.frequency
},
function(){
return { frequency: 0 };
});
I'm a little confused about what I should be setting the valueAccessor to (on my bar chart), because when I set the valueAccessor to return "frequency", and I set my xAxis scale to ordinal with a domain of all "letters" in the data set, I get a rendered bar graph with almost all x-axis values ("A - Y") at the ZERO point and one x-axis value (i.e. "Z") at the end of the x-axis line.
I've tried setting the ranges, but it doesn't seem to do the trick. Any ideas on what I'm misunderstanding would be greatly appreciated!
Turns out I had to set the .xUnits property to dc.units.ordinal() in order to get the x-axis spaced out correctly!

Use d3 log scale instead of linear scale

I'm trying to do a chart based on http://mbostock.github.com/d3/talk/20111116/bar-hierarchy.html, the only difference being that I'd like to use a log scale for the x-axis.
Here's my fiddle: http://jsfiddle.net/JhDVC/5/
As you can see, the x-axis is defined at line 4:
x = d3.scale.linear().range([0, w]),
If I change it for
x = d3.scale.log().range([0, w]),
Then it doesn't work (nothing is rendered), throwing these error messages:
Error: Invalid value for <rect> attribute width="NaN"
Changing the domain setting from
x.domain([0, root.value]).nice();
to
x.domain([1, root.value]).nice();
shows me the z axis (names) but still no bars or values.
There are a few other places where the domain for the scale is set. You need to update those as well.
Working jsfiddle here.
And here's some code so that it allows me to post this:
x.domain([1, root.value]).nice();
Your range includes zero - log(0) is undefined.

Find max value in CSV column using d3.max

After using data().enter().append() in D3.js, individual columns/values in a dataset can be retrieved by simply using d.valuename. But I want to find the maximum value in a CSV column for a linear scale. Since the scale is not preceeded by any data calls, I'm really uncertain on how to specify the right column from which to find the maximum value.
This is my failed attempt. What do I substitute d.column1 with?
d3.csv("file.csv", function (data) {
var x = d3.scale.linear()
.domain([0, d3.max(d.column1)])
.range([0, 960]);
EDIT:
Ok, I got a bit further by looking at a similar example. I don't understand why my code is not working now.
d3.csv("file.csv", function (data) {
data.forEach(function(d) {
d.column1 = +d.column1;
});
var max = d3.max(data, function(d) { return d.column1; });
var x = d3.scale.linear()
.domain([0, max])
.range([0, 960]);
EDIT #2:
In case the problem derives from the data itself, here's a snippet. I have tried removing all quotes, and also keeping the quotes for everything but the top row, but nothing works.
"product", "price"
"bread",20
"meat",100
"meat, sausage",200
EDIT #3:
Ok, I promise, last edit. But just to be absolutely clear; I'm using the x-scale to determine the width of the bars in a bar chart: .attr("width", x) and the scale returns NaN.
To explain why your code is working:
data.forEach(function(d) {
d.column1 = +d.column1;
});
This above statement turns all your column1 values into an integer (the + sign in front of d.column1 coerces the type to a Number).
Once your values are all numbers, d3 can now compare them as numbers instead of strings. This way 10 will be larger than 9. If they were strings, "9" would be larger than "10".
var max = d3.max(data, function(d) { return d.column1; });
The above line simply takes the max of your data array. Since your data array is made up of objects, d3 has no way of knowing how to compare one object to another. The second parameter is a function that gives d3 a value to each object so that d3 can compare each object. In your case you are telling d3 to use column1 to determine the max value. This is similar to a comparator function.
I just realized what the problem was. No wonder we couldn't figure this one out together. All the code above is fine. It's just that when I called the x-scale to determine the width of my bars, I didn't specify which column in the data would be input to the scale. I had
.attr("width", x)
But now I changed that row to:
.attr("width", function(d) { return x(d.column1); })
Thanks for your help and patience.

Categories