In the following line chart, though the chart is plotted properly but the x and y axis with labels is not plotted properly. Can someone help me out with that?
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="500" height="300"></svg>
<script>
//module declaration
var app = angular.module('myApp',[]);
//Controller declaration
app.controller('myCtrl', function($scope){
var data = [
{x: "2016-01-10", y: "10.02"},
{x: "2016-02-10", y: "15.02"},
{x: "2016-03-10", y: "50.02"},
{x: "2016-04-10", y: "40.02"},
{x: "2016-05-10", y: "10.02"}
];
var parseTime = d3.timeParse("%Y-%m-%d");
var xScale = d3.scaleTime().range([0,500]).domain(d3.extent(data, function(d){ return parseTime(d.x)}));
var yScale = d3.scaleLinear().range([300,0]).domain([0,50]);
//Plotting domain on x and y axis
var xAxis = d3.scaleBand().rangeRound([0, 500]).padding(0.6);
var yAxis = d3.scaleLinear().rangeRound([300, 0]);
xAxis.domain(data.map(function(d) { return d.letter; }));
yAxis.domain([0, d3.max(data, function(d) { return d.frequency; })]);
//Final printing of elements on svg
//Plortting of x-axis
d3.select("svg")
.append("g")
.attr("transform", "translate(0," + 300 + ")")
.call(d3.axisBottom(xAxis));
//Plotting of y-axis
d3.select("svg")
.append("g")
.call(d3.axisLeft(yAxis).ticks(10, "%"));
//the line function for path
var lineFunction = d3.line()
.x(function(d) {return xScale(parseTime(d.x)); })
.y(function(d) { return yScale(d.y); })
.curve(d3.curveLinear);
//Main svg container
var mySVG = d3.select("svg");
//defining the lines
var path = mySVG.append("path");
//plotting lines
path
.attr("d", lineFunction(data))
.attr("stroke",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; })
.attr("stroke-width", 2)
.attr("fill", "none");
});
</script>
</body>
</html>
RESULT:
ISSUES:
The X-Axis is not coming
Labels on X-Axis missing
Lables on Y-Axis missing
Please, help me out to get the chart properly.
Regarding the y axis: you're not translating it from the origin position. It should be:
d3.select("svg")
.append("g")
.attr("transform", "translate(30, 0)")//30 here is just an example
.call(d3.axisLeft(yAxis).ticks(10, "%"));
Regarding the x axis: you're translating it all the way down to the height. It should be less than that:
d3.select("svg")
.append("g")
.attr("transform", "translate(0," + (height - 30) + ")")//30 is just an example
.call(d3.axisBottom(xAxis));
In a nutshell: set the margins properly and translate the axis according to those margins.
PS: nothing will show up in the ticks, because you don't have letter or frequency in your data.
Related
I'm following this example by Mike himself. The timeFormat in the example is ("%d-%b-%y"), but using my own data uses just the year. I've made all the necessary changes (I think). The y-axis shows, but the x-axis doesn't. There are also no errors showing, so I'm not sure where to go. Below is my code. Thanks!
<!DOCTYPE html>
<meta charset="utf-8">
<p></p>
<style>
.axis--x path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<!--We immediately define the variables of our svg/chart-->
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// Now we give our svg some attributes. We use conventional margins as set out by Mike Bostock himself.
// Sets width and height minus the margins.
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
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 + ")");
// Here we set out the time format: date-month-year.
//var parseTime = d3.timeParse("%d-%b-%y");
var formatTime = d3.timeFormat("%Y");
formatTime(new Date); // "2015"
// Now we set our axis. X is according to the time, and y is linear.
// We use rangeRound to round all the values to the nearest whole number.
// We don't use rangeBands or rangePoints as we're not creating a bar chart or scatter plot.
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
// Now we tell what we want our line to do/represent.
// x is the date, and y is the close price.
var line = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
});
// This is where we load our tsv file.
d3.tsv("/LineCharts/Line Chart 2 - MO Capital Punishment/data/data.tsv", function(d) {
d.date = formatTime(d.date);
d.close = +d.close;
return d;
}, function(error, data) {
if (error) throw error;
// The .extent function returns the minimum and maximum value in the given array.
// Then, function(d) { return d.date; } returns all the 'date' values in 'data'.
// The .domain function which returns those maximum and minimum values to D3 as the range for the x axis.
x.domain(d3.extent(data, function(d) {
return d.date;
}));
//Same as above for the x domain.
y.domain(d3.extent(data, function(d) {
return d.close;
}));
// Note that we use attr() to apply transform as an attribute of g.
// SVG transforms are quite powerful, and can accept several different kinds of transform definitions, including scales and rotations.
// But we are keeping it simple here with only a translation transform, which simply pushes the whole g group over and down by some amount, each time a new value is loaded onto the page.
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Doing the same as above but for the y axis.
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
//This is where we append(add) text labels to our y axis.
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text("Total");
g.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
</script>
I am making a line graph for a set of data regarding letter vs frequency. I have made proper code for x and y axis, but while plotting line I am getting error and not able to plot the line-graph. Can someone help fix the issue?
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/3.1.1/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></svg>
<script>
//module declaration
var app = angular.module('myApp',[]);
//Controller declaration
app.controller('myCtrl',function($scope){
$scope.svgWidth = 800;//svg Width
$scope.svgHeight = 500;//svg Height
//Data in proper format
var data = [
{"letter": "A","frequency": "5.01"},
{"letter": "B","frequency": "7.80"},
{"letter": "C","frequency": "15.35"},
{"letter": "D","frequency": "22.70"},
{"letter": "E","frequency": "34.25"},
{"letter": "F","frequency": "10.21"},
{"letter": "G","frequency": "7.68"},
];
//removing prior svg elements ie clean up svg
d3.select('svg').selectAll("*").remove();
//resetting svg height and width in current svg
d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight);
//Setting up of our svg with proper calculations
var svg = d3.select("svg");
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;
//Plotting our base area in svg in which chart will be shown
var g = svg.append("g");
//shifting the canvas area from left and top
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//X and Y scaling
var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleBand().rangeRound([height, 0]).padding(0.4);
//Feeding data points on x and y axis
x.domain([0, d3.max(data, function(d) { return +d.frequency; })]);
y.domain(data.map(function(d) { return d.letter; }));
//Final Plotting
//for x axis
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
//for y axis
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end");
//the line function for path
var lineFunction = d3.line()
.x(function(d) {return xScale(d.x); })
.y(function(d) { return yScale(d.y); })
.curve(d3.curveLinear);
//defining the lines
var path = g.append("path");
//plotting lines
path
.attr("d", lineFunction(data))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
});
</script>
</body>
</html>
ERROR:
NEW ERROR:
Look at the console: you don't have a xScale or a yScale.
So, the line generator should be:
var lineFunction = d3.line()
.x(function(d) {return x(d.frequency); })
.y(function(d) { return y(d.letter); })
.curve(d3.curveLinear);
Besides that, frequency is a string, not a number. So, it's a good idea turning it into a number. Write this right after your data variable:
data.forEach(function(d){
d.frequency = +d.frequency;
});
Note: it's a good practice defining your variable names properly, with descriptive names, like xScale, yAxis, chartLegend or formatNumber... Look at your line generator: you have two different x in a single line. If you don't take care, you'll mix them.
If you want to use xScale and yScale , you need to define these functions. Syntax is given below (ignore values):
Below code is for d3 version 3
me.xscale = d3.scale.linear() // for horizontal distances if using for 2D
.domain([0, 500])
.range([0, 700]);
me.yscale = d3.scale.linear() // for vertical distances if using for 2D
.domain([0, 600])
.range([0, 200]);
These functions are used to define mapping of a values in one range to values in other range.
e.g - Suppose you want draw a graph on your browser screen. And you want assume that width 500px on your browser screen should be counted as 500 on your graph.
You need to define xScale as above . In this case , this function will map every value in domain (0-500) to unique value in range (0-700) and vice versa.
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: **
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:
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/
This has the expected results I want but when I import the code into my HTML file as a script it doesn't show anything at all.
var PUBLIC = [50,40,10];
var NONPROFIT = [30,40,30];
var FOR_PROFIT = [70,15,15];
var data = [
{"key":"PUBLIC", "pop1":PUBLIC[0], "pop2":PUBLIC[1], "pop3":PUBLIC[2]},
{"key":"NONPROFIT", "pop1":NONPROFIT[0], "pop2":NONPROFIT[1], "pop3":NONPROFIT[2]},
{"key":"FORPROFIT", "pop1":FOR_PROFIT[0], "pop2":FOR_PROFIT[1], "pop3":FOR_PROFIT[2]}
];
var n = 3, // Number of layers
m = data.length, // Number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) { return d.key; }),
// Go through each layer (pop1, pop2 etc, that's the range(n) part)
// then go through each object in data and pull out that objects's population data
// and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d)
{
var a = [];
for (var i = 0; i < m; ++i)
{
a[i] = { x: i, y: data[i]['pop' + (d+1)] };
}
return a;
})),
// The largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
// The largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
var margin = {top: 40, right: 10, bottom: 20, left: 50},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;
var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([2, height], .08);
var x = d3.scale.linear()
.domain([0, yStackMax])
.range([0, width]);
var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);
var svg = d3.select("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 layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
.tickValues(labels)
.orient("left");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
I believe I have all the required libraries imported and then some:
<!-- D3 Library -->
<script src='https://d3js.org/d3.v3.min.js' charset='utf-8'></script>
<!-- jQuery Mobile -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- jQuery Main -->
<script src='https://code.jquery.com/jquery-2.2.3.min.js' charset='utf-8'></script>
While the code to get my variables are a bit simplified (i.e. plainly setting my arrays) they are the same format as what is put within the data array.
Furthermore, this example does not work within CodePen either when I import everything that Tributary uses for its base libraries. While, again, this isn't 100% of the code I have going into the creation a much simpler working example on Tributary does not work on CodePen.
D3 has done nothing but kick my butt these past few weeks and I'm in need of some guidance. Thanks.
You need to wait for the page to be fully loaded or your can put the code before the closing </body> tag.
Solution1:
$(function() {
//Put your code here;
});
Solution2:
<body>
<svg></svg>
<script>
//your code here
</script>
</body>
Demo: https://jsfiddle.net/iRbouh/ag6p4kkg/
I have a line chart and the full array of data is attached to the line. I want to change from using the value column to the pct (percent) column in the data. Is there a way of doing this in place, ie. using the values already in the DOM without passing it a new set of data?
as far as I've got - http://bl.ocks.org/3099307
var width = 700, // width of svg
height = 400, // height of svg
padding = 100; // space around the chart, not including labels
var data=[{"date":new Date(2012,0,1), "value": 3, 'pct': 55},
{"date":new Date(2012,0,3), "value": 2, "pct": 30 },
{"date":new Date(2012,0,12), "value": 33, "pct": 10},
{"date":new Date(2012,0,21), "value": 13, "pct": 29},
{"date":new Date(2012,0,30), "value": 23, "pct": 22}];
var x_domain = d3.extent(data, function(d) {
return d.date; }),
y_domain = d3.extent(data, function(d) { return d.value; });
// define the y scale (vertical)
var yScale = d3.scale.linear()
.domain(y_domain)
.range([height - padding, padding]); // map these top and bottom of the chart
var xScale = d3.time.scale()
.domain(x_domain)
.range([padding, width - padding]); // map these sides of the chart, in this case 100 and 600
// define the y axis
var yAxis = d3.svg.axis()
.orient("left")
.scale(yScale);
// define the x axis
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(xScale);
// create the svg
var div = d3.select("body");
div.select("svg").remove();
var vis = div.append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + padding + "," + padding + ")");
// draw y axis with labels and move in from the size by the amount of padding
vis.append("g")
.attr("class", "axis yaxis")
.attr("transform", "translate("+padding+",0)")
.call(yAxis);
// draw x axis with labels and move to the bottom of the chart area
vis.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis);
// DRAW LINES
var line = d3.svg.line()
.x(function(d) {
return xScale(d.date); })
.y(function(d) {
return yScale(d.value); })
.interpolate("basis");
vis.selectAll(".lines")
.data([data])
.enter()
.append("svg:path")
.attr("d", line)
.attr("class", "lines");
function rescale() {
// change the y axis to show percentage
yScale.domain([0,100]) // redraw as percentage outstanding
vis.select(".yaxis")
.transition().duration(1500).ease("sin-in-out") // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
.call(yAxis);
What happens here?
// now redraw the line to use pct
line.y(function(d) {
return yScale(d.pct); });
vis.selectAll("lines")
.transition()
.duration(500)
.ease("linear");
}
Your data is already joined, so you just need to update your selection:
var yPctScale = d3.scale.linear()
.domain([0, 100])
.range([height - padding, padding]);
var pct_line = d3.svg.line()
.x(function(d) {
return xScale(d.date); })
.y(function(d) {
return yPctScale(d.pct); })
.interpolate("basis");
vis.selectAll(".lines")
.transition().duration(1500).ease("sin-in-out")
.attr("d", pct_line);