Position a chart top left - javascript

I am a newbie using d3 and javascript, but have managed to cobble together some code (using borrowed code from online examples) to create a simple column chart with different colours indicating the status of a variable. Everything works well except that the chart will not position at the top left of the canvas despite adjusting the margin.top or margin.left to small values. If I adjust the browser window to portrait, the chart aligns left but with white significant amounts of white space above it. If I adjust the browser window to landscape the chart aligns to the top but with significant amounts of white space to the left of it. Can someone please advise as to where I have gone wrong. Thanks in advance.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [
{
"status": "Low",
"value": "20",
"color": "red"
},
{
"status": "Marginal",
"value": "10",
"color": "orange"
},
{
"status": "High",
"value": "70",
"color": "green"
}
];
var margin = {top: 10, right: 20, bottom: 30, left: 30},
width = 200 - margin.left - margin.right,
height = 200 - 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")
.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.status; }));
y.domain([0, 100]);
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("Probability");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.status); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return d.color; });
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>


The problem seems to be that you have an <svg class="chart"> element, but your code appends yet another <svg> element to the page after that one, and the first one takes some space

Related

I can't load a javascript scatter plot in any browser

Recently, maybe after updating Java, I'm unable to load a scatter plot on Chrome, Firefox or Internet Explorer.
One month ago, everything loaded fine. I don't know what happened. I've updated Java to the last version and enabled ActiveX on Internet options, but nothing works for me.
I'll paste the html code. It loads the point info using a csv file saved in the same folder:
<!DOCTYPE html> <meta charset="utf-8"> <style>
body { font: 12px Arial;}
.axis path, .axis line { fill: none; stroke: grey; stroke-width: 1;
shape-rendering: crispEdges; }
</style> <body>
<script src="http://d3js.org/d3.v4.js"></script> <script>
// Set the dimensions of the canvas / graph var margin = {top: 30, right: 20, bottom: 50, left: 60}, width = 900 - margin.left - margin.right, height = 360 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.timeParse("%a %b %d %H:%M:%S %Z %Y "); // Set the ranges
var y = d3.scaleTime().range([height, 0]); var x = d3.scaleLinear().range([0, width]);
// Define the axes
var xAxis = d3.axisBottom().scale(x) .ticks(5);
var yAxis = d3.axisLeft().scale(y)
.ticks(5);
// Adds the svg canvas 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("data.csv", function(error, data) { var max = data.length; console.log(max)
data.forEach(function(d, i) { d.dateParsed = parseDate(d.date); d.close = max - i;
}); // Scale the range of the data
y.domain(d3.extent(data, function(d) { return d.dateParsed; })); x.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the scatterplot svg.selectAll("dot") .data(data)
.enter().append("circle") .attr("r", 0.5)
.attr("fill","#2980B9")
.attr("cy", function(d) { return y(d.dateParsed); }) .attr("cx", function(d) { return x(d.close); });
svg.append("g") .attr("class", "x axis")
.attr("transform", "translate(0," + height + ")") .call(xAxis);
svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + 40) .text("followers");
svg.append("g")
.attr("class", "y axis") .call(yAxis);
svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("x", -height / 2 ) .attr("y", -50)
.attr("transform", "rotate(-90)") .text("account creation date");
});
</script> </body>

It looks like main issue is code is not formatted properly.
Many comments get mixed with the code caused the syntax errors.
I try to format the code and try to fix those errors.
As we don't have your data.csv file so we are not able to load that data but code creates the chart now.
You can try to use this code on your side with your data.csv file. It will help you to load the chart properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { font: 12px Arial;}
.axis path, .axis line { fill: none; stroke: grey; stroke-width: 1;
shape-rendering: crispEdges; }
</style>
</head>
<body>
<script src="http://d3js.org/d3.v4.js"></script> <script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 50, left: 60}, width = 900 - margin.left - margin.right, height = 360 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.timeParse("%a %b %d %H:%M:%S %Z %Y "); // Set the ranges
var y = d3.scaleTime().range([height, 0]); var x = d3.scaleLinear().range([0, width]);
// Define the axes
var xAxis = d3.axisBottom().scale(x) .ticks(5);
var yAxis = d3.axisLeft().scale(y)
.ticks(5);
// Adds the svg canvas
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("data.csv", function(error, data) { var max = data.length;
console.log(max);
data.forEach(function(d, i) { d.dateParsed = parseDate(d.date); d.close = max - i;
});
// Scale the range of the data
y.domain(d3.extent(data, function(d) { return d.dateParsed; })); x.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the scatterplot
svg.selectAll("dot") .data(data)
.enter().append("circle") .attr("r", 0.5)
.attr("fill","#2980B9")
.attr("cy", function(d) { return y(d.dateParsed); }) .attr("cx", function(d) { return x(d.close); });
svg.append("g") .attr("class", "x axis")
.attr("transform", "translate(0," + height + ")") .call(xAxis);
svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + 40) .text("followers");
svg.append("g")
.attr("class", "y axis") .call(yAxis);
svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("x", -height / 2 ) .attr("y", -50)
.attr("transform", "rotate(-90)") .text("account creation date");
});
</script>
</body>
</html>

How to get JSON key for d3.js chart

Here is my problem : I an array with JSON object in it ad I would like to get the keys of JSON objects to build a bar chart with it.
Here is my array :
var dataset = [{
"T1": 4.23
},
{
"T2": 45.62
},
{
"T3": 24.78
},
{
"T4": 11.41
},
{
"T5": 5.19
},
{
"T6": 5.15
},
{
"T7": 1.99
},
{
"T8": 0.93
},
{
"T9": 0.61
}
];
And here is my code to draw the chart :
let width = 500;
let heigth = 200;
let barPadding = 1;
let svg = d3.select("#containerChart")
.append("svg")
.attr("width", width)
.attr("height", heigth);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function (d, i) {
return i + (20 + barPadding);
})
.attr("y", function (d) {
return heigth - (**values of JSON object** * 2)
})
.att("width", 20)
.attr("heigth", function (d) {
return (**values of JSON object** * 2)
})
.attr("fill", "teal")
Do you have any idea of how I could do ?
Thanks in advance for your help !!

Here's the codepen and here's the code for testing on your local:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.bar{
fill: steelblue;
}
.bar:hover{
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// set the dimensions of the canvas
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
// define the axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
// add the SVG element
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 + ")");
// load the data
d3.json("data.json", function(error, data) {
// scale the range of the data
x.domain(data.map(function(d) { return Object.keys(d); }));
y.domain([0, d3.max(data, function(d) { return +d[Object.keys(d)]; })]);
// add axis
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", 5)
.attr("dy", ".71em")
.style("text-anchor", "end");
// Add bar chart
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(Object.keys(d)); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(+d[Object.keys(d)]); })
.attr("height", function(d) { return height - y(+d[Object.keys(d)]); });
});
</script>
</body>
I replaced all references for the y axis with the json keys using Object.keys() and got the values for these keys to put into the x axis. You could also use for... in loop to do the same thing.
To test it locally, you will have to host both files on a local server or else you will get CORS errors. You could include a parsed inline json to avoid CORS altogether.

This one should work :
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function (d, i) {
return i + (20 + barPadding);
})
.attr("y", function (d,i) {
return heigth - d["T" + (i+1)]
})
.attr("width", 20)
.attr("heigth", function (d,i) {
return heigth - d["T" + (i+1)]
})
.attr("fill", "teal")

bar height issue in bar chart of d3 js

I am trying to draw a Bar Chart using D3.js but its not working successfully. I am trying the following:
var margin = {top:40, right: 40, bottom: 70, left: 40},
width = 500 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width],.5);
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 tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) {
return "<strong>Value:</strong> <span style='color:red'>" + d.ActiveCount + "</span>";
})
var svg = d3.select("#chart").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);
var data = [{"CreateMonth":"5","ActiveCount":"6"},
{"CreateMonth":"6","ActiveCount":"20"},
{"CreateMonth":"7","ActiveCount":"43"},
{"CreateMonth":"8","ActiveCount":"125"},
{"CreateMonth":"9","ActiveCount":"356"},
{"CreateMonth":"10","ActiveCount":"557"}];
x.domain(data.map(function(d) { return d.CreateMonth; }));
y.domain([0, d3.max(data, function(d) { return d.ActiveCount; })]);
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", ".15em")
.attr("transform", "rotate(-65)");
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("Active");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.CreateMonth); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.ActiveCount); })
.attr("height", function(d) { return height - y(d.ActiveCount); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
I have done this bar graph by using this tutorial http://bl.ocks.org/d3noob/8952219, but I am facing the bar(rect) height problem with uneven ActiveCount data in array object. Is some other problem that I am unable to identify?
Also, why it taking y axis as like this as shown below
and also can't determine the height of tooltip position because I think due to some un-ordered data point or some other issue..
Any suggestion should be appreciated

The problem here is that ActiveCount in your data is a string, not a number.
You have to convert it to number. For instance, using the unary plus operator:
data.forEach(function(d) {
d.ActiveCount = +d.ActiveCount;
});
Regarding the axis, you have to remove the default fill. The easiest way is using the CSS (let's also change the ticks):
line, path {
fill: none;
shape-rendering: crispEdges;
stroke: black;
}
Here is your code with those changes (without d3.tip):
var margin = {
top: 40,
right: 40,
bottom: 70,
left: 40
},
width = 500 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var format = d3.time.format("%b");
var parser = d3.time.format("%m").parse;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .5);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d){
return format(parser(d))
});
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 data = [{
"CreateMonth": "5",
"ActiveCount": "6"
}, {
"CreateMonth": "6",
"ActiveCount": "20"
}, {
"CreateMonth": "7",
"ActiveCount": "43"
}, {
"CreateMonth": "8",
"ActiveCount": "125"
}, {
"CreateMonth": "9",
"ActiveCount": "356"
}, {
"CreateMonth": "10",
"ActiveCount": "557"
}];
data.forEach(function(d) {
d.ActiveCount = +d.ActiveCount;
});
x.domain(data.map(function(d) {
return d.CreateMonth;
}));
y.domain([0, d3.max(data, function(d) {
return d.ActiveCount;
})]);
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", ".15em")
.attr("transform", "rotate(-65)");
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("Active");
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.style("fill", "darkorange")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.CreateMonth);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.ActiveCount);
})
.attr("height", function(d) {
return height - y(d.ActiveCount);
})
line,
path {
fill: none;
shape-rendering: crispEdges;
stroke: black;
}
<script src="https://d3js.org/d3.v3.min.js"></script>

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/

D3 charts - Data overlapping issue with huge data

I have generated a bar chart using D3 charts. Here is the js code
function renderChart(filename) {
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 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 data = [
{"name": "india", "population": 120},
{"name": "uk", "population": 200},
{"name": "us", "population": 300},
{"name": "china", "population": 50}
];
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
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.name); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.population); })
.attr("height", function(d) { return height - y(d.population); });
}
Here is the link to fiddle - http://jsfiddle.net/scfx9/
Here, the width of the bars increases and decreases according to the size of the data. When ever I pass huge data the bars shrink and data gets overlapped as the div size is fixed. How do I make the size of the bars constant and allow the users to use the arrow keys to move the data as in the example below
http://bl.ocks.org/mbostock/4062085

If you look at the example you posted, he is handling the keydown event for arrow keys:
d3.select(window).on("keydown", function() {
switch (d3.event.keyCode) {
case 37: year = Math.max(year0, year - 10); break;
case 39: year = Math.min(year1, year + 10); break;
}
update();
});
Your data will need to work a little bit differently but the concept of windowing is the same. Each time the arrow key is pressed your handler will produce a data array that represents the current window into the overall data. Then you will bind the array to enter new bars and exit old ones and you can decide the kind of transition you want.
One difference in your case compared with the example is that his example uses a fixed scale on his X axis, so he never needs to change the axis. In your case because you're using an ordinal scale and your values will be different for each data window, you'll need to update the domain on your X scale and redraw the axis (possible in a transition if you like).

Categories

Resources