Fiddle (updating it now): http://jsfiddle.net/hy6r1peb/
I'm attempting to plot points via line graph based on the following data pulled from a JSON API:
var data = {
"january": [
{"total": "31", "date": "2015-01-01"},
{"total": "19", "date": "2015-01-05"},
{"total": "4", "date": "2015-01-10"}
], "error": false, "status": 200
};
This is my code from the d3noobs tutorial. It throws an error on line 1 of d3.js. Where have I gone wrong?
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%d").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
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.json(URL, function(error, data) {
if (error) return console.warn(error);
else {
data = data.january;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.total = +d.total;
});
}
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// 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);
});
I typo'd and had d.close in there when I shouldn't have. Doing this purely to close the question -- all credit goes to Terry for his sharp eyes.
Related
I have a chart that on mouseover gives me the data i am looking for
.on("mouseover", function(d) {
givegraph(this.__data__);
})
This passes the correct data i am looking for. My data looks like this for one item on a mouseover event
{
color: "red",
uses : 22,
years_used:[1,2,3,4,5],
numberofPens:[44,39,29,54,09]
}
My givegraph function looks like
function givegraph(d){
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
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").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.x(function(d) {return x(d.years_used); })
.y(function(d) { return y(d.numberofpens); });
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 + ")");
x.domain(d3.extent(data, function(d) { return d.years_used; }));
y.domain([0, d3.max(data, function(d) { return d.numberofpens; })]);
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
The data is not being pass through when I call it in the valueline or domain functions. When i use the command to see the data in the console, nothing shows.
.x(function(d) {console.log(d);return x(d.years_used); })
The data is being pass through in the givegraph function but when i use it for the anonymous function it is not there. How can i fix this
I am using D3.js to create a simple line graph.
<div>
<h6>Price Over Time</h6>
<div id="priceOverTimeChart"></div>
</div>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 800 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(10);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("#priceOverTimeChart")
.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 + ")");
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// 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);
});
The data for the line graph uses the following data format:
26-Apr-12,0.048
25-Apr-12,0.048
24-Apr-12,0.048
I would like to add an optional string to each record so it looks like:
26-Apr-12,0.048, "product 1 launch",
25-Apr-12,0.048, "product 2",
24-Apr-12,0.048, "product 3"
26-Apr-12,0.048, null
25-Apr-12,0.048, null
24-Apr-12,0.048, null
The graph would then look something like this with the labels on it:
Graph with optional labels
How can I accomplish this? Thanks in advance!
Appending texts to the corresponding x, y position will do the trick.
Please refer this working JS Fiddle
svg.append("g").selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", function(d) { return x(d.date) - paddingForText })
.attr("y", function(d) { return y(d.close) + paddingForText })
.attr("fill", "red")
.text(function(d) { return d.notes });
Here is my code:
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%m-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(+d.AtTime); })
.y(function(d) { return y(d.Temperature); });
// Adds the svg canvas
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 + ")");
// Get the data
d3.csv("../datasets/test.csv", function(error, data) {
data.forEach(function(d) {
d.AtTime = parseDate(d.AtTime);
d.Temperature = +d.Temperature;
});
console.log(data);
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.AtTime; }));
y.domain([0, d3.max(data, function(d) { return d.Temperature; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// 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);
});
And the line chat just can not show...Here is my simple csv dataset:
Category,Temperature,Pressure,AtTime
A,76,400,1-1-2014
B,23,239,2-3-2013
C,38.6,378,2-6-2016
D,43.2,289,3-5-2015
E,49,501,3-5-2015
I used console.log(data) to check, and I found that AtTime has null value.... I do not why..Anyone could help me with this? Thanks!
It's one character in your time format string.
//var parseDate = d3.time.format("%d-%m-%y").parse; // lower-case Y expects two digits only
var parseDate = d3.time.format("%d-%m-%Y").parse; // use capital Y for 4 digit years
see https://github.com/d3/d3/wiki/Time-Formatting#format for all the different modifiers
There is a mistake in your dates, I parsed them and ordered them so the line would render correctly.
data.forEach(function(d) {
var dateArr = d.AtTime.split('-');
d.AtTime = new Date(+dateArr[2], +dateArr[1], +dateArr[0]);
d.Temperature = +d.Temperature;
})
data.sort(function(a, b) {
return new Date(b.AtTime) - new Date(a.AtTime);
});
Remove the implicit number cast in your valueLine function:
var valueline = d3.svg.line()
.x(function(d) {
return x(d.AtTime);
})
.y(function(d) {
return y(d.Temperature);
});
And finally if you don't have any css add a stroke to your line so it renders:
svg.append("path")
.attr("class", "line")
.attr('stroke', 'red')
.attr("d", valueline(data));
Working plnkr: https://plnkr.co/edit/ujFDtHkdtC2EeBwJ1foU?p=preview
This is a d3 code that generates a line graph from data.tsv file. However I want to input data in form of json. So what will be changes required here. There is a line marked with *'s .I have changed tsv to json but the code is not working.
<script>
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("%d-%b-%y");
var x=12;
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.tsv("data.tsv", 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;
}
</script>
First, you have to check if your JSON structure correctly matches the data in your TSV or CSV. For instance, suppose that this is your CSV:
foo, bar
4, 5
12, 2
3, 61
Your JSON should be like this:
[
{
"foo": 4,
"bar": 5
},
{
"foo": 12,
"bar": 2
},
{
"foo": 3,
"bar": 61
}
]
That is, an array of objects. Sometimes, in very big and complex JSONs, it's easy to forget a comma or a brace. I use codebeautify to check:
http://codebeautify.org/jsonviewer
And, then, just change d3.tsv for d3.json:
d3.json("data.json", function(data){
console.log(data); //just to check if it's all right
//the rest of your code
});
NOTE: Contrary to d3.csv and d3.tsv, you cannot provide an accessor function to d3.json.
I'm attempting to learn D3 by following some of the simple bl.ock examples. One of the examples uses a CSV file to create a line graph.
I'm using this JSON file to create the path for the graph. The code below outputs the correct data to the console, but when I try to append the data (d.date, d.rain) to the x and y domains, nothing displays.
To the console...
// hold the daily rain total
var daily_rain_total;
// get the data
d3.json("data.json", function(error, data) {
// log the returned object on console unless error
if (error) return console.error(error);
console.log(data);
days = data.data.weather;
// step through each day
days.forEach(function(d) {
hourly = d.hourly;
hourly.forEach(function(h) {
daily_rain_total = daily_rain_total + parseFloat(h.precipMM);
});
d.date = d.date;
console.log(d.date);
d.rain = daily_rain_total.toFixed(2);
console.log(d.rain);
// reset total
daily_rain_total = 0;
});
});
Render a line graph...
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.rain); });
// Adds the svg canvas
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 + ")");
// hold the daily rain total
var daily_rain_total;
// get the data
d3.json("data.json", function(error, data) {
// log the returned object on console unless error
if (error) return console.error(error);
console.log(data);
days = data.data.weather;
// step through each day
days.forEach(function(d) {
// step through each hour
hourly = d.hourly;
hourly.forEach(function(h) {
daily_rain_total = daily_rain_total + parseFloat(h.precipMM);
});
d.date = d.date;
console.log(d.date);
d.rain = daily_rain_total.toFixed(2);
console.log(d.rain);
// reset total
daily_rain_total = 0;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.rain; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// 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);
});
Any tips are greatly appreciated.