I have data in this format:
[{"EndDate":"2012","Value":26473660},
{"EndDate":"2013","Value":54296732},
{"EndDate":"2014","Value":64063400},
{"EndDate":"2015","Value":81812464},
{"EndDate":"2016","Value":86899274}]
And I have managed to successfully render a bar chart. However, The Y-Axis Values are showing just "000" up and down the scale.
Here is the relevant code parts for the y axis.
var y = d3.scale.linear()
.range([height, 0]);
....
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
....
y.domain([0, d3.max(dataset, function(d) { return d.Value; })]);
....
svg.append("g") //Y AXIS ENTER
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value in £");
I've looked into d3.ticks/d3.tickFormat functions on bostocks website but not following what is actually going on. Essentially, I'd like to display a short hand way for displaying Millions: 0M, 10M, 20M, 30M.. for a simple solution.
Apologies if a duplicate. It probably is but can't seem to find the solution that applies to my style of dataset :/
Thanks in Advance.
Add .tickFormat('.0s') to your yAxis definition.
See:
Format Y axis values, original figures in millions, only want to show first three digits
D3: Formatting tick value. To show B (Billion) instead of G (Giga)
I am doing a dot plot in D3 and I want to add the values along a right Y axis. I have done this before in many charts, adding labels is straightforward, but for some reason this particular chart is giving a lot of problems.
I cant get the values of the dots to show on the right axis.
jsfiddle:
The chart appears on click.
The relevant code for the value labels attached to the right axis:
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width + 10) + " ,0)")
.call(yAxis1)
.selectAll('text')
.text(function(d){ return xScale(d.value); });
With an ordinal axis you are binding your domain values to the axis ticks. So, the scale domain should be:
var yScale1 = d3.scale.ordinal()
.domain(data.map(function(d) { return d.value; })) //<-- use '.value'
.rangeRoundPoints([0, height]);
Then your y-axis call just becomes:
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width + 10) + " ,0)")
.call(yAxis1);
Updated fiddle.
I have a straightforward axis setup:
var timelines = g2.selectAll(".timelines").data(data);
var xScale = d3.scale.ordinal()
.domain(dataset)
.range([0,axisSpacing.width]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(1)
.tickFormat(axisTicks)
.outerTickSize(0)
.tickSize(0);
timelines.enter().append("g")
.attr("class", "axis")
.attr('transform',function(d,i) { return "translate(" + axisSpacing.left + "," + (axisSpacing.top + (i * spacing)) + ")"})
.call(xAxis)
.selectAll("text")
.attr("dy","20px")
.attr('class',"axis-text")
I'd like to apply multiple styles to the tick texts. One style for the first tick; another style, for ticks thereafter. How can I achieve this?
I decided upon this solution:
d3.selectAll(".axis-text").style("text-anchor",function(d,i){ return i%2 ? "end" : "start"})
If you have two ticks on an axis, this places both tick labels on the inside of the axis length. See below:
I work with D3JS and I want an axis in x with this kind of values : 125, 250, 500, 1000 ... So multiply by 2 my values each time.
So I tried a Quantize Scales like this:
var qScale = d3.scale.quantize(2)
.domain([0, 8000])
.range([0, 500]);
And I create my axis like that :
var xAxis = d3.svg.axis()
.scale(qScale);
But when I'm calling the axis with that code :
svg.append("g")
.attr("transform", "translate(" + padding + "," + (ChartHeight - padding) + ")")
.attr("class", "axis")
.call(xAxis);
I have the following error :
Object doesn't support property or method 'rangeBand' (I develop on Visual Studio 2012)
Any idea ?
EDIT: here the full code code
How do I add text labels to axes in d3?
For instance, I have a simple line graph with an x and y axis.
On my x-axis, I have ticks from 1 to 10. I want the word "days" to appear underneath it so people know the x axis is counting days.
Similarly, on the y-axis, I have the numbers 1-10 as ticks, and I want the words "sandwiches eaten" to appear sideways.
Is there a simple way to do this?
Axis labels aren't built-in to D3's axis component, but you can add labels yourself simply by adding an SVG text element. A good example of this is my recreation of Gapminder’s animated bubble chart, The Wealth & Health of Nations. The x-axis label looks like this:
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.text("income per capita, inflation-adjusted (dollars)");
And the y-axis label like this:
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("life expectancy (years)");
You can also use a stylesheet to style these labels as you like, either together (.label) or individually (.x.label, .y.label).
In the new D3js version (version 3 onwards), when you create a chart axis via d3.svg.axis() function you have access to two methods called tickValues and tickFormat which are built-in inside the function so that you can specifies which values you need the ticks for and in what format you want the text to appear:
var formatAxis = d3.format(" 0");
var axis = d3.svg.axis()
.scale(xScale)
.tickFormat(formatAxis)
.ticks(3)
.tickValues([100, 200, 300]) //specify an array here for values
.orient("bottom");
If you want the y-axis label in the middle of the y-axis like I did:
Rotate text 90 degrees with text-anchor middle
Translate the text by its midpoint
x position: to prevent overlap of y-axis tick labels (-50)
y position: to match the midpoint of the y-axis (chartHeight / 2)
Code sample:
var axisLabelX = -50;
var axisLabelY = chartHeight / 2;
chartArea
.append('g')
.attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')')
.append('text')
.attr('text-anchor', 'middle')
.attr('transform', 'rotate(-90)')
.text('Y Axis Label')
;
This prevents rotating the whole coordinate system as mentioned by lubar above.
If you work in d3.v4, as suggested, you can use this instance offering everything you need.
You might just want to replace the X-axis data by your "days" but remember to parse string values correctly and not apply concatenate.
parseTime might as well do the trick for days scaling with a date format ?
d3.json("data.json", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.year = parseTime(d.year);
d.value = +d.value;
});
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([d3.min(data, function(d) { return d.value; }) / 1.005, d3.max(data, function(d) { return d.value; }) * 1.005]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d / 1000) + "k"; }))
.append("text")
.attr("class", "axis-title")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.attr("fill", "#5D6971")
.text("Population)");
fiddle with global css / js
D3 provides a pretty low-level set of components that you can use to assemble charts. You are given the building blocks, an axis component, data join, selection and SVG. It's your job to put them together to form a chart!
If you want a conventional chart, i.e. a pair of axes, axis labels, a chart title and a plot area, why not have a look at d3fc? it is an open source set of more high-level D3 components. It includes a cartesian chart component that might be what you need:
var chart = fc.chartSvgCartesian(
d3.scaleLinear(),
d3.scaleLinear()
)
.xLabel('Value')
.yLabel('Sine / Cosine')
.chartLabel('Sine and Cosine')
.yDomain(yExtent(data))
.xDomain(xExtent(data))
.plotArea(multi);
// render
d3.select('#sine')
.datum(data)
.call(chart);
You can see a more complete example here: https://d3fc.io/examples/simple/index.html
chart.xAxis.axisLabel('Label here');
or
xAxis: {
axisLabel: 'Label here'
},