Related
Below is my code to load a D3 multine chart in a leaflet map popup everything works fine but i am not able to load tooltips the mouse events are not picking up. Even console.log on mousemove over the element is not working also i am able to inspect the element on right click. I also do not see anything related to this element in event listners.
var chartdiv = document.createElement("div");
chartdiv.className = "pricechart";
// set the dimensions and margins of the graph
var margin = {top: 25, right: 70, bottom: 80, left: 50},
width = 480 - margin.left - margin.right,
height = 240 - margin.top - margin.bottom;
// parse the date / time
//var parseTime = d3.timeParse("%Y-%m-%d");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var yrain = d3.scaleLinear().range([height, 0]);
// define the line
var smi_line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.smi); })
var rain_line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.rain); });
// gridlines in x axis function
function make_x_gridlines() {
return d3.axisBottom(x)
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y).ticks(5)
}
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select(chartdiv).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 + ")");
// Scale the range of the data
x.domain(d3.extent(stats, function(d) { return d.date; }));
y.domain([d3.min(stats, function(d) { return Math.min(d.smi, d.rain, 0); }) , d3.max(stats, function(d) { return Math.max(d.smi, d.rain, 100); })]);
svg.append("linearGradient")
.attr("id", "temperature-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0).attr("y1", y(0))
.attr("x2", 0).attr("y2", y(100))
.selectAll("stop")
.data([
{offset: "0%", color: "rgb(252, 0, 23)"},
{offset: "25%", color: "rgb(252, 0, 23)"},
{offset: "26%", color: "rgb(255, 254, 52)"},
{offset: "50%", color: "rgb(255, 254, 52)"},
{offset: "51%", color: "rgb(44, 255, 254)"},
{offset: "75%", color: "rgb(44, 255, 254)"},
{offset: "76%", color: "rgb(4, 20, 251)"},
{offset: "100%", color: "rgb(4, 20, 251)"}
])
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
// add the X gridlines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
)
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
)
// Add the SMI path.
svg.append("path")
.data([stats])
.attr("class", "smi-line")
//.style("stroke", "#ff0000")
.attr("d", smi_line);
// Add the Rain path.
svg.append("path")
.data([stats])
.attr("class", "rain-line")
//.style("stroke", "#ff0000")
.attr("d", rain_line);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.tickFormat(d3.timeFormat("%d-%b-%y")))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-45)");
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height + margin.bottom -30) + ")")
.style("text-anchor", "middle")
.attr("dy", "1em")
.text("Date");
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y).ticks(5));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Soil Moisture Index");
// Add the Right Y Axis
svg.append("g")
.attr("transform", "translate(" + width + " ,0)")
.call(d3.axisRight(y).ticks(5)
.tickFormat(d => (d + " mm")));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", width + margin.right -15)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Rainfall");
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var focus = g.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("line")
.attr("class", "x-hover-line hover-line")
.attr("y1", 0)
.attr("y2", height);
focus.append("line")
.attr("class", "y-hover-line hover-line")
.attr("x1", width)
.attr("x2", width);
focus.append("circle")
.attr("r", 7.5);
focus.append("text")
.attr("x", 15)
.attr("dy", ".31em");
svg.append("rect")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
var bisectDate = d3.bisector(function(d) { return d.year; }).left;
function mousemove() {
console.log('mousemove');
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.year > d1.year - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.year) + "," + y(d.value) + ")");
focus.select("text").text(function() { return d.value; });
focus.select(".x-hover-line").attr("y2", height - y(d.value));
focus.select(".y-hover-line").attr("x2", width + width);
}
Ive been at this for hours and cant seem to get my grouped bar chart to behave. Specifically trying to obtain a proper width for the 'g' translate property around each bar.
I have tried multiple methods and this seems to be the most elegant although im open to other solutions. The goal is something like this: http://www.cagrimmett.com/til/2016/04/26/responsive-d3-bar-chart.html
var data = [{"category":"Securily Provisions","values":[{"value":50,"rate":"Work Performed"},{"value":40,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Investigate","values":[{"value":25,"rate":"Work Performed"},{"value":21,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Operate and Maintain","values":[{"value":3,"rate":"Work Performed"},{"value":22,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Oversee and Govern","values":[{"value":12,"rate":"Work Performed"},{"value":7,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Protect and Defend","values":[{"value":6,"rate":"Work Performed"},{"value":15,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Collect and Operate","values":[{"value":92,"rate":"Work Performed"},{"value":85,"rate":"Knowledge, Skills, and Abilities"}]}]
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 ;
var x0 = d3.scale.ordinal().rangeRoundBands([0, width], .5);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var color = d3.scale.ordinal()
.range(["#02bfe7","#fdb81e"]);
var svg = d3.select('#chart-area').append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("preserveAspectRatio", "xMinYMin meet")
.append("g").attr("class","container")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//d3.json("data.json", function(error, data) {
var categoriesNames = data.map(function(d) {
return d.category;
});
var rateNames = data[0].values.map(function(d) {
return d.rate;
});
x0.domain(categoriesNames);
x1.domain(rateNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(categorie) {
return d3.max(categorie.values, function(d) {
return d.value;
});
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style('opacity','0')
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style('font-weight','bold')
.text("Value");
svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');
var slice = svg.selectAll(".slice")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform",function(d) { return "translate(" + x0(d.category) + ",0)"; });
slice.selectAll("rect")
.data(function(d) { return d.values; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.rate); })
.style("fill", function(d) { return color(d.rate) })
.attr("y", function(d) { return y(0); })
.attr("height", function(d) { return height - y(0); })
.on("mouseover", function(d) {
d3.select(this).style("fill", d3.rgb(color(d.rate)).darker(2));
})
.on("mouseout", function(d) {
d3.select(this).style("fill", color(d.rate));
});
slice.selectAll("rect")
.transition()
.delay(function (d) {return Math.random()*1000;})
.duration(1000)
.attr("class","bar")
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
//Legend
var legend = svg.selectAll(".legend")
.data(data[0].values.map(function(d) { return d.rate; }).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d,i) { return "translate(0," + i * 20 + ")"; })
.style("opacity","0");
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(d); });
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {return d; });
legend.transition().duration(500).delay(function(d,i){ return 1300 + 100 * i; }).style("opacity","1");
document.addEventListener("DOMContentLoaded", resize);
d3.select(window).on('resize', resize);
function resize() {
console.log('----resize function----');
// update width
width = parseInt(d3.select('#chart-area').style('width'), 10);
width = width - margin.left - margin.right;
height = parseInt(d3.select("#chart-area").style("height"));
height = height - margin.top - margin.bottom;
console.log('----resiz width----'+width);
console.log('----resiz height----'+height);
// resize the chart
x0.range([0, width]);
x0.rangeRoundBands([0, width], .03);
y.range([height, 0]);
yAxis.ticks(Math.max(height/50, 2));
xAxis.ticks(Math.max(width/50, 2));
d3.select(svg.node().parentNode)
.style('width', (width + margin.left + margin.right) + 'px');
svg.selectAll('.g')
//.attr("x", function(d) { return x0(categoriesNames); })
//.attr("x", function(d) { return x1(d.rate); })
// Problem here applying new width within translate
.attr("transform", "translate(10,0)")
.attr("width", x1.rangeBand());
svg.selectAll("text")
// .attr("x", function(d) { return x0(categoriesNames); })
.attr("x", (function(d) { return x0(categoriesNames ) + x0.rangeBand() / 2 ; } ))
.attr("y", function(d) { return y(rateNames) + 1; })
.attr("dy", ".75em");
svg.select('.x.axis').call(xAxis.orient('bottom')).selectAll("text").attr("x",55);
}
//});
.bar{
fill: steelblue;
}
.bar:hover{
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
#chart-area {width: 100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart-area"></div>
Here's a solution. Is this the desired output? Try resizing the window.
JS FIDDLE
Resize function:
function resize() {
console.log('----resize function----');
// update width
width = parseInt(d3.select('#chart-area').style('width'), 10);
width = width - margin.left - margin.right;
height = parseInt(d3.select("#chart-area").style("height"));
height = height - margin.top - margin.bottom;
console.log('----resiz width----'+width);
console.log('----resiz height----'+height);
// resize the chart
x0.rangeRoundBands([0, width], .5);
x1.domain(rateNames).rangeRoundBands([0, x0.rangeBand()]);
y.range([height, 0]);
yAxis.ticks(Math.max(height/50, 2));
xAxis.ticks(Math.max(width/50, 2));
d3.select(svg.node().parentNode)
.style('width', (width + margin.left + margin.right) + 'px');
svg.selectAll('.g')
.attr("transform",function(d) {
return "translate(" + x0(d.category) + ",0)";
});
svg.selectAll('.g').selectAll("rect").attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.rate); })
svg.selectAll(".legend rect")
.attr("x", width - 18);
svg.selectAll('.legend text')
.attr("x", width - 24)
svg.select('.x.axis').call(xAxis.orient('bottom'));
}
I made a few changes to the resize function. Here's why:
x0 and x1 ranges (both) have to be reset on resize:
x0.rangeRoundBands([0,width],.5);
x1.domain(rateNames).rangeRoundBands([0,x0.rangeBand()]);
y.range([height, 0]);
Translate of (10,0) was being force set in the resize function and you cannot apply width to a (group).
Basically, you just need to call all the code from the original render that includes width and height changes. Take a look at the resize function.
Re-rendering X-axis at the bottom included a static value for the x ticks:
svg.select('.x.axis').call(xAxis.orient('bottom')).selectAll("text").attr("x",55);
Just removed the attr("x", 55)
Hope this helps. :)
I am trying to group bars monthwise using D3 so that grouped bars align below the month names on the x axis properly.
the data i am reading is from a csv file as shown below :
Month,Projected Sales/Purchase,Purchase ,Shipped ,Supplier,
JAN-17,310504,552339,259034,A,
JAN-17,610504,252339,659034,B,
FEB-17,910504,552339,259034,A,
FEB-17,210504,252339,659034,B,
FEB-17,810504,252339,659034,C,
This is what i'm trying to achieve http://imgur.com/qxnq5ZJ
Each stacked bar in a month represents a particular supplier. And the supplier count may vary from month to month.
The following is the code that i've tried:
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 50, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
d3.csv("data.csv", function(d, i, columns) {
for (i = 1, t = 0; i < (columns.length-1); ++i)
t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}, function(error, data) {
if (error) throw error;
var keys = data.columns.slice(1,4);
x.domain(data.map(function(d) { return d.Month; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
z.domain(keys);
var stack = d3.stack()
.keys(data.columns.slice(1,4));
var stackedData = stack(data);
g.append("g")
.selectAll("g")
.data(stackedData)
.enter().append("g")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d,i) { console.info(d[i].data.Month);return d; })
.enter().append("g").append("rect")
.attr("x", function(d, i){return i * 75;})
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", 50);
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + 450 + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d; });
});
</script>
http://imgur.com/eUG56rr is the output for the above code.
I am facing an issue while plotting values. The bars go beyond Y-Axis.
<div id = "Bar1">
<script>
var margin1 = {top: 40, right: 20, bottom: 30, left: 40},
width1 = 460 //- margin.left - margin.right,
height1 = 200 //- margin.top - margin.bottom;
var formatPercent1 = d3.format("");
var x1 = d3.scale.ordinal()
.rangeRoundBands([0, width1], 0);
//.rangeRoundBands([width1, 0);
var y1 = d3.scale.linear()
.range([height1, 0]);
var xAxis1 = d3.svg.axis()
.scale(x1)
.orient("bottom");
var yAxis1 = d3.svg.axis()
.scale(y1)
.orient("left")
.tickFormat(formatPercent1);
var tip1 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
var svg1 = d3.select("#Bar1").append("svg")
.attr("width", width1 + margin1.left + margin1.right)
.attr("height", height1 + margin1.top + margin1.bottom)
.append("g")
.attr("transform", "translate(" + margin1.left + "," + margin1.top + ")");
svg1.call(tip1);
d3.tsv(data, type, function(error, data1) {
x1.domain(data1.map(function(d) { return d.letter; }));
y1.domain([0, d3.max(data1, function(d) { return d.frequency; })]);
svg1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height1 + ")")
.call(xAxis1);
svg1.append("g")
.attr("class", "y axis")
.call(yAxis1)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg1.selectAll(".bar")
.data(data1)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height1 - y(d.frequency); })
.on('mouseover', tip1.show)
.on('mouseout', tip1.hide)
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
</div>
The CSV:
letter frequency
django 12
dictionary 33
C 55
D 100
E 90
F 300
G 80
H 10
I 0
J 0
Can Anyone please help me out with this code. I am not understanding why this is an issue.
The X and Y axis are scaled too. Is there something that i have missed out?
Thanks,
Sriram
You must have a mistake elsewhere than in the code you sent. I just put it to JSFiddle and it works correctly:
var tsv = "letter frequency\n" +
"django 12\n" +
"dictionary 33\n" +
"C 55\n" +
"D 100\n" +
"E 90\n" +
"F 300\n" +
"G 80\n" +
"H 10\n" +
"I 0\n" +
"J 0";
var margin1 = {top: 40, right: 20, bottom: 30, left: 40},
width1 = 460 //- margin.left - margin.right,
height1 = 200 //- margin.top - margin.bottom;
var formatPercent1 = d3.format("");
var x1 = d3.scale.ordinal()
.rangeRoundBands([0, width1], 0);
//.rangeRoundBands([width1, 0);
var y1 = d3.scale.linear()
.range([height1, 0]);
var xAxis1 = d3.svg.axis()
.scale(x1)
.orient("bottom");
var yAxis1 = d3.svg.axis()
.scale(y1)
.orient("left")
.tickFormat(formatPercent1);
var svg1 = d3.select("#Bar1").append("svg")
.attr("width", width1 + margin1.left + margin1.right)
.attr("height", height1 + margin1.top + margin1.bottom)
.append("g")
.attr("transform", "translate(" + margin1.left + "," + margin1.top + ")");
var data1 = d3.tsv.parse(tsv, type)
x1.domain(data1.map(function(d) { return d.letter; }));
y1.domain([0, d3.max(data1, function(d) { return d.frequency; })]);
svg1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height1 + ")")
.call(xAxis1);
svg1.append("g")
.attr("class", "y axis")
.call(yAxis1)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg1.selectAll(".bar")
.data(data1)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x1(d.letter); })
.attr("width", x1.rangeBand())
.attr("y", function(d) { return y1(d.frequency); })
.attr("height", function(d) { return height1 - y1(d.frequency); })
function type(d) {
d.frequency = +d.frequency;
return d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='Bar1'></div>
In your snippet, you are referring to x scale as x variable, while you actually save it in x1. The same goes for y and y1 variables. That's corrected in my snippet.
Other than that, I changed the TSV loading from d3.tsv to d3.tsv.parse, but that's just skipping the AJAX fetch of the resource. I also removed the d3.tip tooltip, but again, that shouldn't change the barchart itself.
From the looks of your image, I'd guess you're not converting the frequency to Number but leave it as a String. But that's just a guess, you might want to show the actual code that's giving you trouble.
I've been trying to implement Reusability on a histogram plotted using d3.
I want that after plotting of the dataset, I want to plot statistical mean, variance etc. on the same plot.These would be user driven, basically I want to use the same plot.
Here's my attempt on coding the skeleton histogram code
function histogram(){
//Defaults
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 760,
height = 200;
function chart(selection){
selection.each(function(d,i){
var x = d3.scale.linear()
.domain( d3.extent(d) )
.range( [0, width] );
var data = d3.layout.histogram()
//Currently generates 20 equally spaced bars
.bins(x.ticks(20))
(d);
var y = d3.scale.linear()
.domain([0, d3.max(d) ])
.range([ height - margin.top - margin.bottom, 0 ]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select(this).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");
/*
Corrected bars
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);
svg.append("g")
.attr("class","y axis")
.call(yAxis);
bar.append("rect")
.attr("x", function(d,i){ return x(d.x); })
.attr("width", x(data[0].dx) - 1)
.attr('y',height)
.transition()
.delay( function(d,i){ return i*50; } )
.attr('y',function(d){ return y(d.y) })
.attr("height", function(d) { return height - y(d.y); });
});
}
//Accessors//
chart.width = function(value) {
if (!arguments.length) return width;
width = value;
return chart;
};
chart.height = function(value) {
if (!arguments.length) return height;
height = value;
return chart;
};
return chart;
}
It's assigning a negative width for bars. My input dataset would simply be an array of numbers and I need to plot the frequency distribution
If you're asking how to implement the avg, standard deviation, once you have your histogram you can draw lines and text on it to represent the avg. I would calculate which bar the average is in, and the % of the way through the bar and then something like this:
var averageBar = vis.selectAll("g.bar:nth-child(" + (averageBarIndex + 1) + ")");
averageBar.append("svg:line")
.attr("x1", 0)
.attr("y1", y.rangeBand()*averageBarPercentage)
.attr("x2", w)
.attr("y2", y.rangeBand() * averageBarPercentage)
.style("stroke", "black");
averageBar.append("svg:text")
.attr("x", w-150)
.attr("y", y.rangeBand() * averageBarPercentage-15)
.attr("dx", -6)
.attr("dy", "10px")
.attr("text-anchor", "end")
.text("Average");
That will give you a line marking the average, you can do similar for the standard deviation.