Unneeded white space before the 1st bar in D3 Stack chart - javascript
I am trying to populate a data set into D3's Bar chart data. I am using this example from the d3:
https://bl.ocks.org/mbostock/1134768
var causes = ["wounds", "other", "disease"];
var parseDate = d3.time.format("%m/%Y").parse;
var margin = {top: 20, right: 50, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - 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 + ")");
d3.tsv("data.csv", function(error, crimea) {
if (error) throw error;
var layers = d3.layout.stack()(causes.map(function(c) {
return crimea.map(function(d) {
return {x: parseDate(d.date), y: +d[c]};
});
}));
var x = d3.scale.ordinal()
.domain([0,1])
.rangeRoundBands([0, width], 0.1, 0);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
console.log(layers);
x.domain(layers[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(layers[layers.length - 1], function(d) { return d.y0 + d.y; })]).nice();
var ticks = x.domain().filter(function(d,i){ return !(i%20); } );
xAxis.tickValues( ticks );
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return z(i); });
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y + d.y0); })
.attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
.attr("width", x.rangeBand() - 1);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + 0 + ",0)")
.call(yAxis);
});
This issue I am getting is that I have some white space which looks ugly. This space come before the 1st bar and also after the last bar of the chart. I have tried tweaking the x value of the bar, But I think that is not a good way to do.
This space does not come when the data set is small. But when dataset is large then this space comes up. How can I remove this space from the start and from end.
JSFiddle For the Above code is
https://jsfiddle.net/7qnngbdc/
See here --> https://github.com/mbostock/d3/wiki/Ordinal-Scales#ordinal_rangeRoundBands
"Note that rounding necessarily introduces additional outer padding which is, on average, proportional to the length of the domain. For example, for a domain of size 50, an additional 25px of outer padding on either side may be required. Modifying the range extent to be closer to a multiple of the domain length may reduce the additional padding."
After you've set the domain, try this -->
var mult = Math.max (1, Math.floor (width / x.domain().length));
x.rangeRoundBands ([0, (x.domain().length * mult)], 0.1, 0);
Changed in https://jsfiddle.net/7qnngbdc/1/
Related
D3 plotting categorical data with a range(min, max) value using points and line
I have a dataset that has 3 fields a name, a min value (value2) and a max value (value) that represent a range.
//The data
var data =[{"name": 'Scotty', "value2":0, "value":17},
{"name":'Dick', "value2":10, "value":17},
{"name":'James', "value2":5, "value":null},
{"name":'Max', "value2":2, "value":9}]
Currently I have it represented with a bar chart using this code that works ok except in cases where the points value2 and value are very close or there is a null value.
//Chart size parameters
var margin = {top: 20, right: 30, bottom: 90, left: 40},
width = 830 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//Chart axis
var x = d3.scaleBand()
.domain(data.map(function(d) { return d.name; }))
.range([2, width])
.scaleBand(0.10);
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.value; })])
.range([height, 0]);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
//Initialize chart
var chart = d3.select("#mychart").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 + ")");
//Adding both axis
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
//Where the box is drawn
chart.selectAll(".box")
.data(data)
.enter().append("rect")
.attr("class", "box")
.attr("x", function(d) { return x(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return y(d.value2) - y(d.value); }) //Plot range
.attr("width", x.bandwidth()); //spacing for bars
Is there a way to plot the data with the following:
if two points are present plot both of them with a path connecting them
if one point is present with a null in field value only plot the one point
how do i clear my visualization in order to make space for the updated visualization using svg?
here's my d3.js function to visualize a bar graph:
function barGraph(data1)
{
// console(data1.count);
var i = 0;
data1.forEach(function(d){
while(i>0){
d.avspeed= +d.avspeed;
d.duration = +d.duration;
i--;
}
})
//console.log(data1.avspeed);
// console.log(data1.avspeed);
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//console.log(data1.avspeed);
console.log("hey1");
var formatPercent = d3.format("");
console.log("hey2");
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");
console.log("hey");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
console.log("hey3");
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Avg Speed:</strong> <span style='color:red'>" + d.avspeed + "</span>";
})
var svg = d3.select("#rightside").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);
console.log("heyllo ");
x.domain(data1.map(function(d) { return d.tripid; }));
y.domain([0, d3.max(data1, function(d) { return d.avspeed; })]);
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("Avg Speed");
svg.selectAll(".bar")
.data(data1)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.tripid); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.avspeed); })
.attr("height", function(d) { return height - y(d.avspeed); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
console.log(d.avspeed);
console.log("hello234");
function type(d) {
d.avspeed = +d.avspeed;
return d;
}
}
It displays a graph based on the selected region on the map dynamically. If i select new region, another graph is being created below the old graph. I want the old graph to clear and new graph to be in place of old graph. How do I achieve that.
I am new to d3.js
Thanks in advance.
You can clear away anything inside of the parent container with .html("") while creating your svg:
var svg = d3.select("#rightside").html("").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 + ")");
remove also works but I prefer this slightly terser way of doing it.
Before appending the new avg, just call d3.select('svg').remove(); That will remove the first svg on the page (I'm assuming you only have one). If you don't have an svg, it won't fail, so you can always call it.
Unneeded white space before the 1st bar in D3 bar chart
I am trying to populate a data set into D3's Bar chart data. I am using this example from the d3: http://bl.ocks.org/mbostock/3885304
Here is my sample data:
var data = [{"name":"0","members_count":4},{"name":"1","members_count":1},{"name":"2","members_count":6},{"name":"3","members_count":1},{"name":"4","members_count":1},{"name":"5","members_count":2},{"name":"6","members_count":4},{"name":"7","members_count":3},{"name":"8","members_count":5},{"name":"9","members_count":1},{"name":"10","members_count":2},{"name":"11","members_count":3},{"name":"12","members_count":2},{"name":"13","members_count":0},{"name":"14","members_count":5},{"name":"15","members_count":2},{"name":"16","members_count":2},{"name":"17","members_count":4},{"name":"18","members_count":2},{"name":"19","members_count":4},{"name":"20","members_count":3},{"name":"21","members_count":5},{"name":"22","members_count":8},{"name":"23","members_count":3},{"name":"24","members_count":2},{"name":"25","members_count":3},{"name":"26","members_count":4},{"name":"27","members_count":4},{"name":"28","members_count":1},{"name":"29","members_count":1},{"name":"30","members_count":3},{"name":"31","members_count":5},{"name":"32","members_count":4},{"name":"33","members_count":3},{"name":"34","members_count":6},{"name":"35","members_count":2},{"name":"36","members_count":2},{"name":"37","members_count":7},{"name":"38","members_count":2},{"name":"39","members_count":4},{"name":"40","members_count":2},{"name":"41","members_count":1},{"name":"42","members_count":8},{"name":"43","members_count":10},{"name":"44","members_count":1},{"name":"45","members_count":5},{"name":"46","members_count":2},{"name":"47","members_count":5},{"name":"48","members_count":3},{"name":"49","members_count":1},{"name":"50","members_count":9},{"name":"51","members_count":3},{"name":"52","members_count":2},{"name":"53","members_count":8},{"name":"54","members_count":2},{"name":"55","members_count":3},{"name":"56","members_count":2},{"name":"57","members_count":2},{"name":"58","members_count":5},{"name":"59","members_count":1},{"name":"60","members_count":2},{"name":"61","members_count":4},{"name":"62","members_count":2},{"name":"63","members_count":2},{"name":"64","members_count":6},{"name":"65","members_count":6},{"name":"66","members_count":1},{"name":"67","members_count":1},{"name":"68","members_count":3},{"name":"69","members_count":5},{"name":"70","members_count":3},{"name":"71","members_count":4},{"name":"72","members_count":4},{"name":"73","members_count":1},{"name":"74","members_count":3},{"name":"75","members_count":2},{"name":"76","members_count":4},{"name":"77","members_count":5},{"name":"78","members_count":2},{"name":"79","members_count":1},{"name":"80","members_count":2},{"name":"81","members_count":1},{"name":"82","members_count":4},{"name":"83","members_count":3},{"name":"84","members_count":1},{"name":"85","members_count":4},{"name":"86","members_count":1},{"name":"87","members_count":3},{"name":"88","members_count":1},{"name":"89","members_count":8},{"name":"90","members_count":6},{"name":"91","members_count":6},{"name":"92","members_count":3},{"name":"93","members_count":4},{"name":"94","members_count":5},{"name":"95","members_count":2},{"name":"96","members_count":3},{"name":"97","members_count":2},{"name":"98","members_count":3},{"name":"99","members_count":6},{"name":"100","members_count":3},{"name":"101","members_count":1},{"name":"102","members_count":0},{"name":"103","members_count":5},{"name":"104","members_count":2},{"name":"105","members_count":1},{"name":"106","members_count":7},{"name":"107","members_count":1},{"name":"108","members_count":1},{"name":"109","members_count":7},{"name":"110","members_count":5},{"name":"111","members_count":5},{"name":"112","members_count":2},{"name":"113","members_count":6},{"name":"114","members_count":1},{"name":"115","members_count":2},{"name":"116","members_count":1},{"name":"117","members_count":1},{"name":"118","members_count":10},{"name":"119","members_count":2},{"name":"120","members_count":6},{"name":"121","members_count":1},{"name":"122","members_count":1},{"name":"123","members_count":2},{"name":"124","members_count":4},{"name":"125","members_count":5},{"name":"126","members_count":1},{"name":"127","members_count":1},{"name":"128","members_count":1},{"name":"129","members_count":3},{"name":"130","members_count":3},{"name":"131","members_count":3},{"name":"132","members_count":4},{"name":"133","members_count":3},{"name":"134","members_count":1},{"name":"135","members_count":5},{"name":"136","members_count":5},{"name":"137","members_count":1},{"name":"138","members_count":2},{"name":"139","members_count":5},{"name":"140","members_count":1},{"name":"141","members_count":1},{"name":"142","members_count":2},{"name":"143","members_count":2},{"name":"144","members_count":4},{"name":"145","members_count":4},{"name":"146","members_count":3},{"name":"147","members_count":5},{"name":"148","members_count":2},{"name":"149","members_count":1},{"name":"150","members_count":2},{"name":"151","members_count":3},{"name":"152","members_count":0},{"name":"153","members_count":3},{"name":"154","members_count":1},{"name":"155","members_count":2},{"name":"156","members_count":2},{"name":"157","members_count":1},{"name":"158","members_count":5},{"name":"159","members_count":4},{"name":"160","members_count":4},{"name":"161","members_count":5},{"name":"162","members_count":4},{"name":"163","members_count":2},{"name":"164","members_count":4},{"name":"165","members_count":2},{"name":"166","members_count":2},{"name":"167","members_count":1},{"name":"168","members_count":1},{"name":"169","members_count":10},{"name":"170","members_count":4},{"name":"171","members_count":2},{"name":"172","members_count":2},{"name":"173","members_count":1},{"name":"174","members_count":5},{"name":"175","members_count":1},{"name":"176","members_count":1},{"name":"177","members_count":5},{"name":"178","members_count":3},{"name":"179","members_count":1},{"name":"180","members_count":5},{"name":"181","members_count":8},{"name":"182","members_count":4},{"name":"183","members_count":2},{"name":"184","members_count":1},{"name":"185","members_count":3},{"name":"186","members_count":1},{"name":"187","members_count":3},{"name":"188","members_count":1},{"name":"189","members_count":1},{"name":"190","members_count":6},{"name":"191","members_count":4},{"name":"192","members_count":5},{"name":"193","members_count":1},{"name":"194","members_count":4},{"name":"195","members_count":2},{"name":"196","members_count":2},{"name":"197","members_count":2},{"name":"198","members_count":0},{"name":"199","members_count":3},{"name":"200","members_count":3},{"name":"201","members_count":1},{"name":"202","members_count":1},{"name":"203","members_count":1},{"name":"204","members_count":5},{"name":"205","members_count":1},{"name":"206","members_count":1},{"name":"207","members_count":1},{"name":"208","members_count":1},{"name":"209","members_count":1},{"name":"210","members_count":5},{"name":"211","members_count":2},{"name":"212","members_count":1},{"name":"213","members_count":5},{"name":"214","members_count":1},{"name":"215","members_count":3},{"name":"216","members_count":1},{"name":"217","members_count":1},{"name":"218","members_count":4},{"name":"219","members_count":2},{"name":"220","members_count":1},{"name":"221","members_count":3},{"name":"222","members_count":1},{"name":"223","members_count":3},{"name":"224","members_count":1},{"name":"225","members_count":2},{"name":"226","members_count":1},{"name":"227","members_count":1},{"name":"228","members_count":11},{"name":"229","members_count":9},{"name":"230","members_count":9},{"name":"231","members_count":9},{"name":"232","members_count":10},{"name":"233","members_count":10},{"name":"234","members_count":10},{"name":"235","members_count":9},{"name":"236","members_count":10},{"name":"237","members_count":10},{"name":"238","members_count":10},{"name":"239","members_count":10},{"name":"240","members_count":9},{"name":"241","members_count":9},{"name":"242","members_count":9},{"name":"243","members_count":10},{"name":"244","members_count":10},{"name":"245","members_count":9},{"name":"246","members_count":2},{"name":"247","members_count":1},{"name":"248","members_count":2},{"name":"249","members_count":2},{"name":"250","members_count":1},{"name":"251","members_count":2},{"name":"252","members_count":1},{"name":"253","members_count":5},{"name":"254","members_count":1},{"name":"255","members_count":1},{"name":"256","members_count":1},{"name":"257","members_count":1},{"name":"258","members_count":1},{"name":"259","members_count":1},{"name":"260","members_count":2},{"name":"261","members_count":1},{"name":"262","members_count":1},{"name":"263","members_count":2},{"name":"264","members_count":1},{"name":"265","members_count":1},{"name":"266","members_count":1},{"name":"267","members_count":1},{"name":"268","members_count":2},{"name":"269","members_count":2},{"name":"270","members_count":1},{"name":"271","members_count":1},{"name":"272","members_count":0},{"name":"273","members_count":2},{"name":"274","members_count":1},{"name":"275","members_count":2},{"name":"276","members_count":2},{"name":"277","members_count":1},{"name":"278","members_count":3},{"name":"279","members_count":1},{"name":"280","members_count":1},{"name":"281","members_count":1},{"name":"282","members_count":1},{"name":"283","members_count":1},{"name":"284","members_count":1},{"name":"285","members_count":1},{"name":"286","members_count":1},{"name":"287","members_count":1},{"name":"288","members_count":1},{"name":"289","members_count":1},{"name":"290","members_count":1},{"name":"291","members_count":1},{"name":"292","members_count":1},{"name":"293","members_count":1},{"name":"294","members_count":1},{"name":"295","members_count":1},{"name":"296","members_count":1},{"name":"297","members_count":2},{"name":"298","members_count":2},{"name":"299","members_count":1},{"name":"300","members_count":1},{"name":"301","members_count":1},{"name":"302","members_count":1},{"name":"303","members_count":1},{"name":"304","members_count":1},{"name":"305","members_count":1},{"name":"306","members_count":1},{"name":"307","members_count":1},{"name":"308","members_count":1},{"name":"309","members_count":1},{"name":"310","members_count":1},{"name":"311","members_count":1},{"name":"312","members_count":1},{"name":"313","members_count":0},{"name":"314","members_count":1}]
This is chart's drawing code.
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = (960 - margin.left - margin.right) * data.length/50,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain([0,1])
.rangeRoundBands([0, width], 0.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")
.ticks(10, "%");
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 + ")");
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.members_count; })]);
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("fill","green")
.attr("x", function(d) { return x(d.name); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.members_count); })
.attr("height", function(d) { return height - y(d.members_count); });
This issue I am getting is that I have some white space which looks ugly. This space come before the 1st bar and also after the last bar of the chart. I have tried tweaking the x value of the bar, But I think that is not a good way to do.
This space does not come when the data set is small. But when dataset is large then this space comes up. How can I remove this space from the start and from end.
The problem is with this line in scale: .rangeRoundBands([0, width], 0.1); When there is not specified the third parameter outerPadding it adds before and after the chart extra space produced by the padding parameter for each bar. You have set the padding to 0.1. To solve this problem set the outerPadding parameter: var x = d3.scale.ordinal() .domain([0,1]) .rangeRoundBands([0, width], 0.1, 0); Here is updated your code: http://jsfiddle.net/ojntup1a/
How do I create a column chart with negative values?
I am trying to essentially rotate this horizontal bar chart into a vertical bar chart, but can't figure out how to do so. I can create a normal column chart, but once I try to put in the negative values and compute the y and height, all hell breaks loose. Here's my fiddle. (At least I was able to create the y-axis (I think).)
What am I doing wrong here?
var data = [{"letter":"A",'frequency':10},{"letter":"B","frequency":-5},{"letter":"C","frequency":7}];
var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 750 - 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");
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 x0 = Math.max(-d3.min(data), d3.max(data));
x.domain(data.map(function(d) { return d.letter; }));
y.domain([d3.min(data, function(d) { return d.frequency; }), 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);
svg.selectAll(".bar")
.data(data).enter().append("rect")
.attr("class", "bar")
.attr("x", function(d, i) { return x(d.letter); })
.attr("y", function(d, i) { return x(Math.min(0, d.frequency));})
.attr("width", x.rangeBand())
.attr("height", function(d) { return Math.abs(x(d.frequency) - x(0)); });
Looks like there are two problems here:
The typos: .attr("y", function(d, i) { return x(...);}) should now be .attr("y", function(d, i) { return y(...);}). Same is true for the scales in your height attribute.
The change from a 0 base on the X axis to a 0 base on the Y axis. With a zero-based bar on the X axis, the x attribute of the bar is x(0). With a 0 based bar on the Y axis, the y attribute of the bar is not y(0), but y(value) (because the "base" of the bar is no longer the leading edge of the rectangle) - so in this code you need to use Math.max(0, value) (which will give y(value) for positive values) instead of Math.min(0, value):
svg.selectAll(".bar")
// ...snip...
.attr("y", function(d, i) { return y(Math.max(0, d.frequency));})
.attr("height", function(d) { return Math.abs(y(d.frequency) - y(0)); });
See updated fiddle: http://jsfiddle.net/pYZn8/5/
Put D3 code into a function and call
Is it possible to put D3 code into a function and then call the function?
For example, I am interested in using this histogram code
http://bl.ocks.org/3048450
If I put code in a function and call like
function hist(bin, data) {
//the D3 histogram plotting code
// Generate an Irwin–Hall distribution of 10 random variables.
var values = d3.range(1000).map(d3.random.irwinHall(10));
// A formatter for counts.
var formatCount = d3.format(",.0f");
var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 1])
.range([0, width]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
.bins(x.ticks(20))
(values);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("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 bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].dx) - 1)
.attr("height", function(d) { return height - y(d.y); });
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", x(data[0].dx) / 2)
.attr("text-anchor", "middle")
.text(function(d) { return formatCount(d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
}
hist(...); //call the function
it doesn't plot. Why is that?
I found the cause of the bug. I misspell "function" as "function"
Where are you including and running that code? If you're including and runningit in the <head> element, then when the script executes the browser will not be aware of the <body> element. d3.select("body") will return an empty selection, and therefore there will be nothing to which to append and svg element.
Try putting the script within the <body> or use a library like jQuery (i.e., $(document).ready()) to ensure that the document has been loaded before executing your script.