Does anyone know how I would add a grid to the background of a d3 line graph I have made and does anyone know how I would make my line graph curve rather than be rather rigid like it is now. the code below is for the line graph and it all works with the data file I have I just need it to have a grid on the background and be curved rather than how it is now. I also need to have the y axis display a percent rather than a decimal
any help would be appreciated.
JS, CSS and HTML --
var margin = { top: 20 , right: 20, bottom: 30 , left: 40} ,
width= 960 - margin.left - margin.right ,
height = 500 - margin.top - margin.bottom;
var y = d3.scaleLinear()
.range([height, 0]) ; //remember: up / down are flipped
var x = d3.scaleBand()
.range([0, width]).padding([0.1]); //the last peramter adds padding
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(event,d) {
return "<strong>Frequency:</strong> <span style='color: rgba(223,222,79,255)'>" + d.frequency + "</span>";
})
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 + ")");
svg.call(tip);
d3.csv("data/data.csv").then(function(data) {
x.domain(data.map(function(d){return d.letter;}));
y.domain([0, d3.max(data, function(d){return d.frequency;})]);
// Remember to add all data dependant calls in here
var xAxis = d3.axisBottom().scale(x); // Positions the Lables Under the xAxis
var yAxis = d3.axisLeft().scale(y); // positions the lables on the left of the yAxis
var line = d3.line()
.x(function(d) { return x(d.letter); })
.y(function(d) { return y(d.frequency); })
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.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "circle")
.attr("cx", function(d) {return x (d.letter);})
.attr("cy", function(d) {return y (d.frequency);})
.attr("r", 4)
.attr("width", x.bandwidth())
.attr("height", function(d) {return height - y (d.frequency);})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 + (margin.top / 2))
.attr("text-anchor", "middle")
.text("Relative Frequence of Letters in the English Alphabet") ;
});
.bar {
fill:rgba(55,125,34,255);
}
.bar:hover {
fill: rgba(55,125,34,255);
}
.axis--x path {
display: none;
}
.line {
fill: none;
stroke: rgba(55,125,34,255);
stroke-width: 3px;
}
.circle {
fill: rgba(55,125,34,255);
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
font-family: 'Courier New', Courier, monospace;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<svg class="chart"></svg>
<script type="text/javascript"src="js/d3/d3.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6#4/d3-tip.min.js"></script>
<script type="text/javascript"src="js/myscript1.js"></script>
</body>
</html>
You can add gridlines to an axis by using axis.tickSize([size]) or axis.tickSizeInner([size]).
Ex:
var xAxis = d3.axisBottom().scale(x).tickSize(.width);
As for the lines, you can make them curves by using the .curve method of the line, eg:
var line = d3.line()
.x(function(d) { return x(d.letter); })
.y(function(d) { return y(d.frequency); })
.curve(d3.curveBasis)
Check these pages for the full reference:
https://github.com/d3/d3-axis
https://github.com/d3/d3-shape
Related
I am trying to make a stacked bar chart for a simple dataset (Below you can find codes and the data).
For the bar my mouse hovers on, I try to use CSS hover effect to change the color of the bar (A rect svg element with a class of .bar), and use d3-tip to show a tooltip displaying the region name that bar belongs.
Problems I am having are:
1 - The CSS hover effect is not working at all. (Please find the style sheet below)
2 - the tooltip is showing, but only if I move my mouse cursor from under the bar to enter it. If I move my mouse cursor from left/right/top of the bar, the "mouseover" seems like not being detected. When it is not detected, however if you click on the bar, it will be detected and tooltip will show.
3 - The tooltip is supposed to show the data for "d.State" (which is the region's abbreviation text), but it gives me undefined. "d.State" is working fine with the bar chart itself though - the axis ticks are created using these data.
The stacked bar is made based on this one: https://bl.ocks.org/mbostock/3886208
The tooltip and hover effect is based on this one: http://bl.ocks.org/Caged/6476579
The index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<script type="text/javascript" src="viz.js"></script>
</body>
</html>
The viz.js:
// begin of the js file
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 320 - margin.left - margin.right,
height = 320 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#7b6888", "#a05d56", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
//define tooltip
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([0, 0])
.html(function(d) {
return "<strong>Region:</strong> <span style='color:red'>" + d.State + "</span>";
});
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 + ")");
//call tooltip
svg.call(tip);
d3.csv("data.csv", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.ages[d.ages.length - 1].y1;
});
data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.State; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("font-size", 7);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Number of Organizations");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.State) + ",1)"; });
state.selectAll(".bar")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("class", "bar")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); })
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
// end of the js file
The style.css:
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar:hover {
fill: steelblue;
pointer-events: all;
}
.x.axis path {
display: none;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
The data.csv:
State,Non Profit,For Profit,Developer Group,Other
EP,28,142,15,16
EC,81,292,39,22
LC,73,91,23,9
MN,3,5,2,1
NA,102,561,26,19
SA,11,49,9,4
SS,28,10,10,3
If there is any part not clear please let me know. I am new to d3 and stackoverflow. Thanks!
The CSS hover effect is not working at all.(not was missing I guess ?)
The problem was it was already filled using d3. To override it just add !important to on hover fill
fill: steelblue !important;
The tooltip is showing, but only if I move my mouse cursor from under the bar to enter it. If I move my mouse cursor from left/right/top of the bar.(I didn't face any issue with your code ?)
I am not sure what exactly is the problem but, my guess is that, onmouseover will work only when you hover on it. So if the mouse pointer is already on the graph before it was generated, it won't show the tooltip.
The tooltip is supposed to show the data for "d.State".
The problem here is the State data is not attached to the element i.e, d.ages doesn't contain state value. Just attach the state value while binding data.
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 320 - margin.left - margin.right,
height = 320 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#7b6888", "#a05d56", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
//define tooltip
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([0, 0])
.html(function(d) {
return "<strong>Region:</strong> <span style='color:red'>" + d.State + "</span>";
});
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 + ")");
//call tooltip
svg.call(tip);
d3.csv("data.csv", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.ages[d.ages.length - 1].y1;
});
data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.State; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("font-size", 7);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Number of Organizations");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.State) + ",1)"; });
state.selectAll(".bar")
.data(function(d) {
for(var l = 0 ; l < d.ages.length ; l++) {
d.ages[l].State = d.State;
}
return d.ages; })
.enter().append("rect")
.attr("class", "bar")
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); })
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar:hover {
fill: steelblue !important;
pointer-events: all;
}
.x.axis path {
display: none;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<script type="text/javascript" src="viz.js"></script>
</body>
</html>
I am having some issues with tooltips for my bar graph. For each stopname column, there should be a corresponding value of boarding and alightings shown in the tooltip, however, I am getting undefined values like here
Here is my code:
<!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: orange;
}
.bar:hover {
fill: orangered ;
}
.x.axis path {
display: none;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 40, right: 20, bottom: 300, left: 40},
width = 1250 - margin.left - margin.right,
height = 750 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["orange", "orangered"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Stop:</strong> <span style='color:red'>" + d.stopname + "</span>" + "<br><br><strong>Mean no. of boardings:</strong> <span style='color:red'>" + d.meanboardings + "</span>"+ "<br><br><strong>Mean no. of alightings:</strong> <span style='color:red'>" + d.meanalightings + "</span>";
})
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 + ")");
svg.call(tip);
d3.tsv("data.tsv", function(d){
return {
stopname: d.stopname,
meanboardings: +d.meanboardings,
meanalightings: +d.meanalightings
};
}, function(error, data) {
console.log(data);
var dataset = d3.keys(data[0]).filter(function(key) { return key !== "stopname"
});
data.forEach(function(d) {
d.passengers = dataset.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.stopname; }));
x1.domain(dataset).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.passengers, function(d) { return d.value; }); })]);
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", "-.5em")
.attr("transform", function(d) {
return "rotate(-90)"
});
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("Mean no. of boardings and alightings");
var stopname = svg.selectAll(".stopname")
.data(data)
.enter().append("g")
.attr("class", "stopname")
.attr("transform", function(d) { return "translate(" + x0(d.stopname) + ",0)"; });
stopname.selectAll("rect")
.data(function(d) { return d.passengers; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
var legend = svg.selectAll(".legend")
.data(dataset.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.name); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
});
function type(d) {
d.data = +d.data;
return d;
}
</script>
TSV file:
stopname maxboardings meanboardings minboardings varboardings maxalightings meanalightings minalightings varalightings maxload meanload minload varload noofbuses
The Boardwalk Terminal (3908) 7 2.571428571 0 6.952380952 0 0 0 0 7 2.571428571 0 6.952380952 7
Highview / Sugar Maple (3329) 2 0.333333333 0 0.666666667 1 0.166666667 0 0.166666667 6 3 0 6.4 6
Highview / Highview Pl (3330) 0 0 0 0 1 0.166666667 0 0.166666667 5 2.833333333 0 5.366666667 6
....
Any help is appreciated, thank you!
You are getting undefined because you are using an undefined value for generating tooltip text.
In your html function, the data-object associated d you get for every rectangle/bar is of following format:
{name: "meanlightings", value: <some_value>}
It does not contain the stopname property and will only contain value for one of the fields in the original dataset.
You will have to rewrite the html callback as
.html(function(d) {
return "<strong>" + d.name + " :</strong> <span style='color:red'>" + d.value + "</span>";
})
However, if you want to show more properties, you will have to change the data that you are binding to rectangles.
I have a simple stacked bar chart :
The code is here.
I would like to have scroll-bar on the axis but as you can see in the link the scroll appears for the div container with the help of CSS.
But i need something like this chart with scroll!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.goquery.min.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: #BDBDBD;
}
.axis text {
font-family: 'Open Sans regular', 'Open Sans';
font-size: 13px;
}
.y.axis{
direction: ltr;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
.rect {
stroke: lightgrey;
fill-opacity: 0.6;
}
.wrapperDiv {
Width: 984px;
height: 35px;
border: thin solid black;
#margin-top: 36px;
#margin-bottom: 48px;
#margin-right: 20px;
#margin-left: 0px;
}
.divChart {
float:left;
font-size:13px;
color : #424242;
font-family: 'Open Sans regular', 'Open Sans';
#border: thin solid white;
margin-top: -0px;
#margin-bottom: 48px;
#margin-right: 150px;
margin-left: 50px;
#background-color: lightgrey;
width: 984px;
height: 500px;
#padding: 25px;
border: thin solid navy;
#margin: 25px;
#max-height:500px;
overflow-y:scroll;
direction: rtl;
}
</style>
</head>
<body>
<div class="divChart" id="wrapper-chart">
<div id ="chartID" ></div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script><script>
<script>
var dataset = [{"key":"Completion","values":[{"name":"Module 1","value":0},{"name":"Module 2","value":0},{"name":"Module 3","value":0},{"name":"Module 4","value":0},{"name":"Module 5","value":0},{"name":"Module 6","value":0},{"name":"Module 7","value":0},{"name":"Module 8","value":0.56},{"name":"Module 9","value":13.24},{"name":"Module 10","value":12.66}]},{"key":"NonCompletion","values":[{"name":"Module 1","value":100},{"name":"Module 2","value":100},{"name":"Module 3","value":100},{"name":"Module 4","value":100},{"name":"Module 5","value":100},{"name":"Module 6","value":100},{"name":"Module 7","value":100},{"name":"Module 8","value":99.44},{"name":"Module 9","value":86.76},{"name":"Module 10","value":87.34}]}];
function intChart(chartID, dataset) {
var margins = {top: 20, right: 20, bottom: 30, left: 120};
var width = 880 - margins.left -margins.right;
var height = 5250- margins.top - margins.bottom;
var old_width = width,old_height= height;
var module_fixed = 80;
height = Math.floor((dataset[0].values.length * height)/module_fixed)
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1,.1)
var y = d3.scale.linear().rangeRound([height, 0], .1);
var series = dataset.map(function(d) {
return d.key;
});
dataset = dataset.map(function(d) {
return d.values.map(function(o, i) {
// Structure it so that your numeric
// axis (the stacked amount) is y
return {
y: o.value,
x: o.name
};
});
});
var stack = d3.layout.stack();
stack(dataset);
var dataset = dataset.map(function(
group) {
return group.map(function(d) {
// Invert the x and y values, and y0 becomes x0
return {
x: d.y,
y: d.x,
x0: d.y0
};
});
});
var xMax = d3.max(dataset, function(
group) {
return d3.max(group, function(d) {
return d.x + d.x0;
});
});
var xScale = d3.scale.linear()
.domain([0, xMax])
.range([0, width]);
var moduleName = dataset[0]
.map(function(d) {
return d.y;
});
var yScale = d3.scale.ordinal()
.domain(moduleName)
.rangeRoundBands([height,0]);
var svg = d3.select('#chartID')
.append('svg')
.attr("width", width + margins.left +
margins.right)
.attr("height", height + margins.top +
margins.bottom)
.append('g')
.attr('transform', 'translate(60,' + margins.top +
')');
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(2)
.tickSize(0)
.tickPadding(20)
.tickFormat(function(d) {
return d + "%";
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.tickSize(0);
var colours = d3.scale.ordinal().range(
["#8bc34a", "#ff8a65"]);
var groups = svg.selectAll('g')
.data(dataset)
.enter()
.append('g').attr('class', 'stacked')
.style('fill', function(d, i) {
return colours(i);
});
var rects = groups.selectAll(
'stackedBar')
.data(function(d, i) {
return d;
})
.enter()
.append('rect')
.attr('class', 'stackedBar')
.attr('x', function(d) {
return xScale(d.x0);
})
.attr('y', function(d, i) {
return yScale(d.y);
})
.attr('height', 48)
.attr('width', 0)
rects.transition()
.delay(function(d, i) {
return i * 50;
})
.attr("x", function(d) {
return xScale(d.x0);
})
.attr("width", function(d) {
return xScale(d.x);
})
.duration(3000);
//Added
x.domain(dataset.map(function(d) {
return d.value;
}));
y.domain([0, d3.max(dataset, function(
d) {
return d.name;
})]);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' +height + ')')
.call(xAxis)
.append("text")
.attr("transform", "rotate(360)")
.attr("y",10)
.attr("x", 140)
.attr("dy", ".30em")
.text("Percentage of Students");
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.5em")
.attr("dy", ".15em")
.attr("y", "-")
.attr("opacity", 1)
.attr("transform", function(d) {
return "rotate(-40)"
})
// Draw Y-axis grid lines
svg.selectAll("line.y")
.data(y.ticks(2))
.enter().append("line")
.attr("class", "y")
.attr("x1", 0)
.attr("x2", 450)
.attr("y1", y)
.attr("y2", y)
.style("stroke", "#ccc");
}
$(document).ready(function(){
intChart("chartID", dataset);
});
</script>
Would appreciate any help.
Thanks in advance.
I don't think this can be done using D3 only. If you want to use CSS, you need to fix the position of the x-axis. You can add a separate DIV and SVG container for the X axis (these are not scrollable), and the rest of the chart in another.
I modified you code to do this see here. Please note that you code needs a lot of cleaning, as there are several non-functional parts that makes it really confusing.
The modifications are as follows:
HTML
Added a new DIV (xaxis)
<div id="wrapper-chart">
<div class="divChart" id="chartID"></div>
<div id="xaxis"></div>
</div>
CSS
Added styling for the new div (same as divChart but without the scrolling)
#xaxis {
float: left;
font-size: 13px;
color: #424242;
font-family: 'Open Sans regular', 'Open Sans';
width: 984px;
direction: rtl;
}
JS
A new SVG container for the x-axis. Notice the height attribute.
var xaxis_svg = d3.select('#xaxis')
.append('svg')
.attr("width", width + margins.left + margins.right)
.attr("height", margins.bottom)
.append('g')
.attr('transform', 'translate(60,0)');
Append the x-axis to the container.
xaxis_svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + 0 + ')')
.call(xAxis)
.append("text")
.attr("y", 10)
.attr("x", 140)
.attr("dy", ".30em")
.text("Percentage of Students");
Hope this helps.
I hope you can help. I am building a bar chart with D3 that I need to add labels to as well as append a path to show trends and goals. I added a line for the path but it doesn't seem to be generating. My CSV file with the data is structured like so:
date,projectCode,numberOfSchools,newSchools
2011-12-1,"PRJ2.1",1188,0
And code is below:
<!Doctype html>
<html>
<head>
<title>D3 bar and line chart for Aphellion</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/d3.v3.js"></script>
<!-- <script type="text/javascript" src"//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script> -->
<style type="text/css">
/* the style for the page and charts goes here */
.axis {
font: 10px sans-serif;
}
.axis path
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.rect:hover {
fill: orange;
}
#tooltip {
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="lineChart"></div>
<script type="text/javascript">
"Use strict"
//The script for the bar chart and line charts goes here
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom
barPadding = 3;
//parse the date / time
var parseDate = d3.time.format("%Y-%m-%d").parse;
//set up the scales
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
//set up the axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y-%m"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var svg = d3.select("body").append("svg")
.attr("class", "barChart")
.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/data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date.toString());
d.numberOfSchools = +d.numberOfSchools;
});
x.domain(data.map(function(d) {return d.date;}));
y.domain([0, d3.max(data, function(d) {return d.numberOfSchools;})]);
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", "-.55em")
.attr("transform", "rotate(-90)");
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("Schools");
svg.selectAll("bar")
.data(data)
.enter()
.append("rect")
.style("fill", function(d) {
if(d.numberOfSchools < 1200) {
return "#ff0000";
} else if (d.numberOfSchools === 2000) {
return "#33cc33";
} else {return "steelblue";}
})
.attr("class", "rect")
.attr("x", function(d) {return x(d.date);})
.attr("width", x.rangeBand() - barPadding)
.attr("y", function(d) {return y(d.numberOfSchools);})
.attr("height", function(d) {return height - y(d.numberOfSchools);})
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + x.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
//Create the tooltip label
svg.append("text")
.attr("id", "tooltip")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr("fill", "black")
.text(d.numberOfSchools + " current schools.");
})
.on("mouseout", function() {
//Remove the tooltip
d3.select("#tooltip").remove();
});
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {
return d.numberOfSchools;
})
.attr("x", function(d) {return x(d.date);})
.attr("y", function(d) {return y(d.numberOfSchools);});
})
//add a path to interpolate through the bars
var line = d3.svg.line()
.x(function(d) {return x(d.date)})
.y(function(d) {return y(d.numberOfSchools)});
//add the path
/*d3.select("svg")
.append("path")
.attr("d", line(data.numberOfSchools))
.attr("class", "numberOfSchools");
});*/
console.log("This code works");
</script>
</body>
</html>
Also theoretically can I use the same code to create a line chart with the bars? I tried creating a fiddle but my CSV can't be added. Here it is though: http://jsfiddle.net/siyafrica/bfVHU/
Maybe this will help:
jsFiddle: http://jsfiddle.net/reblace/bfVHU/7/
I had to make a bunch of changes to get it working, but basically it's hard to get the rangeBands method working with bar charts using time data. There's a bunch of stuff written on this subject, here's a good (brief) convo about it: https://groups.google.com/forum/#!topic/d3-js/7GsDmnB4kdE
I switched it to use a date scale, which will generally work, but you'll have to do some work to get the bar widths and positioning to be correct.
var x = d3.time.scale().range([0, width]);
x.domain(d3.extent(data, function(d) { return d.date; }));
Also, your line generator needs to be passed the data array...
var line = d3.svg.line()
.x(function(d) {return x(d.date)})
.y(function(d) {return y(d.value)});
//add the path
svg.append("path")
.attr("d", line(data))
.attr("class", "numberOfSchools");
If you want to stick with the ordinal x scale and use rangebands, you may need a secondary time scale for drawing the path and you will want to add all the dates in the extent of the domain, otherwise "empty" days will not show up on your chart.
I made a simple bar chart using D3.js. The data for the chart is coming from a csv file. I would like for the chart to be updated every 2.5 seconds showing the new data. Right now, after updating the csv file the X and Y axis will update but the bars and mouseover tooltip shows the old values. I have looked at many different examples. Here are a few I have referenced. Anyone know what is going on?
http://mbostock.github.io/d3/tutorial/bar-2.html
http://www.d3noob.org/search?q=update
d3 update data and update graph
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Bar Chart</title>
<style type="text/css">
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
div.tooltip {
position: absolute;
text-align: left;
width: auto;
height: auto;
padding: 2px;
font-family: sans-serif;
font-size: 14px;
background: white;
border: 2;
border-radius: 5px;
pointer-events: none;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 45},
width = 1000 - margin.left - margin.right,
height = 500 - 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")
.tickPadding(5);
//var data = [{"label":"Boone","values":0.8},{"label":"Story","values":0.2},{"label":"Polk","values":0.4}]
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("opacity", 0);
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.label = d.label;
d.values = +d.values;
});
x.domain(data.map(function(d) { return d.label; }));
y.domain([0, d3.max(data, function(d) { return d.values; })]);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-0)")
.attr("x", -10)
.attr("y", -16)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Values");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.on("mouseover", function(d) {
div.transition()
.duration(100)
.style("opacity", 1)
.style("left", (d3.event.pageX)+ "px")
.style("top", (d3.event.pageY) + "px");
div.html("<p>Label: " + d.label+ "<br>Value: " + d.values);
d3.select("#tooltip").classed("hidden", false);
})
.attr("class", "bar")
.attr("x", function(d) { return x(d.label); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.values); })
.attr("height", function(d) { return height - y(d.values); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", 30)
.style("text-anchor", "end")
.text("Label");
});
var inter = setInterval(function() {
updateData();
},2500);
function updateData() {
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.label = d.label;
d.values = +d.values;
});
x.domain(data.map(function(d) { return d.label; }));
y.domain([0, d3.max(data, function(d) { return d.values; })]);
var svg = d3.select("body")
var vis = svg.transition();
vis.select(".x.axis")
.duration(750)
.call(xAxis)
vis.select(".y.axis")
.duration(750)
.call(yAxis)
vis.select(".rect")
.duration(750)
.attr(".x", function(d) { return x(d.label); })
.attr(".y", function(d) { return y(d.values); })
});
}
</script>
</body>
</html>