Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var data = [{value: 1, label: 'Olaf'}, {value: 2, label: 'Marc'}, {value: 5, label: 'Stine'}, {
- value: 1,
- label: 'MC'
- }, {value: 3, label: 'Louise'}, {value: 2, label: 'Jens'}];
- var outerWidth = 500;
- var outerHeight = 250;
- var margin = { left: 130, top: 0, right: 0, bottom: 30 };
- var barPadding = 0.2;
- var xColumn = "value";
- var yColumn = "label";
- var innerWidth = outerWidth - margin.left - margin.right;
- var innerHeight = outerHeight - margin.top - margin.bottom;
- var svg = d3.select("#chartArea").append("svg")
- .attr("width", outerWidth)
- .attr("height", outerHeight);
- var g = svg.append("g")
- .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
- var xAxisG = g.append("g")
- .attr("class", "x axis")
- .attr("transform", "translate(0," + innerHeight + ")");
- var yAxisG = g.append("g")
- .attr("class", "y axis");
- var xScale = d3.scale.linear().range( [0, innerWidth]);
- var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);
- var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
- .ticks(d3.max(data, function (d){ return d[xColumn]; })) // Use approximately 5 ticks marks.
- .tickFormat(d3.format("s")) // Use intelligent abbreviations, e.g. 5M for 5 Million
- .outerTickSize(0); // Turn off the marks at the end of the axis.
- var yAxis = d3.svg.axis().scale(yScale).orient("left")
- .outerTickSize(1); // Turn off the marks at the end of the axis.
- function render(data){
- xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
- yScale.domain(data.map( function (d){ return d[yColumn]; }));
- xAxisG.call(xAxis);
- yAxisG.call(yAxis);
- var bars = g.selectAll("rect").data(data);
- bars.enter().append("rect")
- .attr("height", yScale.rangeBand())
- .attr('class', 'vertical_bar');
- bars.transition();
- bars
- .attr("x", 0)
- .attr("y", function (d){ return yScale(d[yColumn]); })
- .attr("width", function (d){ return xScale(d[xColumn]); });
- bars.exit().remove();
- }
- render(data);
- setTimeout(function () {
- var data = [{value: 4, label: 'Olaf'}, {value: 22, label: 'Marc'}, {value: 15, label: 'Stine'}, {
- value: 13,
- label: 'MC'
- }, {value: 20, label: 'Louise'}, {value: 32, label: 'Jens'}];
- render(data);
- },5000);
- function render(data){
- xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
- yScale.domain(data.map( function (d){ return d[yColumn]; }));
- xAxisG.call(xAxis);
- yAxisG.call(yAxis);
- var bars = g.selectAll("rect").data(data);
- bars.enter().append("rect")
- .attr("height", yScale.rangeBand())
- .attr('class', 'vertical_bar')
- .on('mouseover', tip.show)
- .on('mouseout', tip.hide);
- bars.transition();
- bars
- .attr("x", 0)
- .attr("y", function (d){ return yScale(d[yColumn]); })
- .attr("width", function (d){ return xScale(d[xColumn]); });
- bars.exit().remove();
- }
- render(data);
- setTimeout(function () {
- var data = [{value: 4, label: 'Olaf'}, {value: 22, label: 'Marc'}, {value: 15, label: 'Stine'}, {
- value: 13,
- label: 'MC'
- }, {value: 20, label: 'Louise'}, {value: 32, label: 'Jens'}];
- render(data);
- },5000);
- bars
- .transition()
- .attr("x", 0)
- .attr("y", function (d){ return yScale(d[yColumn]); })
- .attr("width", function (d){ return xScale(d[xColumn]); });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement