javascript - Bar chart output isn't what's expected -
i making bar chart d3. of work done, output not behaving expect to, , can't figure problem out.
the sample data this, json file comprising array of figures gross domestic product in us.
my bar chart showing curve expect, although figures start on 2000, whereas in data, start @ on 200. have attempted change around values each time tinker y positioning , height, unexpected results.
js:
var fccdataurl = 'https://raw.githubusercontent.com/freecodecamp/projectreferencedata/master/gdp-data.json'; var dataset; var fccdata; $.getjson(fccdataurl, (mydata) => { dataset = mydata.data; fccdata = mydata; console.log('dataset', dataset) console.log('fccdata', fccdata) var w = '800' var h = '500' var padding = 50; var svg = d3.select('body') .append('svg') .attr('width', w) .attr('height', h) var xscale = d3.scale.linear() .domain([1947, 2015]) .range([padding, w - padding]) var yscale = d3.scale.linear() .domain([0, d3.max(dataset, d => d[1])]) .range([h - padding, padding]) var xaxis = d3.svg.axis() .scale(xscale) .orient('bottom') .ticks(10) var yaxis = d3.svg.axis() .scale(yscale) .orient('left') .ticks(10) svg.selectall('rect') .data(dataset) .enter() .append('rect') .classed('bars', true) .attr('x', (d, i) => * (w / dataset.length) + 50) .attr('y', d => yscale(d[1]) - 50) .style('width', '4px') .style('height', d => h - yscale(d[1])) svg.append('g') .attr('class', 'axis') .attr('transform', `translate(0, ${h - padding})`) .call(xaxis) svg.append('g') .attr('class', 'axis') .attr('transform', `translate(${padding}, 0)`) .call(yaxis) }); here codepen of work far.
there mix-up between h, , chart height. here updated codepen padding, h, , chartheight defined separately.
var fccdataurl = 'https://raw.githubusercontent.com/freecodecamp/projectreferencedata/master/gdp-data.json'; var dataset; var fccdata; $.getjson(fccdataurl, (mydata) => { dataset = mydata.data; fccdata = mydata; console.log('dataset', dataset) console.log('fccdata', fccdata) var w = '800' var h = '500' var padding = {top: 50, bottom: 50, right: 50, left: 50}; var chartwidth = w - padding.left - padding.right; var chartheight = h - padding.top - padding.bottom; var svg = d3.select('body') .append('svg') .attr('width', w) .attr('height', h) .append("g") // apply transform parent elem instead of individually. .attr("transform", `translate(${padding.left}, ${padding.top})`) var xscale = d3.scale.linear() .domain([1947, 2015]) .range([0, chartwidth]) // no need account padding anymore var yscale = d3.scale.linear() .domain([0, d3.max(dataset, d => d[1])]) .range([chartheight, 0]) // no need account padding anymore var xaxis = d3.svg.axis() .scale(xscale) .orient('bottom') .ticks(10) var yaxis = d3.svg.axis() .scale(yscale) .orient('left') .ticks(10) svg.selectall('rect') .data(dataset) .enter() .append('rect') .classed('bars', true) .attr('x', (d, i) => * (w / dataset.length)) // no need account padding anymore .attr('y', d => yscale(d[1])) // no need account padding anymore .style('width', '4px') .style('height', d => chartheight - yscale(d[1])) svg.append('g') .attr('class', 'axis') .attr('transform', `translate(0, ${chartheight})`) // no need account padding anymore .call(xaxis) svg.append('g') .attr('class', 'axis') //.attr('transform', `translate(${padding}, 0)`) // no need account padding anymore .call(yaxis) }); 
Comments
Post a Comment