I'm sure it's a newbie question, but I'm having problems in scaling my area chart correctly to the data. More precisely, the upper line of my area chart never reaches its maximum and I haven't figured out why, so far. For example, the maximum of the y value (FREQ) is 8, but the upper line limit of the line does not fit to that value (it is somewhere between 7 and 8).
Maybe it's due to my padding variable? Maybe it's shifting my axis in the wrong way?
Does anyone can tell me what my mistake is? I would really appreciate it :-)
Here's my code so far:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>Data Growth</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
body {
font: 12px sans-serif;
background: #DFE3DB;
}
.line {
fill: #7c9393;
stroke: #7c9393;
}
.axis path,
.axis line {
fill: none;
stroke: #34363c;
stroke-width: 3px;
shape-rendering: crispEdges;
}
.title {
font-size: 18px;
}
</style>
</head>
<body>
<div id="dataDevelopment"></div>
<script type="text/javascript">
//Data
var data = [{"YEAR":"2000","CL_ID":1,"FREQ":0,"SUMS":0},{"YEAR":"2001","CL_ID":1,"FREQ":1,"SUMS":1},{"YEAR":"2002","CL_ID":1,"FREQ":0,"SUMS":0},{"YEAR":"2003","CL_ID":1,"FREQ":2,"SUMS":3},{"YEAR":"2004","CL_ID":1,"FREQ":1,"SUMS":4},{"YEAR":"2005","CL_ID":1,"FREQ":3,"SUMS":7},{"YEAR":"2006","CL_ID":1,"FREQ":3,"SUMS":10},{"YEAR":"2007","CL_ID":1,"FREQ":1,"SUMS":11},{"YEAR":"2008","CL_ID":1,"FREQ":3,"SUMS":14},{"YEAR":"2009","CL_ID":1,"FREQ":3,"SUMS":17},{"YEAR":"2010","CL_ID":1,"FREQ":2,"SUMS":19},{"YEAR":"2011","CL_ID":1,"FREQ":7,"SUMS":26},{"YEAR":"2012","CL_ID":1,"FREQ":8,"SUMS":34},{"YEAR":"2013","CL_ID":1,"FREQ":3,"SUMS":37},{"YEAR":"2014","CL_ID":1,"FREQ":7,"SUMS":44},{"YEAR":"2015","CL_ID":1,"FREQ":1,"SUMS":45}];
//The graph shown instantly
var width = 800,
height = 500,
padding = 50;
var svg = d3.select("#dataDevelopment")
.append("svg")
.attr("width", width)
.attr("height", height);
var timeFormat = d3.time.format("%Y");
var xMin = d3.min(data, function(d) {return d.YEAR;});
var xMax = d3.max(data, function(d) {return d.YEAR;});
var yMin = d3.min(data, function(d) {return d.FREQ;});
var yMax = d3.max(data, function(d) {return d.FREQ;});
var x = d3.time.scale().domain([timeFormat.parse(xMin) , timeFormat.parse(xMax)])
.range([padding, width - padding]);
var y = d3.scale.linear().domain([yMin, yMax])
.range([height - padding, padding]);
//Axes
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues([timeFormat.parse(xMin) , timeFormat.parse(xMax)]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var lineGraph = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(timeFormat.parse(d.YEAR)); })
.y0(height - padding)
.y1(function(d) { return y(d.FREQ); });
svg.append("path")
.attr("class", "line")
.attr("d", lineGraph(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + (height - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding + ", 0)")
.call(yAxis);
</script>
</body>
</html>
Related
I am new to d3 and am trying to draw mean line through all the bars in the bar chart but not quite able to achieve that. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<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;
}
.line {
fill: none;
stroke: #444;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script>
var data=[
{"letter": "BU", "higher": .08,"lower": .05},
{"letter": "AU", "higher": .05,"lower": .03},
{"letter": "LA", "higher": .04,"lower": .02}
]
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x2 = d3.scale.ordinal()
.rangeBands([0, width], 0);
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 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.forEach(function(d) {
d.higher = +d.higher;
d.lower = +d.lower;
});
x.domain(data.map(function(d) { return d.letter; }));
x2.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.higher; })]);
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.higher); })
.attr("height", function(d) { return height - y(d.higher-d.lower); });
var dataSum = d3.mean(data, function(d) { return (d.higher + d.lower); });
var line = d3.svg.line()
.x(function(d, i) {
return x(d.letter) + i; })
.y(function(d, i) { return y(dataSum/data.length); });
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
</script>
</body>
</html>
The proper code is here'http://jsbin.com/beyakumohi/1/edit?html' . The line should pass through center of each bars but it only happens for the 3rd bar and that too it do not cross it. Is there any mistake in my code.
d3.mean will give you the mean value of the full array. Meaning, that in this case you will get the mean of:
data[0].higher + data[0].lower + data[1].higher + data[1].lower + data[2].higher + data[2].lower
In this case I would say it is more appropiate to edit your line function as following
var line = d3.svg.line()
.x(function(d, i) {
return x(d.letter); })
.y(function(d, i) { return y((d.higher + d.lower) / 2); });
I am able to create a Line Chart using a TSV line chart. Now i want to create a mean value Line parallel to x-axis. Please help how to do it
<!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="//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-%m-%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.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("line.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("Time Difference (sec)");
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>
date close
0 1
19-09-15 11
20-09-15 12
21-09-15 2
22-09-15 20
23-09-15 13
24-09-15 4
25-09-15 4
26-09-15 5
27-09-15 1
28-08-16 32
29-08-16 23
01-08-16 12
02-08-16 5
03-08-16 4
04-08-16 10
05-08-16 20
06-08-16 22
07-08-16 1
08-08-16 3
In regards to why what you have done does not work, you are trying to get an element on your page which is identifiable by:
("document.getElementByID(‘TextBoxProductName’).value = arguments[0]", "John")
You probably dont have an element which has that identifiable trait?
When you want to find an element which has an id, you know its going to be unique, so you can quickly/shortly and directly target it as:
element(by.id('TextBoxProductName'))
// or in shorthand
$(#TextBoxProductName)
to send enter text into it, use sendKeys:
$(#TextBoxProductName).sendKeys('John')
Please let us know if the problem you are having isnt the sending of keys, but rather the targeting of the element and we can work on maybe a solution to do with the popup box
I'm beginner in D3. I would like to know how to include in text letters like č,š,ž..
I included line with utf-8:
<meta charset="utf-8">
I also tried this in the head:
<script type="text/javascript" charset="utf-8" src="D3/d3.js"></script>
Letters like č,š or ž are shown like �. That is the same with letters from .text("Število...") and also with words from loaded file *.csv.
I tried change letter č with code
č
but no success.
What can I do? Please help.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>Slo</title>
<script type="text/javascript" src="D3/d3.js"></script>
<style type="text/css">
.naslov {
fill: #505050;
font: 18px sans-serif;}
.podnaslov {
fill: #777;
font: 12px sans-serif;}
.besedilo {
fill: #777;
font: 8px sans-serif;}
.land {
fill: #ccc;
stroke: #fff;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: .5;}
</style>
</head>
<body>
<script type="text/javascript">
var w = 1000;
var h = 450;
var formatNumber = d3.format(",.0f");
var radius = d3.scale.sqrt()
.domain([0, 1e6])
.range([1, 90]);
//Projekcija
var projection = d3.geo.mercator()
.scale(11000)
.translate([-2480,10270]);
//Path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h)
//Napisi
var naslov = svg.append("text")
.text("PREBIVALSTVO V SLOVENIJI PO NASELJIH")
.attr("class", "naslov")
.attr("x",15).attr("y",30);
var podnaslov = svg.append("text")
.text("LETA 2002 in 2013")
.attr("class", "podnaslov")
.attr("x",15).attr("y",60);
var besedilo1 = svg.append("text")
.attr("class", "besedilo")
.text("Velikost kroga kaže na stevilo prebivalcev v naselju leta 2013.").attr("x",15).attr("dy",100);
var besedilo2 = svg.append("text")
.attr("class", "besedilo")
.text("Prikazani so podatki za naselja, ki so imela leta 2013 vec kot 1300 prebivalcev.").attr("x",15).attr("dy",112);
var besedilo3 = svg.append("text")
.attr("class", "besedilo")
.text("Zadrži miško na krogih in si oglej podatke.").attr("x",15).attr("dy",124);
//Load in GeoJSON data
d3.json("Obstara.geojson", function (data){
svg.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("class","land")
});
//Load mesta
d3.csv("Mesta_02_13.csv", function(error,podatki) {
if (error) return console.error(erorr);
svg.selectAll("circle")
.data(podatki)
.enter()
.append("circle")
.style("fill", function(d) {
if (d.trinajst-d.dva <= 0) {return "#9D5355"}
else { return "#006699"};})
.attr("cx", function(d) {return projection([d.lon, d.lat])[0];})
.attr("cy", function(d) {return projection([d.lon, d.lat])[1];})
.attr("r", function(d) { return radius(d.trinajst); })
.style("stroke","grey")
.style("stroke-width", '0.3px')
.style("opacity", 0.6)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", function(d) {
if (d.trinajst-d.dva <= 0) {return "#9D5355"}
else { return "#006699" };});})
.append("title")
.text(function(d) { return d.name + "\n2002: " + d.dva + "\n2013: " + d.trinajst; })
});
</script>
</body>
I loaded csv file where are also included names with č,š,ž letters:
name,lat,lon,dva,trinajst
Ljubljana,46.0605,14.5166,258873,274826
Maribor,46.5620,15.6482,93847,94809
Celje,46.2524,15.2765,37834,37490
Mengeš,46.1686,14.5731,5557,6202
...
As may others have the same problem:
First you need to change the encoding of the document and save it once in UTF-8 format, and then put your UTF-8 texts inside that document.
Working on learning D3, I'm able to get a version of the following code to work locally (that is pointing to the d3.vs3.js locally). When I change the URL to http://mbostock.github.com/d3/d3.js I get the following error: TypeError: 'undefined' is not an object (evaluating 'data.forEach') in line 49, the line after opening the data2.tsv file.
<!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 type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script>
// modification to use URL reference to D3
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - 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").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = 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 + ")"
);
// Get the data
d3.tsv("data/data.tsv", 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; })]);
svg.append("path") // Add the valueline path.
.attr("d", valueline(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
I plan to use D3 in websites so figuring this out seems very crucial. Thanks in advance.
Francis
Use this script tag to load d3 instead of the one you're using:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
I have a wireshark extract (TSV) with two columns - "date" and "window" like
date window
31:35.6 524288
31:35.6 524288
31:35.6 524288
31:35.6 524288
31:35.6 522024
31:35.6
31:35.6 521452
...
I want to create a timeseries plot of "window" and was using the simple line chart (mbostock’s block #3883245) to start. My index.html has only few edits from the example and results in an error message
[19:12:43.516] TypeError: e is undefined # file:///home/tim/Desktop/test/multiline-2/_attachments/d3.v3.min.js:2
I must be missing something - can you help?
<!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="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("%M:%S.%L").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.window); });
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("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.window = +d.window;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.window; }));
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>
Looks like the error is on line 60:
d3.csv("data.csv", function(error, function() {*your graph stuff here*});
should be:
d3.tsv("data.tsv", function(error, function() {*your graph stuff here*});
so d3 knows that it is working with a .tsv file instead of .csv.
Converting your data file to .csv format should also get rid of this error, just make sure not to implement both fixes.
Hope this helps.