on my chart, on the xaxis and yaxis I have a wrong format:
So, I would like that "00" will be "0", "08" will be "8", ""016" will be "16" and so on.
How can I do that?
I find error.
I set min:'0' (as a string) instead of min : 0
Related
Let's consider data to be binded to some object:
sample = ["x": "1", "y": "1"]
as simple as possible, now i do
d3.select("#someContainer")
.selectAll("rect")
.data(sample)
.enter()
.attr(
"value_taking_y": (d) -> d.y
"value_taking_x": "someValue#{(d) -> d.x}"
)
Problem i'm getting is that "value_taking_y" got right value, it is d.y, but "value_taking_x" is evaluated to something like "someValuefunction(d){return d.x}" which is obviously not intended by me.
On the other hand if i force evaluation of this function in the first place by adding word "do" then i got error similiar to "d is not known value", which seems to be good behavior in this situation.
I'd appreciate some help on this. Thanks in advance
I'm using the code below to display the day of the week and the month value for my data. D3 displays the date as expected e.g. "Sat 18" but for Sunday it shows the month instead e.g. "Oct 19"!
Can't figure out why this is happening. The code is:
var xScale = d3.time.scale()
.domain([new Date($scope.dataset[0][0].time),d3.time.day.offset(new Date($scope.dataset[0][$scope.dataset[0].length-2].time),2)])
.rangeRound([0, w-0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(d3.time.days,1);
Any ideas why this is happening? the sample dataset looks like this:
{time: "2014-10-19",y: 0,y0: 0}
By default, D3 will apply some adaptive formatting to the date tick values (see "This set of time intervals is somewhat arbitrary and additional values may be added in the future" section), but you can override this with a specific date format, for example:
.ticks(d3.time.days,1)
.tickFormat(d3.time.format('%a %e'));
You can find the remainder of the formatting options here.
First I'm a d3.js noob :)
How you can see from the title I've got a problem with duplicated data and aggregate the values is no option, because the name represent different bus stops. In this example maybe the stops are on the fron side and the back side of a building.
And of course I like to show the names on the x-axis.
If i created an example and the result is a bloody mess, see jsFiddel.
x = index
name = bus stop name
n = value
I've got a json e.g.:
[{
"x": 0,
"name": "Corniche St / Abu Dhabi Police GHQ",
"n": 113
},
{
"x": 1,
"name": "Corniche St / Nation Towers",
"n": 116
},
{
"x": 2,
"name": "Zayed 1st St / Al Khalidiya Public Garden",
"n": 146
},
...
{
"x": 49,
"name": "Hamdan St / Tariq Bin Zeyad Mosque",
"n": 55
}]
The problem: It is possible that the name could appear more then once e.g.
{
"x": 1,
"name": "Corniche St / Nation Towers",
"n": 116
}
and
{
"x": 4,
"name": "Corniche St / Nation Towers",
"n": 105
}
I like to know is there a way to tell d3.js not to "delete" duplicated names and instead just show all names in sequence with their values.
Any ideas or suggestions are very welcome :) If you need more information let me know.
Thanks in advanced
Mario
Lars is right: the d3.ordinal scale is doing exactly what it should: treating duplicate values as repeat instances. See here for more details: https://github.com/mbostock/d3/wiki/Ordinal-Scales
You can use a regular linear scale instead, like this: http://jsfiddle.net/vy8vjy4r/2/
The changes are to make the scale linear and set the domain to be the length of your dataset.
var x = d3.scale.linear().domain([0,j_data.length]).range([0, width]),
When you pass a value to the scale, you simply pass the position in the list. I'm using the index - the i in function(d,i) - but you could have used the x in your dataset. (I didn't use it as it looks like you don't need it.)
.x(function (d,i) { return x(i); })
Hopefully this works for you.
Additional information on axis
Strictly speaking, I guess this should have been an additional question, but to get the text on the axis, you can simply add these two lines of code in where you modify the text in xAxisGroup, after .selectAll("text"):
.data(j_data.filter(function(d,i) { return !(i%5); }))
.text(function(d){ return d.name; })
The axis is displaying numbers every fifth item, so we choose every fifth item from the dataset. This gives us data that matches the existing labels, and we change the text to the .name value, see http://jsfiddle.net/vy8vjy4r/4/
This approach isn't particularly strong: it depends on D3 displaying every fifth stop, and for short or very long routes (or whatever these are) it might display all stops, or every tenth, etc. I would rather not use the D3 axis and build your own. For something like this, it shouldn't be too hard, although fitting all the names in might be hard in this space.
Try this: http://jsfiddle.net/vy8vjy4r/5/
Try this filter,
var names = [];
var result = [];
var indx=-1;
for(var i=0; i< j_data.length; i++){
indx = names.indexOf(j_data[i].name);
if(indx==-1){
names.push(j_data[i].name);
result.push(j_data[i]);
}
}
j_data= result;
Do this after your j_data array, it'll remove the duplicated objects from your j_data array. And see this http://jsfiddle.net/vy8vjy4r/1/
If it is not, what you are looking for, ask what change you need.
I am working on the example of scatter plot from NVD3: http://nvd3.org/examples/scatter.html
As you can see in this example, in Legend, word "Group" gets mentioned repetitively for every series. Is it possible to write the word "Group" before the legend starts and then each of the series just show numbers "1", "2", "3" and so on?
Thanks !!
You can use chart.legend.key() (source code):
chart.legend.key(function(d){return "Group "+d.key})
If the key attribute is 0 instead of Group 0, you will have what you want.
I've been playing with the newly released version 2.0.0 and I'm trying to replicate the composite axis example with some simple opinion poll data - 3 series (Yes,No,Unsure) against a single Y-axis.
I'm clearly making a basic error somewhere... the basic principle is you define one y-axis then pass that as a reference each time you want to layer on another set of data, but it doesn't appear to be treating them as three distinct series (there are no lines between points except in cases linking a couple of identical, but non-adjacent values, e.g. "No" 30% in 2002 and 2004, despite there being a different value in between).
Also, as per the commented-out line, I'm getting a D3 error if I try and switch the x-axis to Time instead.
JSFiddle live example
pollData = [
{ Year : 2001, Yes: 50, No: 40, Unsure: 10 },
{ Year : 2002, Yes: 60, No: 30, Unsure: 10 },
{ Year : 2003, Yes: 65, No: 25, Unsure: 5 },
{ Year : 2004, Yes: 75, No: 30, Unsure: 4 },
{ Year : 2005, Yes: 80, No: 10, Unsure: 5 }
];
var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, pollData);
myChart.setBounds(75, 30, 490, 330)
// Why won't a time axis working...? ("undefined is not a function" in D3)
// var dateAxis = myChart.addTimeAxis("x", "Year", "%Y");
var dateAxis = myChart.addCategoryAxis("x", "Year");
dateAxis.addOrderRule("Year");
var yesAxis = myChart.addMeasureAxis("y", "Yes");
var noAxis = myChart.addMeasureAxis(yesAxis, "No");
var unsureAxis = myChart.addMeasureAxis(yesAxis, "Unsure");
myChart.addSeries("Yes", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure", dimple.plot.line, [dateAxis, unsureAxis]);
yesAxis.title = '%';
myChart.draw();
The issue here isn't the composite axes, which you are using correctly. It's the series definition. The first parameter of the addSeries either takes dimensions to disaggregate by or a field which is not in the data, which it uses as a label. The only limitation of this approach is that you cannot label your series by a dimension name in the data. In this case the first series for example (it applies to all), is disaggregated by "Yes" which for the line series means it tries to draw a line for each value of "Yes", meaning 1 line per row, hence all the single unconnected points. The fix is to just name your lines something different. For example:
myChart.addSeries("Y", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("N", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("U", dimple.plot.line, [dateAxis, unsureAxis]);
Here's your updated fiddle: http://jsfiddle.net/RawyW/2/
If you want the names to look like they match you can just add a trailing space to the series names:
myChart.addSeries("Yes ", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No ", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure ", dimple.plot.line, [dateAxis, unsureAxis]);
This will also work