nvD3 : want to Create a DualAxisBarChart using NVD3 - d3.js
I want to create a DualAxisBarchart but kind of stuck. Tried many way but actually am able to create Two yAxis but instead to create two separate bar its creating two bar at the same place please suggest me some approach am creating this using multichart() function
I have not used nvd3, however I have created a dual axis bar chart using d3. In the code below I am assuming the variable height, x, svg are already defined. The only differences are the ranges for the upperY and lowerY functions and how the lowerBars y and height are defined. I really hope this helps
var upperY = d3.scale.linear().range([height / 2, 0]);
var lowerY = d3.scale.linear().range([height / 2, height]);
var upperYAxis = d3.svg.axis()
.scale(upperY)
.orient("left");
var lowerYAxis = d3.svg.axis()
.scale(lowerY)
.orient("left");
svg.append("g")
.attr("class", "y axis")
.call(upperYAxis);
svg.append("g")
.attr("class", "y2 axis")
.call(lowerYAxis);
var upperBars = svg.selectAll(".upperBar")
.data(upperBarData)
.enter()
.append("rect")
.attr("class", "upperBar")
.attr("x", function(d) { return x(d.index); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return upperY(d.value); })
.attr("height", function(d) { return height / 2 - upperY(d.value); });
var lowerBars = svg.selectAll(".lowerBar")
.data(lowerBarData)
.enter()
.append("rect")
.attr("class", "lowerBar")
.attr("x", function(d) { return x(d.index); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return height / 2; })
.attr("height", function(d) { return lowerY(d.value) - height / 2; });
Related
d3js stacked bar chart variable keys
I am using this example of stacked bar chart But in my data I never know keys. So I get them as a part of json data. Data: {"apple":6522,"cherry":4611,"orange":2004,"time":1539792000000,"keys": ["apple","cherry","orange",],"max":6522}, {"apple":6171,"melone":4348,"time":1539802800000,"keys":["apple", "melone],"max":6171}... I am using function to return keys list. Here is my code: var xScale = d3.scaleBand().range([0, width]).padding(0.1); var yScale = d3.scaleLinear().range([height, 0]); var color = d3.scaleOrdinal(d3.schemeCategory20); var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b")); var yAxis = d3.axisLeft(yScale); var stack = d3.stack(); var x = d3.scaleBand() .rangeRound([0, width]) .paddingInner(0.25) .align(0.1); var y = d3.scaleLinear() .rangeRound([height, 0]); var z = d3.scaleOrdinal().range(['#d53e4f','#fc8d59','#fee08b']); x.domain(data.map(function(d) { return d.time; })); y.domain([0, d3.max(data, function(d) { return d.max;})]); z.domain(data.map(function(d) { return d.keys; })); g.selectAll(".serie") .data(stack.keys(function(d) { return d.keys; })(data)) .enter().append("g") .attr("class", "serie") .attr("fill", function(d) { return z(d.value); }) .selectAll("rect") .data(function(d) { return d; }) .enter().append("rect") .attr("x", function(d) { return x(d.data.time); }) .attr("y", function(d) { return y(d[1]); }) .attr("height", function(d) { return y(d[0]) - y(d[1]); }) .attr("width", x.bandwidth()); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y).ticks(10, "s")) .append("text") .attr("x", 2) .attr("y", y(y.ticks(10).pop())) .attr("dy", "0.35em") .attr("text-anchor", "start") .attr("fill", "#000"); It doesn't show any error or anything in page :D EDIT: If I put an array with values here, it somehow works, but I need to change keys according the data .data(stack.keys(["apple","orange"])(data))
In the data, I put all the keys, but I assing them to zero (instead of not having the key at all)
dataset created with d3.nest isn't drawing correctly
I am trying to visualize a dataset to see major players in the pangolin trade. I want each country to be part of a categorical scale on the y-axis, and the x-axis is the date, and I want each trade instance to be represented as a circle, with x being the date it happened, y being the position for that particular country, and r being the number of instances accumulated so far (represented in my data as r). Basically my data is from 2010 to 2016, and includes the country name where pangolins are either imported to or exported from, the count (accumulated trade instances up until this date), and the date (yyyy-mm-dd). Below is part of my data, which I store in the variable trade: [{"date":"2010-10-22","country":"Thailand","rank":4,"count":1},{"date":"2010-10-28","country":"Malaysia","rank":2,"count":1},{"date":"2010-11-8","country":"Thailand","rank":4,"count":2},{"date":"2010-11-18","country":"Nepal","rank":7,"count":1},{"date":"2010-11-22","country":"China","rank":5,"count":1},{"date":"2010-11-22","country":"China","rank":5,"count":2},{"date":"2010-11-27","country":"India","rank":1,"count":1},{"date":"2010-11-28","country":"India","rank":1,"count":2},{"date":"2010-11-28","country":"India","rank":1,"count":3},{"date":"2010-11-30","country":"India","rank":1,"count":4},{"date":"2010-12-17","country":"Malaysia","rank":2,"count":2},{"date":"2010-12-22","country":"Vietnam","rank":3,"count":1},{"date":"2011-01-3","country":"Nepal","rank":7,"count":2},{"date":"2011-02-12","country":"Myanmar","rank":8,"count":1},{"date":"2011-02-25","country":"Malaysia","rank":2,"count":3},{"date":"2011-02-26","country":"Malaysia","rank":2,"count":4},{"date":"2011-03-2","country":"South Africa","rank":18,"count":1},{"date":"2011-03-2","country":"Rwanda","rank":35,"count":1},{"date":"2011-03-2","country":"Mozambique","rank":22,"count":1},{"date":"2011-03-2","country":"Kenya","rank":12,"count":1},{"date":"2011-03-3","country":"China","rank":5,"count":3},{"date":"2011-02-21","country":"Vietnam","rank":3,"count":2},{"date":"2011-03-24","country":"Malaysia","rank":2,"count":5},{"date":"2011-04-4","country":"Malaysia","rank":2,"count":6},{"date":"2011-03-25","country":"India","rank":1,"count":5},{"date":"2011-03-26","country":"Malaysia","rank":2,"count":7},{"date":"2011-04-2","country":"Nepal","rank":7,"count":3},{"date":"2011-04-20","country":"Thailand","rank":4,"count":3},{"date":"2011-05-11","country":"China","rank":5,"count":4},{"date":"2011-05-11","country":"China","rank":5,"count":5},{"date":"2011-05-26","country":"Indonesia","rank":6,"count":1},{"date":"2011-05-26","country":"India","rank":1,"count":6},{"date":"2011-05-29","country":"Indonesia","rank":6,"count":2},{"date":"2011-06-6","country":"India","rank":1,"count":7},{"date":"2011-06-7","country":"Mozambique","rank":22,"count":2},{"date":"2011-06-5","country":"India","rank":1,"count":8},{"date":"2011-06-12","country":"Malaysia","rank":2,"count":8},{"date":"2011-06-13","country":"Singapore","rank":21,"count":1},{"date":"2011-06-14","country":"Malaysia","rank":2,"count":9},{"date":"2011-06-17","country":"India","rank":1,"count":9},{"date":"2011-06-19","country":"India","rank":1,"count":10},{"date":"2011-06-26","country":"Thailand","rank":4,"count":4},{"date":"2011-06-30","country":"India","rank":1,"count":11},{"date":"2011-07-4","country":"Malaysia","rank":2,"count":10},{"date":"2011-07-5","country":"Zimbabwe","rank":14,"count":1},{"date":"2011-07-12","country":"Indonesia","rank":6,"count":3},{"date":"2011-07-18","country":"Indonesia","rank":6,"count":4},{"date":"2011-07-27","country":"Nepal","rank":7,"count":4},{"date":"2011-08-16","country":"Nepal","rank":7,"count":5},{"date":"2011-08-19","country":"Namibia","rank":33,"count":1},{"date":"2011-08-23","country":"India","rank":1,"count":12},{"date":"2010-09-17","country":"Myanmar","rank":8,"count":2},{"date":"2011-09-1","country":"Zimbabwe","rank":14,"count":2},{"date":"2011-09-13","country":"Indonesia","rank":6,"count":5},{"date":"2011-09-13","country":"Malaysia","rank":2,"count":11},{"date":"2011-09-13","country":"Myanmar","rank":8,"count":3},{"date":"2011-09-21","country":"Malaysia","rank":2,"count":12},{"date":"2011-09-26","country":"Thailand","rank":4,"count":5},{"date":"2011-09-30","country":"Indonesia","rank":6,"count":6},{"date":"2011-10-1","country":"Sri Lanka","rank":19,"count":1},{"date":"2011-10-6","country":"India","rank":1,"count":13},{"date":"2011-10-7","country":"India","rank":1,"count":14},{"date":"2011-10-18","country":"Indonesia","rank":6,"count":7},{"date":"2011-10-18","country":"Indonesia","rank":6,"count":8},{"date":"2011-10-18","country":"Indonesia","rank":6,"count":9},{"date":"2011-10-22","country":"India","rank":1,"count":15},{"date":"2011-10-24","country":"India","rank":1,"count":16},{"date":"2011-11-28","country":"United States","rank":32,"count":1},{"date":"2011-12-15","country":"Vietnam","rank":3,"count":3},{"date":"2011-12-27","country":"Thailand","rank":4,"count":6},{"date":"2012-01-4","country":"Philippines","rank":15,"count":1},{"date":"2012-01-5","country":"Kenya","rank":12,"count":2},{"date":"2012-01-6","country":"Philippines","rank":15,"count":2},{"date":"2012-01-17","country":"Philippines","rank":15,"count":3},{"date":"2012-01-24","country":"China","rank":5,"count":6},{"date":"2012-02-22","country":"Malaysia","rank":2,"count":13},{"date":"2012-03-1","country":"Malaysia","rank":2,"count":14},{"date":"2012-03-19","country":"Pakistan","rank":11,"count":1},{"date":"2012-03-21","country":"Malaysia","rank":2,"count":15},{"date":"2012-03-23","country":"Vietnam","rank":3,"count":4},{"date":"2012-04-27","country":"Vietnam","rank":3,"count":5},{"date":"2012-04-23","country":"Belgium","rank":31,"count":1},{"date":"2012-06-7","country":"Thailand","rank":4,"count":7},{"date":"2012-06-7","country":"Thailand","rank":4,"count":8}]; and here is my code: var margin = {left:120, top:20, right:0, bottom:50}; var width = 1000; var height = 800; var data=trade; var tradeByCountry = d3.nest() .key(function(d) { return d.country; }) .entries(trade); console.log(tradeByCountry); tradeByCountry.forEach(function(country){ country['number']=country.values.length; console.log(country); }); var country_colors = ["#393b79","#5254a3", '#6b6ecf', '#9c9ede', '#637939', '#8ca252','#b5cf6b','#cedb9c', '#8c6d31','#bd9e39','#e7ba52','#e7cb94','#843c39','#ad494a','#d6616b','#e7969c','#7b4173','#a55194', '#ce6dbd','#de9ed6', '#9467bd', '#c5b0d5','#3182bd', '#6baed6','#17becf','#9edae5','#e6550d','#fd8d3c','#fdae6b', '#31a354','#74c476','#a1d99b','#d62728','#ff9896','#7f7f7f','#c7c7c7']; var colors = d3.scale.ordinal() .domain(d3.range(tradeByCountry.length)) .range(country_colors); tradeByCountry.sort(function(x, y){ return d3.descending(x.number, y.number); }) var countriesArray = []; tradeByCountry.forEach(function(country){ countriesArray.push(country.key); }); console.log(countriesArray); var x = d3.time.scale() .rangeRound([0, width]); var y = d3.scale.linear() .range([height, 0]); var timeFormat = d3.time.format("%Y-%m-%d"); x.domain([timeFormat.parse('2010-10-22'),timeFormat.parse('2016-12-30')]); y.domain(countriesArray); 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 + ")"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end") .text("date"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "translate(35,-25)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("countries"); svg.selectAll(".dot") .data(tradeByCountry) .enter().append("circle") .attr("class", "dot") .attr("r", 7) .attr("cx", function(d) { return 0; }) .attr("cy", function(d,i) { return (height/tradeByCountry.length)*i; }) .style("fill", function(d,i) { return colors(i); }); svg.selectAll("text.labels") .data(tradeByCountry) .enter() .append("text") .text(function(d) {return d.key}) .attr("x", 0) .attr("y", function(d,i) { return (height/tradeByCountry.length)*i; }) .attr("transform", "translate(-120,5)") .attr("fill",function(d,i) { return colors(i); }); svg.selectAll('.line') .data(tradeByCountry) .enter().append('line') .attr("x1", 0) // x position of the first end of the line .attr("y1",function(d,i) { return (height/tradeByCountry.length)*i; }) .attr("x2", width) // x position of the second end of the line .attr("y2", function(d,i) { return (height/tradeByCountry.length)*i; }) .style("stroke",function(d,i) { return colors(i); }) .attr("id", function(d){return d.key}); //PROBLEM HERE!!!!!!!!!!! var g = svg .selectAll("g") .data(tradeByCountry) .enter().append("g") .selectAll(".dot") .data(function(d) {return d.values;}) .enter().append("circle") .attr("id", function(d){ return d.count;}) .attr("r", function(d){return d.count;}) .attr("cx", function(d,i) { console.log (d.date);return (x(timeFormat.parse(d.date))); }) .attr("cy", function(d,i) { return (height/tradeByCountry.length)*i; }) .style("fill", function(d,i) { return colors(i); }); I am having trouble specifically at the very last part of my code, where I can't get all the circles to draw and not in the correct r, as I would like r to increase as the trade accumulates over time for a country, instead it seems that r is different according to country:
Two things, firstly in your example .selectAll("g") at the point you mark as having the error was picking up g elements in the axes, so the first few countries weren't getting their data displayed. This doesn't appear to be the case in your screenshot but it was happening given the code you posted, so I just qualified those gs with the .country class. The second thing, and what was causing your specific problem was this line: .attr("cy", function(d,i) { return (height/tradeByCountry.length)*i; }) I'm guessing you thought the index variable i here was still tied to the tradeByCountry array, which it would have been after selectAll("g.country").data(tradebyCountry) but at this point we've now made a nested selection .selectAll(".dot") on d.values for each country's data so i is now indexing those list of values. So that line of code above will take the values for each country and separate them all vertically, always starting from the top row - when in fact you want them on the same line, just separated by country. What you wanted (I = India, M = Malaysia, T = Thailand) I--- I0 I1 I2 M--- M0M1 M2 T--- T0 T1 T2 What you were getting I--- I0 M0 T0 M--- M1 I1 T1 T--- I2 T2 M2 This was also hidden by the fact .attr("fill") also had the same mistake so the colours on each row were consistent (I've used d.rank instead to fix it). Solution 1: To make sure the values stay on the same correct line use i before you do the nested selection so it still refers to the countries like this, which will offset each g element by the correct amount: .attr("transform", function(d,i) { return "translate(0,"+(height/tradeByCountry.length)*i+")"; }) and simply set cy to be zero for everything you add to this g element and they'll all be in a straight line (and on the right line) Full code at the PROBLEM HERE! stage: var g = svg .selectAll("g.country") .data(tradeByCountry) .enter().append("g") .attr("class", "country") .attr("transform", function(d,i) { return "translate(0,"+(height/tradeByCountry.length)*i+")"; }) .selectAll(".dot") .data(function(d) {return d.values;}) .enter().append("circle") .attr("class", "dot") .attr("id", function(d){ return d.country+"_"+d.date+"_"+d.count;}) .attr("r", function(d){ return d.count;}) .attr("cx", function(d,i) { console.log (d.date);return (x(timeFormat.parse(d.date))); }) .attr("cy", function(d,i) { return 0; }) .style("fill", function(d,i) { return colors(d.rank); }); http://jsfiddle.net/d4typ567/1/ Solution 2: It's also the case that d3 maintains a parent index variable for nested selections (usually denoted ii) that can be passed into most d3 .attr and .style functions, so you could do .attr("cy", function(d,i, ii) { return (height/tradeByCountry.length)*ii; }) instead, but offsetting the g element is only 1 operation whereas this is done for every circle. Remember to do the same for the color (fill) function.
Trouble getting D3-generated SVG to appear on screen consistently
I'm currently working on a Javascript project where I am trying to render the following chart using d3. The problem, though is that sometimes svg elements for the yellow chart fails to show sometimes (and at random). The problem usually goes away after I refresh the page (once or multiple times). When this happens, the browser dev tools still show that the svg elements are present: This only happens to the yellow chart and never to the blue chart. This is the function that I used to create the chart: function makeGraphs(filterDisease,filterAir) { var width = 840; var height = 110; var barPadding = 1; var dateFormat = d3.time.format("%Y-%m-%d"); var xScale = d3.time.scale() .range([0,width-50]); var yScaleDisease = d3.scale.linear() .range([height,0]); var yScaleAir = d3.scale.linear() .range([0,height]); var xAxis = d3.svg.axis() .scale(xScale) .orient("top"); var yAxisDisease = d3.svg.axis() .scale(yScaleDisease) .orient("left") .ticks(5); var yAxisAir = d3.svg.axis() .scale(yScaleAir) .orient("left") .ticks(5); var svgDisease = d3.select("body").select("#comparison-chart") .append("svg") .attr("class","chart-comparison") .attr("id","chart-comparison-disease") .attr("width",width) .attr("height",height); var svgAir = d3.select("body").select("#comparison-chart") .append("svg") .attr("class", "chart-comparison") .attr("id", "chart-comparison-air") .attr("width", width) .attr("height", height + 20); d3.json("/datasets/disease", function(error, datasetDisease) { datasetDisease.forEach(function(d) { d["date"] = dateFormat.parse(d["date"]); d["total"] = 0 for (i=0;i<filterDisease.length;i++) { d["total"] += d[filterDisease[i]]; } }); var ndxDisease = crossfilter(datasetDisease); var dateDimDisease = ndxDisease.dimension(function(d) {return d["date"];}); var total_disease = dateDimDisease.group().reduceSum(function(d) {return d["total"];}); var datasetDisease_formatted = total_disease.all(); xScale.domain([new Date(datasetDisease_formatted[0]["key"]), new Date(datasetDisease_formatted[datasetDisease_formatted.length -1]["key"])]); yScaleDisease.domain([0,d3.max(datasetDisease_formatted,function(d) {return d["value"];})]); svgDisease.selectAll("rect") .data(datasetDisease_formatted) .enter() .append("rect") .attr("x", function(d) { return xScale(new Date(d["key"]));}) .attr("y", function(d) { return yScaleDisease(d["value"]); }) .attr("width", (width-50)/datasetDisease_formatted.length - barPadding) .attr("height", function(d) { return height - yScaleDisease(d["value"]); }) .attr("fill", "#19C3CD") .attr("transform", "translate(50,0)"); svgDisease.append("g") .attr("class", "y axis") .attr("transform", "translate(30,0)") .call(yAxisDisease); svgDisease.append("text") .text("Disease Records") .attr("x", 650) .attr("y", 20); }); d3.json("/datasets/air", function(error, datasetAir) { datasetAir.forEach(function(d) { d["date"] = dateFormat.parse(d["date"]); d["total"] = 0 for (i=0;i<filterAir.length;i++) { d["total"] += d[filterAir[i]]; } }); var ndxAir = crossfilter(datasetAir); var dateDimAir = ndxAir.dimension(function(d) {return d["date"];}); var total_pollutants = dateDimAir.group().reduceSum(function(d) {return d["total"];}); var datasetAir_formatted = total_pollutants.all(); yScaleAir.domain([0, d3.max(datasetAir_formatted, function(d) {return d["value"];})]) svgAir.selectAll("rect") .data(datasetAir_formatted) .enter() .append("rect") .attr("x", function(d) { return xScale(new Date(d["key"]));}) .attr("y",0) .attr("width", (width-50)/datasetAir_formatted.length - barPadding) .attr("height", function(d) { return yScaleAir(d["value"]); }) .attr("fill", "#FED40A") .attr("transform", "translate(50,0)"); svgAir.append("g") .attr("class","x axis") .attr("transform", "translate(50," + (height+20) + ")") .call(xAxis); svgAir.append("g") .attr("class", "y axis") .attr("transform", "translate(30,0)") .call(yAxisAir); svgAir.append("text") .text("Air Pollutant") .attr("x", 650) .attr("y", 90); }); }; Is there any problem with my code that is causing this issue? Oh, and I'm using crossfilter as well to format my JSON data.
Horizontal gradient in a bar chart
I have a bar chart. function svg_render(data, svg) { var node = d3.select(svg).append("svg") .attr("class", "chart") .attr("width", width) .attr("height", height); var y = d3.scale.linear().range([height, -height]); var max_val = d3.max(data, function(d) { return d; }); y.domain([-max_val, max_val]); var x = d3.scale.linear().domain([0, data.length]); var bar_width = width / data.length; var chart = node.attr("width", width).attr("height", height); var bar = chart.selectAll("g") .data(data) .enter().append("g") // svg "group" .attr("transform", function(d, i) { return "translate(" + i * bar_width + ",0)"; }); bar.append("rect") .attr("y", function(d) { var yv = height - Math.abs(y(d) / 2) - height / 2 + 2; return yv; }) .attr("height", function(d) { return Math.abs(y(d)); }) .attr("width", bar_width); var axis = d3.svg.axis() .scale(y) .ticks(12) .orient("left"); d3.select(".svg").append("svg") .attr("class", "axis") .attr("width", 60) .attr("height", height) .append("g") .attr("transform", "translate(40," + (height / 2) + ")") .call(axis); } would be great to be able to have a gradient towards the chart. An horizontal one. Something like Each bar can have a specific rgb code, but would be better if it was all calculated with a single gradient. Also, bonus question, why i have that white lines as a border of my bars if i actually didn't specify any border at all (feels like aliasing svg issue)
So, i managed to achieve that by doing var color = d3.scale.linear() .domain([0, width]) .range(["hsl(62,100%,90%)", "hsl(222,30%,20%)"]); And later on, for each bar element append .style("fill", function(d, i) { return color(i); }); wonder if it's the fast way to do this
How do we get nested json array values using D3JS
I'm new to D3JS, trying to use the nested json array to show the bar chart.Below is my json. [ { "image":"suresh.jpg", "name":"Suresh", "email":"abc#gmail.com", "barValues":[ { "letter":"A", "frequency":".04253" }, { "letter":"B", "frequency":".12702" }, { "letter":"C", "frequency":".02288" } ] } ] Below is my D3 code. $scope.showDetails = function(relatedData) { $http.get("searchInfo.json").success(function(response) { var x = response; $scope.data = []; var searchT = relatedData; var margin ={top:20, right:30, bottom:30, left:20}, width=360-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 chart = d3.select("#chart") .append("svg") .attr("width", 600) .attr("height", height+margin.top+margin.bottom); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); d3.json(searchT+'Details.json', function(error, data){ x.domain(data.map(function(d){ return d.letter})); y.domain([0, d3.max(data, function(d){return d.frequency})]); var bar = chart.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i){ return "translate("+x(d.letter)+", 0)"; }); bar.append("rect") .attr("y", function(d) { return margin.top+margin.right; }) .attr("x", function(d,i){ return x.rangeBand()+(margin.left/4); }) .attr("height", function(d) { return height - y(d.frequency); }) .attr("width", 29); bar.append("text") .attr("x", x.rangeBand()+margin.left ) .attr("y", function(d) { return y(d.frequency) -10; }) .attr("dy", ".75em") .text(function(d) { return d.frequency; }); chart.append("g") .attr("class", "x axis") .attr("transform", "translate("+margin.left+","+ height+")") .call(xAxis); chart.append("g") .attr("class", "y axis") .attr("transform", "translate("+margin.left+",0)") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frequency"); }); }); }; } I'm not able to get the X-axis and Y-axis values. I've tried in different ways but was not working.Could any one help me on this,Thanks.