Peterson Peterson - 12 days ago 5
AngularJS Question

Plotting line chart with date vs frequency in d3 by angular

I am trying to make a simple chart in d3, where I am plotting date (as string) vs frequency. But, I am getting error. Can someone help me out?

SNIPPET:

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

<svg width="1000" height="500"></svg>

<script>
//module declaration
var app = angular.module('myApp',[]);

//Controller declaration
app.controller('myCtrl', function($scope){

//custom data
var data = [
{x: "2016-01-10", y: "10.02"},
{x: "2016-02-10", y: "15.05"},
{x: "2016-03-10", y: "50.02"},
{x: "2016-04-10", y: "40.01"},
{x: "2016-05-10", y: "10.08"},
{x: "2016-06-10", y: "29.07"},
{x: "2016-07-10", y: "45.02"}
];

var mySVG = d3.select("svg");
var svgWidth = mySVG.attr("width");
var svgHeight = mySVG.attr("height");
var margins = {top: 20,right: 20,bottom: 20,left: 50};

var xRange = d3.scale.linear()
.range([margins.left, svgWidth - margins.right])
.domain([d3.min(data, function (d) {return d.x;}), d3.max(data, function (d) {return d.x;}) ]);

var yRange = d3.scale.linear()
.range([svgHeight - margins.top, margins.bottom])
.domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y;}) ]);

var xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true);

var yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);


mySVG.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (svgHeight - margins.bottom) + ")")
.call(xAxis);

mySVG.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margins.left) + ",0)")
.call(yAxis);

var lineFunc = d3.svg.line()
.x(function (d) {
return xRange(d.x);
})
.y(function (d) {
return yRange(d.y);
})
.interpolate('linear');

mySVG.append("svg:path")
.attr("d", lineFunc(data))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
});

</script>

</body>

</html>


** Error: **

enter image description here

var xRange = d3.scale.linear() <<<<< Error line


Please, help me in making the line chart along with x and y axis with date and frequency on them plotted. Kindly, help out.

Updated Snippet:

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

<svg width="1000" height="500"></svg>

<script>
//module declaration
var app = angular.module('myApp',[]);

//Controller declaration
app.controller('myCtrl', function($scope){

//custom data
var data = [
{x: "2016-01-10", y: "10.02"},
{x: "2016-02-10", y: "15.05"},
{x: "2016-03-10", y: "50.02"},
{x: "2016-04-10", y: "40.01"},
{x: "2016-05-10", y: "10.08"},
{x: "2016-05-10", y: "29.07"},
{x: "2016-05-10", y: "45.02"}
];

var mySVG = d3.select("svg");
var svgWidth = mySVG.attr("width");
var svgHeight = mySVG.attr("height");
var margins = {top: 20,right: 20,bottom: 20,left: 50};

var xRange = d3.scaleLinear()
.range([margins.left, svgWidth - margins.right])
.domain([d3.min(data, function (d) {return d.x;}), d3.max(data, function (d) {return d.x;}) ]);

var yRange = d3.scaleLinear()
.range([svgHeight - margins.top, margins.bottom])
.domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y;}) ]);

var xAxis = d3.axisBottom(xRange)
.scale(xRange)
.tickSize(5);

var yAxis = d3.axisLeft(yRange)
.scale(yRange)
.tickSize(5)
.orient("left");


mySVG.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (svgHeight - margins.bottom) + ")")
.call(xAxis);

mySVG.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margins.left) + ",0)")
.call(yAxis);

var lineFunc = d3.line()
.x(function (d) {
return xRange(d.x);
})
.y(function (d) {
return yRange(d.y);
})
.curve(d3.curveLinear);

mySVG.append("svg:path")
.attr("d", lineFunc(data))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
});

</script>

</body>

</html>


New Error:

enter image description here

Answer

You're using d3 v4.x, not the old v3. Thus, you have to modify your code.

These are the necessary changes:

var xRange = d3.scaleLinear()//keep the domain and range

var yRange = d3.scaleLinear()//keep the domain and range

var xAxis = d3.axisBottom(xRange)
    .tickSize(5);

var yAxis = d3.axisLeft(yRange)
    .tickSize(5);

var lineFunc = d3.line()//etc...

For the line generator, change interpolate for curve.

Also, get rid of tickSubdivide.

EDIT: you have additional problems in your fiddle: the values are strings, but they should be numbers. Besides that, if you're using dates, you'll have to parse them.

Here is your fiddle, without using the dates: https://jsfiddle.net/gerardofurtado/fawe63t8/

Comments