I have a chart where the x Axis represents calendarweeks. Because of the change of the year my chart is now not right sorted. So the calendarweek 1 from 2015 is now before the calendarweeks from 2014.
I know that I have to change something in my data. I thought of adding the year before the calendarweek like 151, 152, 1450, 1451, 1452 and so on.
I tried this and it works. But it is not really readable then for the customer. So I thought I could just parse the calendarweek number to 1, 2, 50, 51 and 52 again and send it to the xAxis variable.
var xAxis = d3.svg.axis()
.scale(x)
.tickValues(sliceKeys)
.orient("bottom");
But then it happens that the ticks won't match with the bars and don't appear. But the bars are right sorted now. Does anybody has an idea how this could be done?
As per Lars's recommendation in the comments above, you can use .tickFormat() to transform the value with the year into a value without the year.
Here's a modified fiddle. I disabled your slicing of the keys (but did it in a lazy way by just commenting out the slicing part without removing the entire loop, even though it's no longer necessary).
Then, the only thing that was needed is the .tickFormat() bit that strips the year out of the full value:
var xAxis = d3.svg.axis()
.scale(x)
.tickValues(sliceKeys)
.tickFormat(function(yearAndWeek) {
return String(yearAndWeek).slice(2);
})
.orient("bottom");
Related
I've been creating some charts to plot intra-day data from financial results. Often this is a value generated every ten minutes. This varies but its a good example. Therefore there are large periods of time I won't get information, eg when markets are close over weekend and between 5:00pm in the evening and 9:00pm in the morning. I've tried created a custom time scale for the x-axis but in the end the best result is to just use an ordinal scale. it works well and gives the result that I and the people reading the chart want ie, no gaps in the line plot and evenly space data points. (Its the convention)
My question is how do I know plot custom ticks on this xAxis in the correct place, given that I generate them in an array called ticks.major. The example below shows how I generate the axis and there are the correct number of days. But they all are being plotted at the beginning of the graph. Any help appreciated thanks.
var xScale = d3.scale.ordinal()
//var xScale = scaleWeekday()...custom timescale no longer used
.domain(xDomain)
.rangeBands([0,(plotWidth-yLabelOffset)])
var xAxis = d3.svg.axis()
.scale(xScale)
//.tickValues(ticks.major)//used to create tick d3 time scale axis
.tickFormat(function (d,i) {
return ticks.major[i]
})
.tickSize(yOffset/2)
.orient("bottom");
var xLabel=plot.append("g")
.attr("class",media+"xAxis")
.attr("transform",function(){
if(yAlign=="right") {
return "translate("+(margin.left)+","+(plotHeight+margin.top)+")"
}
else {return "translate("+(margin.left+yLabelOffset)+","+(plotHeight+margin.top)+")"}
})
.call(xAxis);
it looks like this:
I think the mistake I'm making is that by using the tick.major array its applying the tick value to the first 12 dates that are passed bacause thats all thats in the tick.major array. Then because there are no more dates in the tick.majore array it has no labels for any further date in the series. Its better to apply a test in the tickFormetter to see if the current day at a particular datapoint is different from the day at the previous datapoint. Then return a tick. like this
.tickFormat(function (d,i) {
if(i>0) {
var day=d.getDay()
var yesterday=data[i-1].date.getDay()
console.log(day,yesterday)
if(day!=yesterday) {
return d
}
}
})
The returned d needs a bit of date formatting to make it readable
I have a d3 graph plotted which denotes some data over the last 30 days. So my x axis is a linear scale because I am not using dates(instead using number of days). Now to show the x axis , I use code some thing like
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.outerTickSize(15)
.ticks(4)
This gives me four ticks like the following:
Now my problem is that instead of these ticks(numbers), I want to show tick labels from the following array :
var xArray = ['one month ago', '3 weeks ago', '2 weeks ago', '1 week ago', 'today'];
Any idea how to do this ? (I guess I cannot use ordinal scale because the graph being plotted uses linear scale, I cant mess with that)
This should have occured to me earlier that I could use a different(ordinal) scale just for the axis purpose. Anyway might help someone with a same doubt
var xScaleForAxis = d3.scale.ordinal()
.domain(xArray)
.rangePoints([0, WIDTH]);
Now I can use this scale something like following to get the desired result.
var xAxis = d3.svg.axis()
.scale(xScaleForAxis)
.orient("bottom")
.innerTickSize(-HEIGHT)
.ticks(4)
This gives me the following desired result.
I'm using D3.js to generate a graph with response times over time. Previously I was using Google Charts but it was too heavy. D3 is nice and lightweight, but there's something I can't manage to do that I could do with Google Charts.
The problem is that those graphs sometimes span over one week, sometimes over one day, sometimes over one hour. For each case I have to manually modify how the ticks in the X axis appear. I'm doing it by comparing the first and the last values for the X axis, and checking how much time there's between them, like this:
if (dateDif < 25) { // daily
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format('%H:%M'))
.ticks(d3.time.hours, 3)
.orient("bottom");
}
else if (dateDif <= 170) { // ~ weekly
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format('%d/%m %H:%M'))
.ticks(d3.time.hours, 24)
.orient("bottom");
} else { // more than weekly
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format('%d/%m %H:%M'))
.ticks(d3.time.hours, 96)
.orient("bottom");
}
But that it's not good, at all, specially when there are just a few values in the chart (they're generated every minute), then no ticks appear (because it falls in the first case, and there are no enough values to span 3 hours).
Do you know of any plugin or method that automagically adapts the X axis for this kind of situations?
d3.svg.axis() is fairly good at handling this type of behavior by default - try removing .tickFormat(...) from your axis, and setting .ticks(n) where n is the desired number of ticks you want on the axis at any scale zoom level - this might be sufficient for what you desire.
Here are a couple of related examples:
http://bl.ocks.org/mbostock/2983699
http://bl.ocks.org/mbostock/1166403
You could define a function to get the tickFormat based on the dateDif, so you wouldn't need to have such a large if-else block.
function getFormat() {
if (dateDif < 25) {
return d3.time.format('%H:%M');
} else {
return d3.time.format('%d/%m %H:%M');
}
}
Then you can set .ticks() to a number. In the output, roughly that many ticks will be shown. d3 chooses a number of ticks that is close to your requested value, but also makes a few decisions to try to give optimal output.
// approximately 10 ticks will be displayed
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(getFormat())
.ticks(10)
.orient("bottom");
If you use this method, you lose a little control over the exact number of ticks that will be shown, but you are guaranteed to have ticks displayed, and if you choose a sensible number for your ticks value, the output will probably be satisfactory.
Here's a fiddle using this technique with some contrived data.
Say I have a graph where the x-axis tick labels are very long strings, and so I want to alternate the tick padding (the vertical distance between the text and the x-axis) so that the tick labels don't overlap.
I know this can be achieved post-rendering by selecting the tick elements and applying a transform attribute. But I'd like to do:
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom")
.tickSize(0)
.tickPadding(function(i) {
// some logic here to determine the alternating-height strategy by index, e.g.
return i % 2 ? 20 : 30;
});
This doesn't work in d3 as-is -- the documentation (https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickPadding) says that tickPadding just takes the number of pixels. Is there a better way to do this? Monkey patch d3's axis.tickPadding function to take a function or a number, then apply the function when drawing the ticks?
For the source-code patch, see:
https://github.com/adonomay/d3/commit/bfdb36fa17806666775c6804b86eb10bea3b3393
An alternate fix is to wrap the text manually after rendering:
https://github.com/mbostock/d3/issues/1641
http://bl.ocks.org/mbostock/7555321
I also was hoping to do this. I was using week numbers and it got a little cramped. Basically the x axis looked like
111213141516171819
and I was hoping to stack them. I ended up doing this
$('.tick text').each(function(i){
var yval = this.getAttribute("y");
if( i % 2 == 0 )this.setAttribute("y",parseInt(yval)+10);
});
Once the graph was drawn. I made sure to include some extra margin (10) on the bottom as well. The result was
12 14 16 18
11 13 15 17 19
The only choice you have is to modify the source. D3 assumes throughout the axis implementation that tickPadding is a number, not a function -- see the source.
I'm trying to create a bar chart with custom values for each bar along the xAxis in D3, and thought I'd try to use the tickValues. Just to try it out I gave it some dummy data but it doesn't work like this:
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickValues(['hi','b','c','d','e']);
Here's the xScale:
gon.votes.length is an array of total votes counts for EACH answer and functionally is there only to return how many bars there will be for a specific survey question(this is a survey app fyi)
var xScale = d3.scale.linear()
.domain([0,gon.votes.length])
.range([0,w]);
Finally, when I call
function(d){ return d.title}
This will extract the appropriate title for each bar.
Also here is the html of the ticks of the xAxis that gets rendered:
NaN
Any tips on how to put this along the xAxis? Is trying to modify the ticks the wrong approach?
Ah, I see you were using a linear scale. In this case you need an ordinal scale, since the domain is a set of discrete values (the list of titles).
Working example:
http://tributary.io/inlet/5775047
There are comments in the code for the axis part.
The issue is that the range array needs to have as many values as there are labels in the domain array. Otherwise it recycles. In your case, the first label was on 0, then w, then 0, then w, and so on.
To get the titles dynamically from the array of data, you need to use the map method on the array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Working example with dynamic titles:
http://tributary.io/inlet/5775215