Emily
Hello all, I am using the mobile app and applying it here:
3milychu.github.io/women
1. I am wondering why the y-axis scale is not scaled in proportional increments. This is more evident when you click on one of the orange labels for each of the regions.
2. I also would like to change the x-axis from the current date format to a linear integer scale (range from -16 to + 16)
3. Along with question #2, if I would want to show the negative y-axis values, how can I change the indexBounds to calculate and display the correct range per data field?
Any help would be greatly appreciated! Thank you.
vizuly
Hello Emily,
Yes, you can completely override the x-axis of the line chart by providing your own.
The way you can do this is to put an event listener on the charts ‘measure’ event and then reset the xScale (or even xAxis.) This gives you a chance to update these properties before the chart is rendered. With this technique you can completely change how the scale behaves, and accommodate positive/negative/ordinal/and linear values.
So something like this (psuedo code)
myMobileLineChart.on(‘measure’,myMeasureFunction);
function myMeasureFunction() {
var myScale = d3.scale.linear();
// Set appropriate range and domain per your custom values
myScale.range([0, chartWidth]).domain([0,1]);
var xAxis = myMobileLineChart.xAxis();
xAxis.scale(myScale);
myMobileLineChart.xAxis(xAxis);
}
Alternatively you could alter the source code of the lineareamobile.js file itself (in the ‘measure’ function) to hard code different types of scales and axis values.
I hope this helps point you in the right direction.
Cheers,
Tom
