I'm using this snippet to understand how d3.js works.
I changed this line of code -> var parseDate = d3.time.format('%H-%M-%e-%b-%y').parse;
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 1000 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var parseDate = d3.time.format('%H-%M-%e-%b-%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 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/plottingData/first.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
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)
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
</script>
because the file is formatted in this way:
11-30-1-May-12 582.13
10-30-1-Apr-12 382.13
9-30-1-Mar-12 482.13
...
but I'm continuing to view only day-month into x-Axis.
what's wrong?
thanks in advance.
You are parsing the date in correct format, but on X-axis you did not provide the format, on which you want to show date. So just use "xAxis.tickFormat(parseDate)" in your code. Example is here:
d3.svg.axis()
.scale(x)
.orient("bottom").tickFormat(d3.time.format('%H-%M-%e-%b-%y'));
Related
I have trying to add another graph line to show another set of data. I am struggling to add another line of data. the technologies i am using are, D3.js, HTML and CSS.
Could someone help me with adding another line of data into this graph please?
CSS -
<style>
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
and this is my D3.js to create the graph.
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var arrData = [
["2012-10-02",200],
["2012-10-09", 300],
["2012-10-12", 150]];
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").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 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 + ")");
var data = arrData.map(function(d) {
return {
date: parseDate(d[0]),
close: d[1]
};
});
console.log(data);
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);
</script>
Well, that would be really simple, since you already done the job. The working example is here and what I did was simply copying your pieces of code according to the new data arrData2
Given a new data:
var arrData2 = [
["2012-10-02",250],
["2012-10-09", 200],
["2012-10-12", 100]
];
You just have to adjust your data, as you did before:
var data2 = arrData2.map(function(d) {
return {
date: parseDate(d[0]),
close: d[1]
};
});
And add a new line according to data2:
svg.append("path")
.datum(data2)
.attr("class", "line")
.attr("d", line);
Im taking streaming data from sensors and storing them in a mysql database.I want to plot a real time graph using d3js from these streaming data.I have try to do it by loading mysql data into array and try to remove the first element of the array inside a ajax call,all working fine till the old data loading agai n and again making a loop between new data.How can i fix this issue?........I am newbie to javascript and d3js need some expert help here..........
Theses are the codes
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Temperature</title>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="jquery-3.1.1.js"></script>
</head>
<body style="background-color:white;color:#34495e">
<style>
svg {
font: 15px sans-serif;
fill:#0e1cf3;
}
.line {
fill: none;
stroke: #23115a;
stroke-width: 1.5px;
}
.axis path,
.axis line {
fill: none;
stroke: #94e3f7;
shape-rendering: crispEdges;
}
</style>
<script>
var margin = {top: 20, right: 20, bottom: 200, left: 50},
width = 1280 - margin.left - margin.right,
height = 720 - margin.top - margin.bottom;
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 k = [];
// var m = [];
function fetchdata(){
$.ajax({
url: 'data.php',
type: 'post',
success: function(data){
d3.json("data.php", function(error, data) {
data.forEach(function(d) {
d.event = d.event;
d.sensor1 = +d.sensor1;
k.push(d.event)
});
var x = d3.scale.ordinal()
.rangeRoundBands([0, width])
.domain(k);
var y = d3.scale.linear()
.range([height, null])
.domain([0, d3.max(data, function(d) { return d.sensor1; })])
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(5);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.70em")
.attr("dy", ".70em")
.attr("transform", function(d) {
return "rotate(-65)"
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.event); })
.y(function(d) { return y(d.sensor1); })
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
});
d3.selectAll("path").remove();
d3.selectAll("line").remove();
d3.selectAll("g .x.axis").remove();
d3.selectAll("g .y.axis").remove();
k.shift()
},
complete:function(data){
setTimeout(fetchdata,700);
}
});
}
$(document).ready(function(){
setTimeout(fetchdata,700);
});
</script>
</body>
</html>
d3 noob here.
I'd like to draw something like this:
(http://bl.ocks.org/mbostock/3883195)
But with a heat aspect, sort of like this:
Code (from above link):
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.area {
fill: steelblue;
}
</style>
<body>
<center>
<div>
<script src="http://d3js.org/d3.v3.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 parseDate = d3.time.format("%d-%b-%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.date); })
.y0(height)
.y1(function(d) { return y(d.close); });
var svg = d3.select("div").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", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
// .attr("style", "stroke: #001")
.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 ($)");
});
</script>
</div>
</center>
</body>
Perhaps changing the area variable in someway? I could add another column to the data, say, color. But how would I apply the color to the "vertical line" of each day?
Thoughts? Thanks in advance!
I am having a formatting issue with a d3 graphical representation.
The X axis is entered in years, which I thought would be easier to treat as any other number (instead of as dateFormat... %Y )
The output is automatically (?) adds the comma for the thousandths place- my assumption.
Is there a way to keep this the 4 dig int that it is?
(this is my first foray into HTML, CSS, JS and d3-- thank you for empathy/comments)
Thanks.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
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;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 40, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0, width]);
var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxisLeft = d3.svg.axis().scale(y0)
.orient("left").ticks(5);
var yAxisRight = d3.svg.axis().scale(y1)
.orient("right").ticks(5);
var valueline = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y0(d.freq); });
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y1(d.fn); });
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("duallines2.csv", function(error, data) {
data.forEach(function(d) {
d.year = +(d.year);
d.freq = +d.freq;
d.fn = +d.fn;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.year; }));
y0.domain([0, d3.max(data, function(d) {
return Math.max(d.freq); })]);
y1.domain([0, d3.max(data, function(d) {
return Math.max(d.fn); })]);
svg.append("path") // Add the valueline path.
.attr("d", valueline(data));
svg.append("path") // Add the valueline2 path.
.style("stroke", "red")
.attr("d", valueline2(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style("fill", "steelblue")
.call(yAxisLeft);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.style("fill", "red")
.call(yAxisRight);
});
</script>
</body>
The datafile looks like this:
"duallines2.csv"
year,freq,fn
1950,58.13,3.41
1951,53.98,4.55
1952,67.00,6.78
1953,89.70,7.85
1954,99.00,8.92
1955,130.28,9.92
1956,166.70,10.13
1957,234.98,12.23
1958,345.44,13.45
1959,443.34,16.04
1960,543.70,18.03
1961,580.13,21.02
1962,605.23,22.34
1963,622.77,20.15
1964,626.20,21.26
1965,628.44,31.04
1966,636.23,35.04
1967,633.68,41.02
1968,624.31,43.05
1969,629.32,46.03
1970,618.63,51.03
1971,599.55,53.42
1973,609.86,57.82
1974,617.62,59.01
1975,614.48,56.03
1976,606.98,58.01
You can define your own format -- in this case making each xAxis tick label an integer -- and then tell the xAxis to use that format:
var format = d3.format("d");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.tickFormat(format); // <----- tell the xAxis to use your custom formatter
And here's the updated output you'll get:
See the docs on formatting numbers here.
i am using the d3 for making the bar graph . From example i see that they use the tsv file for the data . In my case i have the dynamic data . Here is the code and i want to use the var data1 to make the graph
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<div id="bar"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var $window = $(window);
var wWidth = $window.width();
var wHeight = $window.height();
var margin = {top: 10, right: 0, bottom: 30, left: 40},
width = 300 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
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")
.tickFormat(formatPercent);
//var data = [[1,1],[2,3],[3,2],[4,5],[5,4]];
var svg = d3.select("#bar").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 data1 = [
{letter:"A",frequency:"58.13"},
{letter:"B",frequency:"53.98"},
{letter:"C",frequency:"67.00"},
{letter:"D",frequency:"89.70"},
{letter:"E",frequency:"99.00"}
];
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
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("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
data.tsv
letter frequency
A .08167
B .01492
C .02780
D .04253
E .12702
F .02288
G .02022
H .06094
I .06973
J .00153
Change the variable name,
data1 To data
And remove these line
1. d3.tsv("data.tsv", type, function(error, data) {
2. });
See DEMO Here