Develop Reference

D3.js linechart - controlling x-axis with dates

I have created a linechart with D3.js, but can't seem to figure out how to control the X-axis completely.
You can see my example her: http://codepen.io/DesignMonkey/pen/KdOZNQ
I have sat the ticks count for the x-axis to 3 days, and I have an Array with a range of 31 days, that should show a day in each end of the x-axis and skip to every third day. But for some reason when the a-axis pass the 1st in the month, it shows both 2015-08-31 and 2015-09-01 and doesn't skip to 2015-09-03 as it is supposed to.
My code for the linechart is here:
// Set the dimensions of the canvas / graph
let margin = {top: 30, right: 20, bottom: 30, left: 40},
width = 330 - margin.left - margin.right,
height = 180 - margin.top - margin.bottom;
// Set the ranges
var x = d3.time.scale().range([0, width]).nice(10);
var y = d3.scale.linear().rangeRound([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(d3.time.days, 3)
.tickFormat(d3.time.format('%e'))
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(10)
var yAxis = d3.svg.axis().scale(y)
.orient("left")
.ticks(5)
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10)
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
// Adds the svg canvas
let svg = d3.select(template.find(".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 + ")");
// For each line
data.forEach((item) => {
// Scale the range of the data
x.domain(d3.extent(item.data, function(d) {
if(d.value != undefined)
return d.date;
}));
// Create a perfect looking domainrange to the nearest 10th
y.domain([
Math.floor(d3.min(item.data, function(d) {
if(d.value != undefined)
return d.value;
})/10)*10
,
Math.ceil(d3.max(item.data, function(d) {
if(d.value != undefined)
return d.value;
})/10)*10
]);
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Add only points that have value
svg.append("path")
.attr("class", "line color-"+ item.colorClass)
.attr("d", valueline(item.data.filter((pnt) => pnt.value != undefined)));
});
Can somebody tell me what I'm doing wrong here? :)
/Peter
UPDATE:
I found out it's like, that it want to show the new month. See this pen: http://codepen.io/DesignMonkey/pen/jbgYZx
It doesn't say "Septemper 1" but only "Septemper" like it wants to label the change of month. How do I disable this? :)

Solution:
var count = 0;
var tickRange = data[0].data.map((item) => {
count = (count == 3) ? 0 : count+1;
if(count == 1) {
return item.date;
}
})
.filter((d) => d != undefined);
and then:
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(d3.time.days, 3)
.tickValues(tickRange)
.tickFormat(d3.time.format('%e'))
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(10)
Thanks :)

what scale to use for representing years only on x axis in d3 js

I have been developing an area chart for year(x axis) vs Revenue (y axis) in D3 Js.The data is as:
localData=[
{"Revenue":"4.5","Year":"2011"},
{"Revenue":"5.5","Year":"2010"},
{"Revenue":"7.0","Year":"2012"},
{"Revenue":"6.5","Year":"2013"}
]
I want year at x axis and revenue at y axis for an area chart.Currently I am using time scale for x axis but i dont know how to use it as I have not date format I have only Years to represent.
My Current code is:
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
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 area = d3.svg.area()
.x(function (d) { return x(d.Year); })
.y0(height)
.y1(function (d) { return y(d.Revenue); });
$("#chartArea").html("");
var svg = d3.select("#chartArea").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(d3.extent(localData, function (d) { return d.Year; }));
y.domain([0, d3.max(localData, function (d) { return d.Revenue; })]);
svg.append("path")
.datum(localData)
.attr("class", "area")
.attr("d", area)
.attr("fill",color);
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("Revenue (M)");
Currently I am getting on my X axis as .011,.012,013,.014 I need as 2011,2012,2013,2014
I am new to D3 js so dnt know much about how to use scales??Please Help anyone..Thanks in advance.

Just add tick Format to your x Axis definition:
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y")); // <-- format

In v4, it'd be something like this:
d3.axisBottom(x).ticks(d3.timeYear.every(1))

huan feng is right. The time scale is treating your year(implicitly converted to an int) as timestamps. To force the scale to operate on the year, create Date objects specifying the year in it. Basically change the following line:
x.domain(d3.extent(localData, function (d) { return d.Year; }));
to
x.domain(d3.extent(localData, function (d) { return new Date(parseInt(d.Year),0); }));
You may then use Klaujesi's solution to change the tickFormat.

Plotting a graph in a new tab using onclick of d3js

I have a plot which are is small in size in my home page and when i click on the plot, i want it to open the plot in an enlarged size in a new tab.
I tried the following, but its just opening a new tab but did not plot anything.
Assume that vis is the element that contains the current plot and when vis is clicked, it should plot the same graph bigger in a new window.
The max value,data and date_array are all printed correctly, so there is no problem with the data.
vis.on('click', function(){
var newWindow = window.open('');
console.log(data[0]);
console.log(date_array);
console.log(max_value);
var vis1 = d3.select(newWindow.document.body),
WIDTH = 400,
HEIGHT = 150,
MARGINS = {
top: 10,
right: 10,
bottom: 10,
left: 100
},
xScale = d3.scale.ordinal().domain(date_array).rangePoints([MARGINS.left, WIDTH - MARGINS.right]),
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, max_value]),
xAxis = d3.svg.axis()
.scale(xScale)
yAxis = d3.svg.axis()
.scale(yScale);
vis1.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis)
vis1.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis)
var lineGen = d3.svg.line()
.x(function(d) {
return xScale(d.count);
})
.y(function(d) {
return yScale(d.param_perc);
})
.interpolate("basis");
vis1.append('svg:path')
.attr('d', lineGen(data))
.attr('stroke', color)
.attr('stroke-width', 2)
.attr('fill', 'none')
})

In order to plot an svg you first need to insert an svg. Your code is appending gs and a path to the body but it is missing the containing svg element. This could easily be solved by adding
vis1 = vis1.append("svg");
This works for me in a boiled down Plunk.

Animate lines in a line graph with D3.js

I have my line graph, with 2 lines.
Data to draw my line graph is pulled from a .csv file.
Can anyone explain how I could start off with an empty graph, and when I click a button,
my lines animate across the graph?
Thanks in advance!!
var button=d3.select("#button");
var margin = {top: 30, right: 20, bottom: 50, left: 60},
width = 700 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
//treats value passed to it as a time/date
//OUTPUT RANGE
var x = d3.time.scale()
.range([0, width]);
//OUTPUT RANGE
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left")
.ticks(5);
//assigns coordinates for each piece of data
var valueline = d3.svg.line()
.interpolate("linear")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
//second line data
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.open); });
//create area for 'area' below line
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.close); });
//creates area to draw graph
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
//groups content
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(30)
}
// csv callback function
d3.csv("myData2.csv", function(data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
//+ operator sets any 'close' values to nuneric
d.close = +d.close;
d.open = +d.open;
});
//INPUT DOMAINS
//.extent() returns min and max values of argument
x.domain(d3.extent(data, function(d) { return d.date; }));
//returns max of whichever set of data is bigger
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open); })]);
//draws lines
//passes the valueline array to path object
svg.append("path") // Add the valueline path.
.attr("class", "line")
//adds dashed line
.style("stroke-dasharray", ("5, 9")) // <== This line here!!
.attr("d", valueline(data));
button.on("click", function() {
svg.append("path") // Add the valueline2 path.
.attr("class", "line2")
.transition()
.attr("d", valueline2(data));
})
svg.append("g") // Add the X Axis
.attr("class", "x axis")
//moves x axis to bottom of graph
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//text label for x-axis
svg.append("text") // text label for the x axis
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom - 5 ) + ")")
.style("text-anchor", "middle")
.text("Date");
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
//text label for y-axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
//adds extra left padding as original y pos = 0
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Value");
//adding a title to the graph
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Me Graph Larry");
//draw x axis grid
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
//draw y axis grid
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
});<!--d3.csv close-->

You need to setup a reasonable start value for the animation:
var startvalueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(0); })
button.on("click", function() {
svg.append("path") // Add the valueline2 path.
.attr("class", "line2")
.attr("d", startvalueline2(data)); // set starting position
.transition()
.attr("d", valueline2(data)); // set end position
});
You might also have a look at Mike's path transitions page. To see how to implement smooth (non-wobbly) animations when using svg:path.

d3js graph retaining old axis data on refreshing with new data

Here is a picture of my problem
Every time try to refresh my d3js graph with new data, its x axis and y axis gets messed up with both old and new axis.In the picture on the y axis 3,2.5,2,1.5 .... was my old axis and 800,700,600.....was my new axis.Similarly with the x axis
Can any one tell me wat i'm doing wrong.I only want the new axis to show up.
Here is my d3js code.
function ShowGraph(data) {
var vis = d3.select("#visualisation"),
WIDTH = 500,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 30
},
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function (d) {
return d.year;
}),
d3.max(data, function (d) {
return d.year;
})]),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function (d) {
return d.count;
}),
d3.max(data, function (d) {
return d.count;
})]),
xAxis = d3.svg.axis() // generate an axis
.scale(xRange) // set the range of the axis
.tickSize(5) // height of the ticks
.tickSubdivide(true), // display ticks between text labels
yAxis = d3.svg.axis() // generate an axis
.scale(yRange) // set the range of the axis
.tickSize(5) // width of the ticks
.orient("left") // have the text labels on the left hand side
.tickSubdivide(true); // display ticks between text labels
var transition = vis.transition().duration(1000).ease("exp-in-out");
transition.select(".x.axis").call(xAxis);
transition.select(".y.axis").call(yAxis);
vis.append("svg:g") // add a container for the axis
.attr("class", "x axis") // add some classes so we can style it
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
.call(xAxis); // finally, add the axis to the visualisation
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var circles = vis.selectAll("circle").data(data)
circles.enter()
.append("svg:circle")
.attr("cx", function (d) {
return xRange(d.year);
})
.attr("cy", function (d) {
return yRange(d.count);
})
.style("fill", "red")
circles.transition().duration(1000)
.attr("cx", function (d) {
return xRange(d.year);
})
.attr("cy", function (d) {
return yRange(d.count);
})
.attr("r", 10)
circles.exit()
.transition().duration(1000)
.attr("r", 10)
.remove();
}
Here is it have a look. link Try with word "the,and,i,and,the" one at a time

Try to empty the axis before build the graph
function ShowGraph(data) {
d3.selectAll('.axis').remove();
var vis = d3.select("#visualisation"),
//...
EDIT
OK maybe I found the solution
The problem is the axis that appends every time to call the function.
So, if you add a check like so:
var hasAxis = vis.select('.axis')[0][0];
if(!hasAxis) {
vis.append("svg:g") // add a container for the axis
.attr("class", "x axis") // add some classes so we can style it
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
.call(xAxis); // finally, add the axis to the visualisation
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
}
it should works