We Keep Coding

Formatting text from axis ticks in plotly using tickformat

Is possible to add format to the xaxis and yaxis ticks using tickformat?
The idea is cut long names of axis as:
axiswithaverylongname --> axisw...
In the plotly api reference there's and example to format dates
https://plot.ly/javascript/reference/#layout-xaxis-tickformat
and also they refer to the d3 documentation
https://github.com/d3/d3-format/blob/master/README.md
from the plotly reference:
tickformat (string)
default: ""
Sets the tick label formatting rule using d3 formatting mini-languages
which are very similar to those in Python. For numbers, see:
https://github.com/d3/d3-format/blob/master/README.md#locale_format
And for dates see: https://github.com/d3/d3-time-
format/blob/master/README.md#locale_format We add one item to d3's
date formatter: "%{n}f" for fractional seconds with n digits. For
example, "2016-10-13 09:15:23.456" with tickformat "%H~%M~%S.%2f"
would display "09~15~23.46"

As far as I know there is no way of doing it directly via tickformat but a few lines of JavaScript code will fix it for you.
Plotly.d3.selectAll(".xtick text").each(function(d, i) {
Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5));
});
Using d3's seleectAll wet get all text labels on the x-axis and update the text with the first 5 letters of the initial label.
You can either do it automatically or when the button is pressed in the example below.
var trace1 = {
x: ["A", "B1", "axiswithaverylongname", "Wow, wait a second, that's way tooooo long"],
y: [1, 2, 3, 4],
type: "bar"
};
var myPlot = document.getElementById('myPlot')
Plotly.newPlot('myPlot', [trace1]);
document.getElementById("cleanButton").addEventListener("click", function(){
Plotly.d3.selectAll(".xtick text").each(function(d, i) {
if (Plotly.d3.select(this).html().length > 8) {
Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5) + '...');
}
});
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot" style="width:100%;height:100%"></div>
<button id="cleanButton">Clean x-axis</button>

how to create a time scale in d3

I'm new on d3,and I'm trying to create a time scale on the x-axis starting from this csv file
Anno,Italia
2003,46.9
2004,46.3
2005,54.0
2006,56.7
2007,56.9
2008,58.1
2009,59.0
2010,61.3
2011,62.6
2012,64.5
2013,67.2
but when I apply the d3.time.scale(),I get on the x-axis values such as .003,.004.What can I do to obtain 2003,2004 etc. on the axis?Here's my code :
var xScale = d3.time.scale().range([0,width]);
d3.csv("resources/diffusionesitiweb10anni.csv",function(data){
dataset = data;
xScale.domain(d3.extent(data,function(d){
return d["Anno"];
}));
Thanks in advance ! :)

Use only one type of unit on an axis in D3

I have an axis where I have values:
500000
600000
1000000
2000000
D3 by default formats first two as '500k', '600k', and last two as '1.0M', '2.0M'.
I need to use only one type of unit, like getting the max value and use it as a reference for all other ticks, like get 2000000, format it like '2.0M', then the rest will be '1.0M', '0.6M', '0.5M'.
How can I achieve this?

You would need to define the desired prefix (e.g., M for millions) formatter:
var formatInteger = d3.format(".f"),
formatMillions = function (d) {
return formatInteger(d / 1e6) + "M";
};
And pass it to .tickFormat
var xAxis = d3.svg.axis()
.scale(axisScale)
.tickFormat(formatMillions);
Complete example is here.
Also, you can find more about tickFormat and formatting.

NVD3 Cumulative line chart displays wrong y values

I have converted a line chart into a cumulative line chart and its y values are not displayed correctly. The range of the y axis should be 80.00 - 140.00 but instead I get -0.08 - 0.20. Has anyone managed to tweak their normalization code below to make it work with all kinds of ranges?
line.values = line.values.map(function(point, pointIndex) {
point.display = {
'y': (lines.y()(point, pointIndex) - v) / (1 + v)
};
return point;
})
Any help will be greatly appreciated.

I know that this question is somewhat old, but I am convinced that the normalization code for the cumulative line chart is not conceptually correct. Furthermore, the NVD3 cumulative line chart implementation is actually an index chart implementation (see Mike Bostock's example). A cumulative line chart would be more like this, I think. The cumulative chart can be easily achieved using the NVD3 line chart and some quick modifications to the underlying data.
If we take Bostock to be correct, and we really do wish to achieve an indexed line chart, then the indexify function in NVD3 should be changed to:
/* Normalize the data according to an index point. */
function indexify(idx, data) {
if (!indexifyYGetter) indexifyYGetter = lines.y();
return data.map(function(line, i) {
if (!line.values) {
return line;
}
var indexValue = line.values[idx];
if (indexValue == null) {
return line;
}
var v = indexifyYGetter(indexValue, idx);
// TODO: implement check below, and disable series if series
// causes a divide by 0 issue
if ((Math.abs(v) < 1e-6) && !noErrorCheck) {
// P.S. You may have to set a higher threshold (~1e-6?).
// I don't know I didn't run any tests...
line.tempDisabled = true;
return line;
}
line.tempDisabled = false;
line.values = line.values.map(function(point, pointIndex) {
point.display = {
'y': (indexifyYGetter(point, pointIndex) - v) / v
};
return point;
});
return line;
})
}
I asked a related question to the authors of NVD3 and plan to submit a pull request. Note that percentage change charts are really only meaningful when all of the underlying data is positive. When you start throwing negative values into the mix, percentage change loses all of its meaning.

What I found works is to insert another point with a y value of 0 at the beginning of the sequence of points.
Given a list of data points in the form [ [x1,y1], [x2,y2], ... [xn,yn]] ],
something like values.upshift([0,0]) works for me (the x value is arbitrary, but i just use 0 or values[0][0]) to insert to the front of the list.
(I'm getting the same thing with that chart. I'm still looking into it, but I hope this helped.)

dc.js dimension group ordering

I am trying to render a dc.js barChart where my y-axis is percentage 0-100% and my x-axis are numbers, however I want to order the x-axis by date.
My data looks like this:
date,trend,percent
01/01/2014 13:00,238,53.6
01/01/2014 13:15,239,64.2
01/01/2014 13:30,219,43.1
01/01/2014 13:45,219.2,43.1
01/01/2014 14:00,237.4,50.6
...
I am adding the data to crossfilter
data.forEach(function (d) { d.date = parseDate(d.date); });
var ndx = crossfilter(data);
var trendDimension = ndx.dimension(function (d) { return d.trend; });
var trendGroup = trendDimension.group().reduce(
function (p, v) {
p.time = v.date.getTime();
p.trend = +v.trend;
p.percent = +v.percent;
return p;
},
...
).order(function (p) { return p.time; }); // ??? order by time rather than trend
When I graph the dimension and group, my x-axis is sorted by trend as my x domain looks like:
var minTrend = trendDimension.bottom(1)[0].trend;
var maxTrend = trendDimension.top(1)[0].trend;
...
chart.x(d3.scale.linear().domain([minTrend, maxTrend]);
...
chart.render();
Everything plots, however the bars a sorted in order of trend and I would like them sorted in order of date/time.
Is this possible?
EDIT
I also tried:
chart.ordering(function (d) { return d.value.time; });
but that does not seem to have an effect on the ordering...

Do you want to graph percent versus trend or percent versus time?
Right now your dimension is on trend, so it will not be possible to order it by date. Crossfilter will create a bin for each trend value (which may have many dates), and the way you have written your reduce function, it will simply replace the date entry for the bin, with the last date it sees.
If you want to order by date and then use trend to affect some other aesthetic (color for example), you should use a date dimension, group by some quantization of the date, not do anything with the date in your reduce, and use date scale/xUnits.