I am trying to create a log-normal plot with an array of data, but when I apply a log scale to the y axis, it only scales the axis ticks and not the actual data being plotted. In summary, all the data is plotted linearly, but the axis scale is shown as log. Below is my axis code:
var y = d3.scale.log()
.domain([.001,maxData])
.range([graphHeight, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
.ticks(20, ".2")
.tickSize(-graphWidth,0,0);
svg.append("g")
.attr("class", "yaxis")
.attr("transform", "translate(" +graphWidth + ",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 70)
.attr("x", -graphHeight/2)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("YLabel");
var line = d3.svg.line()
.x(function(d,i) {
return (i-0.5)*horizontalBarDistance;
})
.y(function(d) {
return graphHeight - d*100;
})
for (names in dataArrays)
{
svg.append("svg:path").attr("class","line").attr("d", line(dataArrays[names]));
}
You have to use the scale in your code for it to make a difference. At the moment, your code contains no reference to it apart from when you're assigning it to the axis. You probably want something like
.y(function(d) {
return y(d);
})
in the definition of your line generator.
Related
I have a bar chart where values can range from 0 to 5. The values can only be integers (0, 1, 2, 3, 4, 5).
However, the y-axis renders with smaller steps, for example 0, 0.5, 1, 1.5, 2 etc. I want to set the axis values to integers only, but playing with domain and range hasn't helped me at all.
I don't see an option to set something like minimalInterval = 1. How do I do this? I'm sure there's an option somewhere. Current code for the axes:
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
x.domain(data.map(function(d) { return d.day; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end");
There is nothing like steps for a D3 generated axis.
However, in your case, the solution is simple: you can use tickValues with d3.range(6) and a formatter for integers or, even simpler, you can use ticks.
According to the API,
Sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator. The meaning of the arguments depends on the axis’ scale type: most commonly, the arguments are a suggested count for the number of ticks (or a time interval for time scales), and an optional format specifier to customize how the tick values are formatted.
So, in your case:
axis.ticks(5, "f");
Where 5 is the count and f is the specifier for fixed point notation.
Here is a demo (with an horizontal axis):
var svg = d3.select("svg");
var scale = d3.scaleLinear()
.domain([0, 5])
.range([20, 280]);
var axis = d3.axisBottom(scale)
.ticks(5, "f")
var gX = svg.append("g")
.attr("transform", "translate(0,50)")
.call(axis)
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
Just for completeness, the same code without ticks:
var svg = d3.select("svg");
var scale = d3.scaleLinear()
.domain([0, 5])
.range([20, 280]);
var axis = d3.axisBottom(scale);
var gX = svg.append("g")
.attr("transform", "translate(0,50)")
.call(axis)
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
I have an AJAX call which brings me back to data in JSON format.
[{"KEY":"IA","VALUE":"8"},{"KEY":"GE","VALUE":"1"}]
However, the labelling may change for this data depending on some user interaction (selecting from a drop down may invoke a search for some other data) leading to :
[{"NAME":"STEVE","AGE":"54"},{"NAME":"PETE","AGE":"22"}]
So I need some way to just get the first label and data and push it to the X axis like:
|
|
|
|
|_____________
Steve Pete
Name
and then stick the second label and data up the Y Axis.
so most of the code examples I have seen use some form of d3.name to identify the labels in the returned data but as I need it to dynamically name the axis keys/values Im not sure how I can achieve this.
Also, the JSON data I have is stored in a variable called jdata so I wouldnt use
the d3.json method.
The examples im working from is on : http://codepen.io/mrev/pen/waKvbw
JS:
var margin ={top:20, right:30, bottom:30, left:40},
width=960-margin.left - margin.right,
height=500-margin.top-margin.bottom;
// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")
.append("svg") //append svg element inside #chart
.attr("width", width+(2*margin.left)+margin.right) //set width
.attr("height", height+margin.top+margin.bottom); //set height
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom"); //orient bottom because x-axis will appear below the bars
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
d3.json("http://codepen.io/superpikar/pen/kcJDf.js", function(error, data){
x.domain(data.map(function(d){ return d.letter}));
y.domain([0, d3.max(data, function(d){return d.frequency})]);
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i){
return "translate("+x(d.letter)+", 0)";
});
bar.append("rect")
.attr("y", function(d) {
return y(d.frequency);
})
.attr("x", function(d,i){
return x.rangeBand()+(margin.left/2);
})
.attr("height", function(d) {
return height - y(d.frequency);
})
.attr("width", x.rangeBand()); //set width base on range on ordinal data
bar.append("text")
.attr("x", x.rangeBand()+margin.left )
.attr("y", function(d) { return y(d.frequency) -10; })
.attr("dy", ".75em")
.text(function(d) { return d.frequency; });
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+margin.left+","+ height+")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+margin.left+",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
});
function type(d) {
d.letter = +d.letter; // coerce to number
return d;
}
HTML :
<div id="chart"></div>
EDITED CODE
var jsplit = jdata.split('"');
var keyX = jsplit[1];
var keyY = "";
var data = JSON.parse(jdata);
data[0].keys().forEach(function(k) {
if (k!=keyX) keyY=k;
});
var margin ={top:20, right:30, bottom:30, left:40},
width=960-margin.left - margin.right,
height=500-margin.top-margin.bottom;
// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")
.append("svg") //append svg element inside #chart
.attr("width", width+(2*margin.left)+margin.right) //set width
.attr("height", height+margin.top+margin.bottom); //set height
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom"); //orient bottom because x-axis will appear below the bars
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
x.domain(data.map(function(d){ return d[keyX]}));
y.domain([0, d3.max(data, function(d){return d[keyY]})]);
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i){
return "translate("+x(d[keyX])+", 0)";
});
bar.append("rect")
.attr("y", function(d) {
return y(d[keyY]);
})
.attr("x", function(d,i){
return x.rangeBand()+(margin.left/2);
})
.attr("height", function(d) {
return height - y(d[keyY]);
})
.attr("width", x.rangeBand()); //set width base on range on ordinal data
bar.append("text")
.attr("x", x.rangeBand()+margin.left )
.attr("y", function(d) { return y(d[keyY]) -10; })
.attr("dy", ".75em")
.text(function(d) { return d[keyY]; });
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+margin.left+","+ height+")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+margin.left+",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
function type(d) {
d[keyX] = +d[keyX]; // coerce to number
return d;
}
Quick & dirty trick to find the names of the first and second keys: simply split the json text data around ":
var jsplit = jdata.split('"');
var keyX = jsplit[1];
var keyY = jsplit[5];
this is assuming your data format doesn't change, and that the " character does not appear within the values
Edit: taking comments into account:
var jsplit = jdata.split('"');
var keyX = jsplit[1];
var keyY = "";
var data = JSON.parse(jdata);
for (k in data[0]) {
if (k!=keyX) keyY=k;
}
Note that all this code, as well as the rest of the graph building parts, should appear in the callback function from your ajax method.
You need to use d[keyX] and d[keyY], respectively, instead of d.letter and d.frequency in your example.
For the labels, .text("Frequency") should be .text(keyY), and you need to add an x label, maybe with (untested):
.call(xAxis) //add the following lines:
.append("text")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(keyX);
I have a list of words with the frequency that they are used. In this particular list I have one word that shows up two times in this list. I want this to be displayed in my graph.
I have a plunker for this. The URL is Click here
var xScale = d3.scale.ordinal()
.rangeRoundBands([0,width], .1);
//y scaling
var yScale = d3.scale.linear()
.range([height,0]);
//set up of xAxis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//set up of yAxis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
xScale.domain(ranks.map(function(d) {return d.word;}));
console.log(ranks.map(function(d) {return d.word;}));
yScale.domain([0, d3.max(ranks, function(d) { return (d.frequency)*1.2; })])
svg.append("g")
.attr("class", "xaxis")
.attr("transform", function(d,i) {return "translate(0," + height + ")";})
.call(xAxis);
svg.append("g")
.attr("class", "yaxis")
.call(yAxis);
svg.selectAll(".bar")
.data(ranks)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {return xScale(d.word); })
.attr("y", function(d) {return yScale(d.frequency); })
.attr("width", xScale.rangeBand())
.attr("height", function(d) {return height - yScale(d.frequency); })
.style("fill", "steelblue");
example of my word list
Rank word
1 the
2 be
3 of
4 and
5 a
6 in
7 to
8 have
9 it
10 to
11 for
When the graph is drawn and I inspect the element and find that all 11 bars were made but the x position of the rank 7 and 10 are the same. I don't know how to prevent this. I know it has to do with them being the same word.
If you need more information like more code please just ask and I'll add more.
Has anyone else had this problem?
I have some number of amount (in dollar) which I am showing on y-axis and year on x-axis. now, I want to show original number on y-axis but not able to do.
i mean on y axis i want to show number from 1 to 100000 as amount but now, with .ticks(10) i can only used between 0 to 8000 amount at y axis.
and one more thing that if i want to show name as string at x axis then how can i show please let me know. i am stuck here and newly with d3.
function test() {
var graph_data;
// in graph_data it should contain value like this
// [Object { letter="2011", frequency="10000"},
// Object { letter="2012", frequency="8200"}]
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, 110], .3);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickPadding(10)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickPadding(3)
.orient("left")
.ticks(10);
var svg = d3.select("#award_by_year_chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(graph_data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(graph_data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Total dollar");
svg.selectAll(".bar")
.data(graph_data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
function type(d) {
d.frequency = +d.frequency;
return d;
}
}
now, this code is working as below chart image. and i want to change value of y axis according to total dollar value and it's coming from table and it can also -ve as well +ve and upper limit not fixed. then how can resolve.
please give me valuable solution.
thanks
Ok, from what I understand from your question here's what I got:
i mean on y axis i want to show number from 1 to 100000 as amount but
now, with .ticks(10) i can only used between 0 to 8000 amount at y
axis.
For this I would check out https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues, which documents the function tickValues. With this you can specify exactly what you want to show on the y axis. Say you want to show just 0 and 100000 then you can simply pass the array [0, 10000].
and one more thing that if i want to show name as string at x axis
then how can i show please let me know. i am stuck here and newly with
d3.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
.selectAll('text')
.text(function(d) {
return 'Some string: ' + d.letter
})
This will let you customize any of the tick values on the x axis. In case I didn't understand the first part of the question, you can also use this trick on the y axis to customize the output of the tick value.
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'
},