I have a graph made with D3, with two problems to solve (I attached an example image):
1) How can I add the font size for the Y axis? It is taking the value indicated for the "cantidad" title only.
2) The text of the first tick on the x-axis appears below the line of the rest. What is missing indicate?
Some code, for the creation of the axes:
var svg = d3.select('#graf_act_tiempo'),
margin = { top: 20, right: 108, bottom: 60, left: 70 },
width = +svg.attr('width') - margin.left - margin.right,
height = +svg.attr('height') - margin.top - margin.bottom,
g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Function to convert a string into a time
var parseTime = d3.time.format('%Y-%m-%d').parse;
// Set the X scale
var x = d3.time.scale().range([0, width], 0.5);
// Set the Y scale
var y = d3.scale.linear().range([height, 0]);
// Set the color scale
var color = d3.scale.ordinal()
.range(["orange", "blue", "red"]);
var tickValuesForAxis = data.map(d => parseTime(d.fecha));
var ticks = data.length;
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(ticks)
.tickFormat(d3.time.format('%d/%m/%y'))
;
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(1, 0)
.tickFormat(d3.format("d"))
;
// Set the X domain
x.domain(d3.extent(data, function(d) {
return d.fecha;
}));
// Set the Y domain
y.domain([
d3.min(currencies, function(c) {
return d3.min(c.values, function(v) {
return v.worth;
});
}),
d3.max(currencies, function(c) {
return d3.max(c.values, function(v) {
return v.worth;
});
})
]);
// Set the X axis
g.append("g")
.attr("class", "x axis")
.call(xAxis)
.attr("transform", function(d) { console.log(height); return "translate(0," + height + ")"; })
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)")
.style("font-size", "10px")
;
// Set the Y axis
g.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("y", 0)
.attr("x", -20)
.attr("dy", "4px")
.style("text-anchor", "end")
.text("Cantidad")
.style("font-size", "11px")
;
Thanks
1> You can use the class name of Yaxis and select text and give font Size in your css file
eg- in your css file
.y.axis text {
font-size: 14px;
}
2> Can you be more specific about the 2nd question?
Related
So I've found a half dozen posts regarding this error but none seem to resolve my issue.
The data as it comes from firebase:
data = [{percent:24,year:1790},....]
var parseDate = d3.time.format("%Y").parse;
// so I want to convert the year to a 'date' for d3 time scale
data.forEach(function(d) {
d.year = parseDate(d.year.toString());
d.percent = +d.percent;
});
which then the data looks like
console.log(data);
[{percent:24,year:Fri Jan 01 1790 00:00:00 GMT-0500 (EST)}...]
my x scale
var x = d3.time.scale().range([0, this.width]);
my x domain
x.domain(d3.extent(data, function(d){return d.year; }));
my line
var line = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.percent); });
then my chart (there is a base chart that this is extending)
this.chart.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
Which when added has the exception ...
Error: <path> attribute d: Expected number,
UPDATE
So here is the working code using sample data the code is more or less a copy paste from d3 example site using a csv instead of tsv
This works fine
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatDate = d3.time.format("%Y");
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("body").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 + ")");
d3.csv("./data/debt-public-percent-gdp.csv", type, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
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("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
function type(d) {
d.date = formatDate.parse(d.date);
d.close = +d.close;
return d;
}
This does not work
Using the same datasource here is my 'Base Chart'
export class BaseChart{
constructor(data,elem,config = {}){
var d3 = require('d3');
this.data = data;
this.svg = d3.select('#'+elem).append('svg');
this.margin = {
left: 30,
top: 30,
right: 30,
bottom: 30,
};
let width = config.width ? config.width : 600;
let height = config.height ? config.height : 300;
this.svg.attr('height', height);
this.svg.attr('width', width);
this.width = width - this.margin.left - this.margin.right;
this.height = height - this.margin.top - this.margin.bottom;
this.chart = this.svg.append('g')
.attr('width', this.width)
.attr('height', this.height)
.attr('transform', `translate(${this.margin.left},${this.margin.top})`);
}
}
Chart that Extends the Base Chart
export class FedDebtPercentGDP extends BaseChart{
constructor(data, elem, config){
super(data, elem, config);
var x = d3.time.scale().range([0, this.width]);
var y = d3.scale.linear().range([this.height, 0]);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
this.chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + this.height + ")")
.call(xAxis);
//
this.chart.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("Price ($)");
this.chart.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
}
}
The code that calls the chart
d3.csv('./data/debt-public-percent-gdp.csv', type, function(error, data) {
new FedDebtPercentGDP(data, "debt-to-gdp", {width: '100%'});
});
The data
date,close
1790,30
1791,29
1792,28
1793,24
1794,22
1795,19
1796,16
1797,17
1798,16
1799,16
1800,15
1801,13
1802,14
1803,14
1804,13
1805,11
1806,10
1807,10
1808,9
1809,7
1810,6
1811,6
1812,7
1813,8
1814,9
1815,10
1816,10
1817,8
1818,7
1819,7
1820,8
1821,9
1822,8
1823,8
1824,8
1825,7
1826,6
1827,6
1828,5
1829,4
1830,3
1831,2
1832,1
1833,0
1834,0
1835,0
1836,0
1837,0
1838,1
1839,0
1840,0
1841,1
1842,1
1843,2
1844,1
1845,1
1846,1
1847,2
1848,2
1849,3
1850,2
...
There are quite a few problems with the code that you've provided. I guess you did not paste it all. The excerpt you pasted definitely does not have this.chart defined, for example, so it is not possible to reconstruct your error message.
That being said, it is still possible to identify the main problem:
The error message says it all: as you have parsed d.year and turned it into a string, but the path needs a number as an argument there is a 'type mismatch'-kind of error in your code.
You can see how your data looks like in the console log that you've provided. year is turned into a string.
I would recommend leaving d.year as it is, and if you really need, you can create a new attribute called for example date if you need the date in that format. So if it is needed for displaying the date, you can use that one, while year can be used for path calculation in its original format.
I've got the following piece of code that takes a mouse movement on an SVG container and will shrink/grow the height/width of a visualization based on a mouse movement. When the user has a mouse movement in the x direction, the bars on the chart appear jittery: the x attribute will increase by, 2 or three and then revert to what it was previously: the rects on the page will scoot right a couple pixels, and then snap back to their original position.
Is there a bug with how I'm changing the ordinal scale? Or should I use a transform instead of manipulating the X value?
'use strict';
var d3 = require("d3");
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var chartData;
var svg = d3.select("body").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 + ")");
let render = (e,data)=>{
width += d3.event ? d3.event.movementX : 0; //changing x axis here
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([data.height, 0]);
//
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
//
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%")
.tickSize(1);
var yAxisEl = 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("Frequency");
var bars = svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
console.log(x(d.letter));
var currX = x(d.letter); //sometimes gives wrong valuse
return currX;
})
.attr("width", function(){
return x.rangeBand();
})
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return Math.abs(height - y(d.frequency)); })
}
let rerender=(data)=>{
d3.select("svg").select("g").selectAll("*").remove();
render(null,data);
}
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
chartData = data;
chartData.height = height;
chartData.width = width;
render(error,chartData);
});
d3.selectAll('svg').on('mousemove',function(){
if(chartData){
chartData.height += d3.event.movementY;
rerender(chartData);
}
});
data
letter frequency
A .08167
B .01492
C .02782
D .04253
E .12702
F .02288
G .02015
I made the rerender function inside time out (hope this fixes the problem you referring)
var rerender = (data) => {
if (myVar){
clearTimeout(myVar);//clear timeout if called before 1 millisecond
}
myVar = setTimeout(function(){
d3.select("svg").select("g").selectAll("*").remove();
render(null, data);
}, 1);
}
working code here
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 am having a lot of trouble with D3 bar chart where the length of the data I get from search is variable. I used the D3 bar chart example and built this. However as data length goes up, the graph gets less and less legible. The problem seems to be the range gets confused when it is beyond 100 points or so.
Code is below:
function makegraph(data,ctype) {
//var data=xdata.splice(-900)
var gwidth=data.length*2;
if(gwidth < 800) gwidth=800;
//gwidth=800
var margin = {top: 9, right: 20, bottom: 30, left: 90},
width = gwidth - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
//x=d3.scale.linear().domain([0,1]).range(0,width)
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d) { if (d % 10) return ""; else return d;})
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
// .ticks(10, "%");
d3.select("svg").remove()
var svg = d3.select("#graphchart").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 + ")");
var line = d3.svg.line()
.x(function(d) { return x(d.rowid); })
.y(function(d) { return y(d[ctype]); });
x.domain(data.map(function(d) { return d.rowid; }));
var ymax=d3.max(data, function(d) { return d[ctype]; });
var ymin=d3.min(data, function(d) { return d[ctype]; });
y.domain([ymin, ymax]);
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", Math.log10(ymax))
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Bytes");
// console.log(x.rangeBand())
var bar = svg.selectAll(".bar")
.data(data);
bar.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.rowid); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d[ctype]); })
.attr("height", function(d) { var xya= height - y(d[ctype]); /* console.log(xya+":"+d[ctype]); */ return height - y(d[ctype]); })
/* .attr("title", function(d) { return d['bytes']+" Bytes at "+d.stime; }) */
.on("mouseover", function(d) { $("#graphinfo").html(d3.format('0,000')(d['bytes'])+" Bytes at "+d.stime) })
.on("mouseout",function(d) { $("#graphinfo").html(' ')})
.on("click",function(d) { tablegraph(d)});
$('.bar').tooltip()
}
Do you have suggestions how I can make this graph so that the bar chart will grow horizontally for larger data sets? Thanks for any help and suggestions!
Vijay
I am creating a bar chart using d3. To do so I looked at this code and changed it a little bit.
However what it does is centering the bars, and I would like the bars to start immediate at the bar y axis.
It looks like the issue comes from these 2 pieces of code:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .0);
and the last line of this one:
svg.selectAll(".bar")
.data(graphObj)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.step); })
where the x(d.step) is responsible for the distance, the x is set at the var x = ...
Somehow I need to change this, but cant figure it out.
The distance is a bit different since I changed this:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
to this:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .0);
but it doesn't help much.
Can you help out here?
This is my code:
$('#chartDiv').html('');
var margin = {top: 10, right: 10, bottom: 35, left: 50},
width = 600 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .0);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "");
var svg = d3.select("#chartDiv").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 + ")");
graphObj.forEach(function(d) {
d.step = +d.step;
d.temp = +d.temp;
});
x.domain(graphObj.map(function(d) { return d.step; }));
y.domain([0, d3.max(graphObj, function(d) { return d.temp; })]);
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", "-40px")
.style("text-anchor", "end")
.text("Temperature");
svg.selectAll(".bar")
.data(graphObj)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { console.log(d.step, x.rangeBand(), x(d.step)); return x(d.step); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.temp); })
.attr("height", function(d) { return height - y(d.temp); });
if ($('#chartDiv').css('left').replace('px','') < 0) {
$('#chartDiv').animate({
left: 10
}, 1000);
}
you need to add the i variable to the .attr("x", function(d) { return x(d.step); }), like so: .attr("x", function(d, i) { return x.rangeRoundBands() * i; }), so it will go through the bars and place them one after the other (this might need some tweaking, can't do it properly without a jsfiddle) but should at least get you on the path of fixing it without issues