d3 line chart not showing data - based of tutorial - javascript

I am having issues with my line chart not showing data. I am basing my code off of here. I am using WebStorm and there are no errors in my code or the developer tools in Chrome so I'm at a loss for what is going wrong.
Code:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<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 = 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.users); });
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("lineChart.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.users; }));
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");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
function type(d) {
d.date = formatDate.parse(d.date);
d.users = +d.users;
return d;
}
</script>
CSV:
date, users
6-Mar-15,19
11-Mar-15,12
22-Apr-15,22
29-Apr-15,32
3-May-15,1
6-May-15,9
4-Sep-15,2
8-Sep-15,13
10-Sep-15,147
21-Sep-15,4
1-Oct-15,264
4-Oct-15,114
7-Oct-15,63
12-Oct-15,79

The problem is to be found within the header line of your CSV. You have a space character right in front of column header users:
date, users
6-Mar-15,19
d3.csv.parse() will turn this into an attribute d[" users"] containing a space character. Because there is no attribute users in the parsed data's objects, your accessor function type(d) will therefore convert +undefined to NaN and assign this value to d["users"].
This is in compliance with RFC 4180 which states:
2. Definition of the CSV Format
Within the header and each record, there may be one or more
fields, separated by commas. Each line should contain the same
number of fields throughout the file. Spaces are considered part
of a field and should not be ignored. The last field in the
record must not be followed by a comma.
The solution to your problem will be as simple as removing the unwanted space character from your CSV while leaving the rest unchanged:
date,users
6-Mar-15,19

Your code seems to be working fine when using static data. So you should conform the data is loaded correctly inside d3.csv method and converted properly using type function.
Ensure date is parsed and users is an aggregated sum.
EDIT: Try loading csv data as shown below.
d3.csv("lineChart.csv", function(error, data) {
data.forEach(function(d) {
d.date = formatDate.parse(d.date);
d.users = +d.users;
});
---------------------
---------------------
});
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 = 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.users);
});
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 + ")");
var data = [{
"date": "6-Mar-15",
"users": 19
}, {
"date": "11-Mar-15",
"users": 12
}, {
"date": "22-Apr-15",
"users": 22
}, {
"date": "29-Apr-15",
"users": 32
}, {
"date": "3-May-15",
"users": 1
}, {
"date": "6-May-15",
"users": 9
}, {
"date": "4-Sep-15",
"users": 2
}, {
"date": "8-Sep-15",
"users": 13
}, {
"date": "10-Sep-15",
"users": 147
}, {
"date": "21-Sep-15",
"users": 4
}, {
"date": "1-Oct-15",
"users": 264
}, {
"date": "4-Oct-15",
"users": 114
}, {
"date": "7-Oct-15",
"users": 63
}, {
"date": "12-Oct-15",
"users": 79
}];
data.forEach(function(d) {
d.date = formatDate.parse(d.date);
d.users = +d.users;
});
alert(JSON.stringify(data));
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain(d3.extent(data, function(d) {
return d.users;
}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Related

Reading json data from a file in d3.js not working

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.

D3 graph with single Y value over time

I have data with a constant value across multiple dates.
[{"date":"13-Sep-15","data0":2464},{"date":"12-Sep-15","data0":2464},
{"date":"11-Sep-15","data0":2464},{"date":"10-Sep-15","data0":2464},
{"date":"9-Sep-15","data0":2464},{"date":"8-Sep-15","data0":2464},
{"date":"7-Sep-15","data0":2464}]
What are the settings of d3.axis() to get a graph like this?
This needs to work from 1->n y values.
.domain doesn't like an extent of [2464, 2464] no matter the value of .ticks.
Ok I am assuming, want to have distinct y ticks depending on the values in the data.
I am doing some thing like this to get the unique ticks needed in the y axis:
var yData = [];
data.forEach(function (d) {
d.date = parseDate(d.date);
d.close = +d.data0;
yData.push(+d.data0)
});
yData = d3.set(yData).values();//get a set of values for y axis.
Full code here:
// 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-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// 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 + ")");
data = [{
"date": "13-Sep-15",
"data0": 2464
}, {
"date": "12-Sep-15",
"data0": 2464
}, {
"date": "11-Sep-15",
"data0": 2464
}, {
"date": "10-Sep-15",
"data0": 2464
}, {
"date": "9-Sep-15",
"data0": 2464
}, {
"date": "8-Sep-15",
"data0": 2464
}, {
"date": "7-Sep-15",
"data0": 2464
}];
var yData = [];
data.forEach(function (d) {
d.date = parseDate(d.date);
d.close = +d.data0;
yData.push(+d.data0)
});
yData = d3.set(yData).values()
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").tickValues(yData);
// 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);
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Hope this helps!
Figured it out. Here is the graph with the line centered on single y.
// 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-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the line
var valueline = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close) / 2;
});
// 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 + ")");
data = [{
"date": "13-Sep-15",
"data0": 2464
}, {
"date": "12-Sep-15",
"data0": 2464
}, {
"date": "11-Sep-15",
"data0": 2464
}, {
"date": "10-Sep-15",
"data0": 2464
}, {
"date": "9-Sep-15",
"data0": 2464
}, {
"date": "8-Sep-15",
"data0": 2464
}, {
"date": "7-Sep-15",
"data0": 2464
}];
var yData = [];
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.data0;
yData.push(+d.data0)
});
yData = d3.set(yData).values()
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").tickValues(yData);
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain(d3.extent(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);
d3.select('.y .tick').attr("transform", "translate(0," + height / 2 + ")");
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Changes:
Translated the y tick down by height / 2:
d3.select('.y .tick').attr("transform", "translate(0," + height / 2 + ")");
Changed y extent:
y.domain(d3.extent(data, function (d) {
return d.close;
}));
Halved the y of the line:
var valueline = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.close) / 2;
});

d3.js array issues: Invalid value for <path> in line graph

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.

Position a chart top left

I am a newbie using d3 and javascript, but have managed to cobble together some code (using borrowed code from online examples) to create a simple column chart with different colours indicating the status of a variable. Everything works well except that the chart will not position at the top left of the canvas despite adjusting the margin.top or margin.left to small values. If I adjust the browser window to portrait, the chart aligns left but with white significant amounts of white space above it. If I adjust the browser window to landscape the chart aligns to the top but with significant amounts of white space to the left of it. Can someone please advise as to where I have gone wrong. Thanks in advance.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [
{
"status": "Low",
"value": "20",
"color": "red"
},
{
"status": "Marginal",
"value": "10",
"color": "orange"
},
{
"status": "High",
"value": "70",
"color": "green"
}
];
var margin = {top: 10, right: 20, bottom: 30, left: 30},
width = 200 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
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("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(data.map(function(d) { return d.status; }));
y.domain([0, 100]);
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("Probability");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.status); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return d.color; });
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
The problem seems to be that you have an <svg class="chart"> element, but your code appends yet another <svg> element to the page after that one, and the first one takes some space

How to spcify ticks on x axis for time scale in d3js?

It is a qustion which i got on basis of my previouse question which can be found here : link
In the link there is a fiddle, now i realized that if i have 3 dates :
12.12.12 12:12:12 //12th of december 2012
12.12.12 11:12:12
12.12.12 10:12:12
which is the same date but the difference is just by 1 hour, then this difference is not shown on the graph.
I want only to show those dates and hours on x axis, which actualy are a part of data, and make something so it is actually possible to see on the graph the 1 hour difference if something happend the same date, so plots wouldnt end on top of each other.
Can it be done in any way?
When you create the x axis, you can indicate the tick interval using
.ticks(d3.time.hour, 1)
which will place a tick every 1 hour. See the documentation of scale.ticks() for more info.
Here's the working code
exp1();
function exp1(){
var data = [
{
"CurrentQuantity": "50",
"LastUpdated": "/Date(1420793427983)/"
},
{
"CurrentQuantity": "76",
"LastUpdated": "/Date(1420721731353)/"
},
{
"CurrentQuantity": "20",
"LastUpdated": "/Date(1420714881920)/"
},
{
"CurrentQuantity": "24",
"LastUpdated": "/Date(1420713917820)/"
}//,
// {
// "CurrentQuantity": "25",
// "LastUpdated": "/Date(1418907098197)/"
// }
];
var margin = {top: 20, right: 20, bottom: 85, left: 50},
width = 1500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");
var x = d3.time.scale().range([0, width]);
x.tickFormat("%Y-%m-%d %I:%M:%S")
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(function(d) {
return formatDate(d);
})
.ticks(d3.time.hour, 1)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
data.forEach(function(d) {
var date = new Date(parseInt(d.LastUpdated.substr(6)));
console.log(date)
d.LastUpdated = date;
});
var line = d3.svg.line()
.x(function(d) {
return x( d.LastUpdated);
})
.y(function(d) {
return y(d.CurrentQuantity);
});
var svg = d3.select("#chart1").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.LastUpdated;
}));
y.domain(d3.extent(data, function(d) {
return d.CurrentQuantity;
}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-45)"
});
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('#Resource.Amount');
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
}
exp2();
function exp2(){
var data = [
{
"CurrentQuantity": "50",
"LastUpdated": "/Date(1420793427983)/"
},
{
"CurrentQuantity": "76",
"LastUpdated": "/Date(1420721731353)/"
},
{
"CurrentQuantity": "20",
"LastUpdated": "/Date(1420714881920)/"
},
{
"CurrentQuantity": "24",
"LastUpdated": "/Date(1420713917820)/"
},
{
"CurrentQuantity": "25",
"LastUpdated": "/Date(1418907098197)/"
}
];
var margin = {top: 20, right: 20, bottom: 85, left: 50},
width = 1500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");
var x = d3.time.scale().range([0, width]);
x.tickFormat("%Y-%m-%d %I:%M:%S")
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(function(d) {
return formatDate(d);
})
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
data.forEach(function(d) {
var date = new Date(parseInt(d.LastUpdated.substr(6)));
console.log(date)
d.LastUpdated = date;
});
var line = d3.svg.line()
.x(function(d) {
return x( d.LastUpdated);
})
.y(function(d) {
return y(d.CurrentQuantity);
});
var svg = d3.select("#chart2").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.LastUpdated;
}));
y.domain(d3.extent(data, function(d) {
return d.CurrentQuantity;
}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-45)"
});
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('#Resource.Amount');
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
}
chart {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
/*display: none;*/
}
.line {
stroke: rgb(142, 188, 0);
stroke-width: 2px;
stroke-linecap: square;
stroke-linejoin: round;
fill-opacity: 1;
stroke-opacity: 1;
fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<strong>Chart1</strong>
<div id="chart1"></div>
<br>
<strong>Chart2</strong>
<div id="chart2"></div>

Categories

Resources