How to visualize JSON dictionary on horizontal D3.js bar chart? - json

I have a list named geneexp which contains dictionaries inside of it as a JSON.
The thing I would like to do is to visualize the fpkm2 values on the right and fpkm1 values on the left as a horizontal bar chart just like here
Does D3.js accept dot in the numerical values or should I change the values by using comma? because I need whole value.
I tried to imitate it by changing datas but it didn't work. Here is what i have tried
var geneexp = [{"chr":"1","end":79110897,"fpkm1":4.50805,"fpkm2":17.1285,"gene":"IFI44L","log2ratio":1.92583,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":79085606},{"chr":"1","end":109749401,"fpkm1":17.2746,"fpkm2":42.2573,"gene":"KIAA1324","log2ratio":1.29055,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":109648572},{"chr":"1","end":149783928,"fpkm1":3.79975,"fpkm2":18.0374,"gene":"FCGR1A","log2ratio":2.24701,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":149754226},{"chr":"1","end":663527,"fpkm1":2.0079,"fpkm2":0,"gene":"RP11-206L10.1","log2ratio":-10000000000,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":661610},{"chr":"1","end":26701013,"fpkm1":7.31716,"fpkm2":22.1062,"gene":"ZNF683","log2ratio":1.5951,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":26688124},{"chr":"1","end":40261668,"fpkm1":87.1441,"fpkm2":0,"gene":"RP1-118J21.24","log2ratio":-10000000000,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":40261514},{"chr":"1","end":68698803,"fpkm1":116.196,"fpkm2":40.7994,"gene":"WLS","log2ratio":-1.50993,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":68167148},{"chr":"1","end":153348125,"fpkm1":334.978,"fpkm2":986.306,"gene":"S100A12","log2ratio":1.55797,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":153346183},{"chr":"1","end":243265046,"fpkm1":2.09012,"fpkm2":8.19733,"gene":"RP11-261C10.3","log2ratio":1.97157,"pvalue":0.0002,"qvalue":0.0396421,"sample1":"q1","sample2":"q2","significant":true,"start":243218159},{"chr":"1","end":243265046,"fpkm1":2.09012,"fpkm2":8.19733,"gene":"RP11-261C10.6","log2ratio":1.97157,"pvalue":0.0002,"qvalue":0.0396421,"sample1":"q1","sample2":"q2","significant":true,"start":243218159},{"chr":"10","end":6277513,"fpkm1":21.6928,"fpkm2":46.1653,"gene":"PFKFB3","log2ratio":1.08959,"pvalue":0.00025,"qvalue":0.047075,"sample1":"q1","sample2":"q2","significant":true,"start":6186880},{"chr":"10","end":1779670,"fpkm1":0.0869107,"fpkm2":4.44899,"gene":"ADARB2","log2ratio":5.6778,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":1228072},{"chr":"11","end":44105772,"fpkm1":11.185,"fpkm2":35.0837,"gene":"ACCS","log2ratio":1.64924,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":44087474},{"chr":"11","end":59634048,"fpkm1":2.72747,"fpkm2":10.5967,"gene":"TCN1","log2ratio":1.95799,"pvalue":0.00025,"qvalue":0.047075,"sample1":"q1","sample2":"q2","significant":true,"start":59620272},{"chr":"11","end":102597781,"fpkm1":2.085,"fpkm2":21.2457,"gene":"MMP8","log2ratio":3.34905,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":102582472},{"chr":"12","end":58212487,"fpkm1":48.7468,"fpkm2":11.4797,"gene":"AVIL","log2ratio":-2.08622,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":58156116},{"chr":"12","end":58212487,"fpkm1":48.7468,"fpkm2":11.4797,"gene":"U6","log2ratio":-2.08622,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":58156116},{"chr":"13","end":53626196,"fpkm1":1.30126,"fpkm2":10.4113,"gene":"OLFM4","log2ratio":3.00017,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":53602467},{"chr":"14","end":21250626,"fpkm1":61.36,"fpkm2":28.3291,"gene":"RNASE6","log2ratio":-1.11501,"pvalue":0.00025,"qvalue":0.047075,"sample1":"q1","sample2":"q2","significant":true,"start":21249209},{"chr":"14","end":106725733,"fpkm1":244.435,"fpkm2":94.9557,"gene":"IGHV3-23","log2ratio":-1.36413,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":106725200},{"chr":"15","end":40569688,"fpkm1":1.13809,"fpkm2":4.07193,"gene":"BUB1B","log2ratio":1.8391,"pvalue":0.00015,"qvalue":0.0309534,"sample1":"q1","sample2":"q2","significant":true,"start":40453223},{"chr":"15","end":40569688,"fpkm1":1.13809,"fpkm2":4.07193,"gene":"PAK6","log2ratio":1.8391,"pvalue":0.00015,"qvalue":0.0309534,"sample1":"q1","sample2":"q2","significant":true,"start":40453223},{"chr":"15","end":40569688,"fpkm1":1.13809,"fpkm2":4.07193,"gene":"RP11-133K1.2","log2ratio":1.8391,"pvalue":0.00015,"qvalue":0.0309534,"sample1":"q1","sample2":"q2","significant":true,"start":40453223},{"chr":"15","end":82577271,"fpkm1":4.60645,"fpkm2":0.0831472,"gene":"FAM154B","log2ratio":-5.79184,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":82555150},{"chr":"15","end":41806085,"fpkm1":12.6574,"fpkm2":3.4051,"gene":"LTK","log2ratio":-1.89421,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":41795835},{"chr":"17","end":20947073,"fpkm1":3.0439,"fpkm2":0,"gene":"AC090774.2","log2ratio":-10000000000,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":20717932},{"chr":"17","end":20947073,"fpkm1":3.0439,"fpkm2":0,"gene":"RP11-344E13.3","log2ratio":-10000000000,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":20717932},{"chr":"17","end":20947073,"fpkm1":3.0439,"fpkm2":0,"gene":"RP11-381P6.1","log2ratio":-10000000000,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":20717932},{"chr":"17","end":20947073,"fpkm1":3.0439,"fpkm2":0,"gene":"RP11-746M1.2","log2ratio":-10000000000,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":20717932},{"chr":"17","end":56358296,"fpkm1":2.22762,"fpkm2":10.5089,"gene":"MPO","log2ratio":2.23803,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":56347216},{"chr":"17","end":62936347,"fpkm1":66.2861,"fpkm2":537.599,"gene":"PLEKHM1P","log2ratio":3.01975,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62745654},{"chr":"17","end":62936347,"fpkm1":66.2861,"fpkm2":537.599,"gene":"RP11-927P21.4","log2ratio":3.01975,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62745654},{"chr":"17","end":62936347,"fpkm1":66.2861,"fpkm2":537.599,"gene":"RP11-927P21.5","log2ratio":3.01975,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62745654},{"chr":"17","end":62936347,"fpkm1":66.2861,"fpkm2":537.599,"gene":"RP11-927P21.6","log2ratio":3.01975,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62745654},{"chr":"17","end":62936347,"fpkm1":66.2861,"fpkm2":537.599,"gene":"RP13-104F24.1","log2ratio":3.01975,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62745654},{"chr":"17","end":62936347,"fpkm1":66.2861,"fpkm2":537.599,"gene":"hsa-mir-6080","log2ratio":3.01975,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62745654},{"chr":"19","end":832017,"fpkm1":2.30561,"fpkm2":12.5563,"gene":"AZU1","log2ratio":2.44519,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":825096},{"chr":"19","end":51308186,"fpkm1":927.54,"fpkm2":5.58845,"gene":"C19orf48","log2ratio":-7.37482,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":51300960},{"chr":"19","end":51308186,"fpkm1":927.54,"fpkm2":5.58845,"gene":"SNORD88B","log2ratio":-7.37482,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":51300960},{"chr":"19","end":51308186,"fpkm1":927.54,"fpkm2":5.58845,"gene":"SNORD88C","log2ratio":-7.37482,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":51300960},{"chr":"19","end":55660722,"fpkm1":0.904421,"fpkm2":4.90537,"gene":"TNNT1","log2ratio":2.4393,"pvalue":0.0002,"qvalue":0.0396421,"sample1":"q1","sample2":"q2","significant":true,"start":55644161},{"chr":"2","end":103069345,"fpkm1":26.8634,"fpkm2":79.7291,"gene":"AC007278.3","log2ratio":1.56946,"pvalue":0.0001,"qvalue":0.0209222,"sample1":"q1","sample2":"q2","significant":true,"start":103034998},{"chr":"2","end":103069345,"fpkm1":26.8634,"fpkm2":79.7291,"gene":"IL18RAP","log2ratio":1.56946,"pvalue":0.0001,"qvalue":0.0209222,"sample1":"q1","sample2":"q2","significant":true,"start":103034998},{"chr":"2","end":119752236,"fpkm1":3.81979,"fpkm2":14.0364,"gene":"MARCO","log2ratio":1.87761,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":119699741},{"chr":"2","end":162841792,"fpkm1":3.96841,"fpkm2":0.485637,"gene":"AC009487.5","log2ratio":-3.03061,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":162272604},{"chr":"2","end":162841792,"fpkm1":3.96841,"fpkm2":0.485637,"gene":"SLC4A10","log2ratio":-3.03061,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":162272604},{"chr":"2","end":162841792,"fpkm1":3.96841,"fpkm2":0.485637,"gene":"TBR1","log2ratio":-3.03061,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":162272604},{"chr":"20","end":24940564,"fpkm1":119.63,"fpkm2":349.159,"gene":"CST7","log2ratio":1.5453,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":24929865},{"chr":"20","end":36965907,"fpkm1":4.81264,"fpkm2":23.3885,"gene":"BPI","log2ratio":2.2809,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":36838889},{"chr":"20","end":43805185,"fpkm1":89.1047,"fpkm2":418.219,"gene":"PI3","log2ratio":2.23068,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":43803516},{"chr":"20","end":3687775,"fpkm1":0.740776,"fpkm2":3.19236,"gene":"SIGLEC1","log2ratio":2.10751,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":3667616},{"chr":"20","end":49493714,"fpkm1":18196.3,"fpkm2":8056.63,"gene":"TMSB4XP6","log2ratio":-1.1754,"pvalue":0.0001,"qvalue":0.0209222,"sample1":"q1","sample2":"q2","significant":true,"start":49411430},{"chr":"20","end":62587775,"fpkm1":17.0093,"fpkm2":292.901,"gene":"MIR1914","log2ratio":4.10602,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62571185},{"chr":"20","end":62587775,"fpkm1":17.0093,"fpkm2":292.901,"gene":"MIR647","log2ratio":4.10602,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62571185},{"chr":"20","end":62587775,"fpkm1":17.0093,"fpkm2":292.901,"gene":"UCKL1","log2ratio":4.10602,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":62571185},{"chr":"21","end":42831141,"fpkm1":24.1349,"fpkm2":55.4697,"gene":"MX1","log2ratio":1.20058,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":42792230},{"chr":"22","end":23165787,"fpkm1":40.261,"fpkm2":377.429,"gene":"D86994.1","log2ratio":3.22875,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":23040273},{"chr":"22","end":23165787,"fpkm1":40.261,"fpkm2":377.429,"gene":"D87015.1","log2ratio":3.22875,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":23040273},{"chr":"22","end":23165787,"fpkm1":40.261,"fpkm2":377.429,"gene":"IGLV2-14","log2ratio":3.22875,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":23040273},{"chr":"22","end":23165787,"fpkm1":40.261,"fpkm2":377.429,"gene":"IGLV2-23","log2ratio":3.22875,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":23040273},{"chr":"22","end":23165787,"fpkm1":40.261,"fpkm2":377.429,"gene":"IGLV2-8","log2ratio":3.22875,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":23040273},{"chr":"22","end":23165787,"fpkm1":40.261,"fpkm2":377.429,"gene":"IGLV3-12","log2ratio":3.22875,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":23040273},{"chr":"22","end":23165787,"fpkm1":40.261,"fpkm2":377.429,"gene":"MIR650","log2ratio":3.22875,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":23040273},{"chr":"22","end":23243617,"fpkm1":49.5145,"fpkm2":11.3554,"gene":"IGLC2","log2ratio":-2.12448,"pvalue":0.0001,"qvalue":0.0209222,"sample1":"q1","sample2":"q2","significant":true,"start":23243155},{"chr":"22","end":29564321,"fpkm1":11.9594,"fpkm2":27.9691,"gene":"KREMEN1","log2ratio":1.22568,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":29469065},{"chr":"3","end":48266981,"fpkm1":25.9102,"fpkm2":98.0926,"gene":"CAMP","log2ratio":1.92062,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":48264836},{"chr":"3","end":101489406,"fpkm1":3.09138,"fpkm2":622.79,"gene":"CEP97","log2ratio":7.65435,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":101442768},{"chr":"3","end":46546365,"fpkm1":20.1568,"fpkm2":149.34,"gene":"LTF","log2ratio":2.88926,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":46477135},{"chr":"3","end":146262651,"fpkm1":31.9606,"fpkm2":82.6978,"gene":"PLSCR1","log2ratio":1.37156,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":146232966},{"chr":"4","end":6698897,"fpkm1":92.3842,"fpkm2":24.0847,"gene":"S100P","log2ratio":-1.93953,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":6694795},{"chr":"4","end":79531597,"fpkm1":26.8309,"fpkm2":114.07,"gene":"ANXA3","log2ratio":2.08795,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":79472672},{"chr":"6","end":29865563,"fpkm1":7.44281,"fpkm2":0,"gene":"HLA-T","log2ratio":-10000000000,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":29864430},{"chr":"6","end":29897009,"fpkm1":19.3003,"fpkm2":107.257,"gene":"HLA-K","log2ratio":2.47438,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":29892499},{"chr":"6","end":35992645,"fpkm1":3.06182,"fpkm2":9.49569,"gene":"SLC26A8","log2ratio":1.63288,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":35911290},{"chr":"6","end":49712150,"fpkm1":1.15836,"fpkm2":10.0617,"gene":"CRISP3","log2ratio":3.11871,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":49695096},{"chr":"7","end":10516505,"fpkm1":0,"fpkm2":6.30144,"gene":"AC009945.4","log2ratio":10000000000,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":10516207},{"chr":"7","end":129396922,"fpkm1":12.534,"fpkm2":48.0358,"gene":"NRF1","log2ratio":1.93826,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":129251554},{"chr":"7","end":129396922,"fpkm1":12.534,"fpkm2":48.0358,"gene":"RNA5SP244","log2ratio":1.93826,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":129251554},{"chr":"7","end":142428984,"fpkm1":27.6122,"fpkm2":247.735,"gene":"TRBV28","log2ratio":3.16542,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":142428483},{"chr":"7","end":56119297,"fpkm1":5.02525,"fpkm2":1.00895,"gene":"PSPH","log2ratio":-2.31634,"pvalue":0.0001,"qvalue":0.0209222,"sample1":"q1","sample2":"q2","significant":true,"start":56078743},{"chr":"7","end":150502208,"fpkm1":47.706,"fpkm2":15.0642,"gene":"TMEM176B","log2ratio":-1.66304,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":150488372},{"chr":"8","end":6795860,"fpkm1":6.34889,"fpkm2":30.9513,"gene":"DEFA4","log2ratio":2.28542,"pvalue":0.0002,"qvalue":0.0396421,"sample1":"q1","sample2":"q2","significant":true,"start":6793343},{"chr":"8","end":99306621,"fpkm1":3.74493,"fpkm2":41.811,"gene":"NIPAL2","log2ratio":3.48087,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":99202060},{"chr":"8","end":99306621,"fpkm1":3.74493,"fpkm2":41.811,"gene":"U6","log2ratio":3.48087,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":99202060},{"chr":"9","end":130915734,"fpkm1":16.756,"fpkm2":102.235,"gene":"LCN2","log2ratio":2.60914,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":130911349},{"chr":"9","end":125667813,"fpkm1":13.5883,"fpkm2":47.7743,"gene":"RC3H2","log2ratio":1.81387,"pvalue":0.0001,"qvalue":0.0209222,"sample1":"q1","sample2":"q2","significant":true,"start":125606559},{"chr":"Y","end":7249743,"fpkm1":31.7483,"fpkm2":7.34532,"gene":"PRKY","log2ratio":-2.11178,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":7142012},{"chr":"Y","end":7249743,"fpkm1":31.7483,"fpkm2":7.34532,"gene":"U6","log2ratio":-2.11178,"pvalue":5e-05,"qvalue":0.0115877,"sample1":"q1","sample2":"q2","significant":true,"start":7142012}],
margin = {
top: 30,
right: 10,
bottom: 10,
left: 10
},
width = 1200 - margin.left - margin.right,
height = 1200 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width])
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], .2);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top");
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([-800,800])
y.domain(data.map(function (d) {return d.gene;}));
svg.selectAll(".bar")
.data(geneexp) //changed as data to geneexp
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(Math.min(0, d.fpkm2)); //changed as value to fpkm2
})
.attr("y", function (d) {
return y(d.gene); //changed as name to fpmk1
})
.attr("width", function (d) {
return Math.abs(x(d.fpkm2) - x(0));
})
.attr("height", y.rangeBand());
svg.selectAll(".bar2")
.data(geneexp)
.enter().append("rect")
.attr("class", "bar2")
.attr("x", function (d) {
return x(Math.min(0, -d.fpkm1));
})
.attr("y", function (d) {
return y(d.gene);
})
.attr("width", function (d) {
return Math.abs(x(-d.fpkm1) - x(0));
})
.attr("height", y.rangeBand());
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("x1", x(0))
.attr("x2", x(0))
.attr("y2", height);
function type(d) {
d.value = +d.value;
return d;
}
Any help will be appreciated.
Thanks a lot.


Inspect your console for errors.
In this line:
y.domain(data.map(function (d) {return d.gene;}));
data should be geneexp
Example here.

Related

How to Add Multiline Text Tooltips in Bar Chart D3 JS

I am looking a way how to add multiline text in one box tooltips using d3.v3.min.js . My illustration behavior like this :
And the code that I made is like this :
HTML, CSS, Javascript
function responsivefy(svg) {
// get container + svg aspect ratio
var container = d3.select(svg.node().parentNode),
width = parseInt(svg.style("width")),
height = parseInt(svg.style("height")),
aspect = width / height;
// add viewBox and preserveAspectRatio properties,
// and call resize so that svg resizes on inital page load
svg.attr("viewBox", "0 0 " + width + " " + height)
.attr("perserveAspectRatio", "xMinYMid")
.call(resize);
d3.select(window).on("resize." + container.attr("id"), resize);
// get width of container and resize svg to fit it
function resize() {
var targetWidth = parseInt(container.style("width"));
svg.attr("height", Math.round(targetWidth / aspect));
svg.attr("width", targetWidth);
}
}
var arrData = [
{"category":"Diversity & Inlusion 1", "actual":4.2, "target":5, "prediction":40, "skala":"20%"},
{"category":"Image 1", "actual":4.5, "target":4.2,"prediction":60, "skala":"40%"},
{"category":"Image 2", "actual":4.1, "target":4,"prediction":80, "skala":"60%"},
{"category":"Job Security 1", "actual":4.4, "target":4.3,"prediction":60, "skala":"100%"},
{"category":"Job Security 2", "actual":4.4, "target":4.3,"prediction":40, "skala":"100%"},
{"category":"Job Security 3", "actual":4.4, "target":4.3,"prediction":20, "skala":"100%"},
{"category":"Image 3", "actual":4.4, "target":4.3,"prediction":10, "skala":"100%"},
{"category":"Diversity & Inlusion 2", "actual":4.4, "target":4.3,"prediction":30, "skala":"100%"},
{"category":"Values", "actual":4.4, "target":4.3,"prediction":75, "skala":"100%"},
{"category":"Collaboration", "actual":4.4, "target":4.3,"prediction":45, "skala":"100%"}
];
//console.log(arrData);
//set up svg using margin conventions - we'll need plenty of room on the left for labels
var margin = {
top: 15, right: 95, bottom: 15, left: 60
};
var marginBar2 = {
top:10
};
var width = 650 - margin.left - margin.right;
var height = 768 - margin.top - margin.bottom;
var svgColor = "white";
var barHeight = 200;
//Create Main SVG
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("background-color", svgColor);
// .call(responsivefy);
//Create xScale and yScale
var xScale1 = d3.scale.linear()
.range([0, width * 0.70])
.domain([0, d3.max(arrData, function (d) {
return d.prediction;
})]);
var xScale2 = d3.scale.linear()
.range([0, width * 0.70])
.domain([0, d3.max(arrData, function (d) {
return d.target;
})]);
var xScale3 = d3.scale.ordinal()
.rangeRoundBands([0, width * 0.93])
.domain(arrData.map(function (d) {
return d.skala;
}));
var yScale = d3.scale.ordinal()
.rangeRoundBands([0, height])
.domain(arrData.map(function (d) {
return d.category;
}));
//Make yAxis to Show Category
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(0)
.orient("left");
var gyAxis = svg.append("g")
//.attr("class", "y axis")
.attr("transform", "translate(" + width * 0.35 + "," + height * 0 + ")")
.style("text-anchor", "start")
.style("font-size", 12)
.style("font-weight", "bold")
.style("fill", "#212121")
.call(yAxis);
//Make xAxis to Show Category
// var xAxis = d3.svg.axis()
// .scale(xScale3)
// .tickSize(5)
// .orient("bottom");
// var gxAxis = svg.append("g")
// .attr("class", "x axis")
// .style("font-size", 14)
// .style("font-weight", "bold")
// .style("fill", "#212121")
// .attr("transform", "translate(" + width * 0.385 + "," + height * 1 + ")")
// .call(xAxis);
var bars1 = svg.selectAll(".bar")
.data(arrData).enter()
.append("g")
.attr("transform", "translate(" + width * 0.50 + "," + 0 + ")");
bars1.append("rect")
.attr("class", "bar")
.attr("y", function (d) {
return yScale(d.category);
})
.attr("height", barHeight - 140)
.attr("x", 0)
// .style("fill", "#c0c0c0")
.attr("width", function(d){
return xScale2(d.target);
})
.on("mouseover", function(){
tooltip1.style("display", null);
})
.on("mouseout", function(){
tooltip1.style("display", "none");
})
.on("mousemove", function(d){
var xPos = d3.mouse(this)[0] - 10;
var yPos = d3.mouse(this)[1] - 15;
tooltip1.attr("transform", "translate(" + xPos + "," + yPos +")");
tooltip1.selectAll("text").text("DI4");
tooltip1.selectAll("rect")
.attr("width", 250)
.attr("width", (function(d) {
return this.parentNode.getBBox().width;
}));
});
var bars2 = svg.selectAll(".bar2nd")
.data(arrData).enter()
.append("g")
.attr("transform", "translate(" + width * 0.50 + "," + marginBar2.top + ")");
bars2.append("rect")
.attr("class", "bar2nd")
.attr("y", function (d) {
return yScale(d.category);
})
.attr("height", barHeight - 160)
.attr("x", 0)
.attr("width", function (d) {
return xScale1(d.prediction);
})
.on("mouseover", function(){
tooltip2.style("display", null);
})
.on("mouseout", function(){
tooltip2.style("display", "none");
})
.on("mousemove", function(d){
var xPos = d3.mouse(this)[0] - 10;
var yPos = d3.mouse(this)[1] - 15;
tooltip2.attr("transform", "translate(" + xPos + "," + yPos +")");
tooltip2.selectAll("text").html("DI3");
tooltip2.selectAll("rect")
.attr("width", 250)
.attr("width", (function(d) {
return this.parentNode.getBBox().width;
}));
});
var barValue1 = svg.selectAll(".barValue1")
.data(arrData).enter()
.append("g")
.attr("transform", "translate(" + width * 0.40 + "," + height * 0.055 + ")");
barValue1.append("text")
.attr("class", "barValue1")
.attr("y", function (d) {
return yScale(d.category);
})
.attr("x", 0)
.style("font-size", 18)
.style("font-weight", "bold")
.style("fill", "#212121")
.html(function(d){
return d3.format(",.2r")(d.actual);
});
var barValue2 = svg.selectAll(".barValue2")
.data(arrData).enter()
.append("g")
.attr("transform", "translate(" + width * 0.51 + "," + height * 0.055 + ")");
barValue2.append("text")
.attr("class", "barValue2")
.attr("y", function (d) {
return yScale(d.category);
})
.attr("x", 0)
.style("font-size", 18)
// .style("font-weight", "bold")
.style("fill", "white")
.text(function(d){
return d3.format(".2%")(d.prediction / 100);
});
var tooltip1 = svg.selectAll("g.tooltip1")
.data(arrData)
.enter()
.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip1.append("rect")
// .attr("width", width * 0.7)
.attr("height", height * 0.2)
.style("fill", "white")
.style("stroke", "#969696")
.attr("stroke-width",1)
.style("opacity", 1);
tooltip1.append("text")
.attr("id", "txt1")
.attr("x", width * 0.05)
.attr("dy", height * 0.05)
.attr("font-size", 18)
.attr("font-weight", "bold");
var tooltip2 = svg.selectAll("g.tooltip1")
.data(arrData)
.enter()
.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip2.append("rect")
// .attr("width", width * 0.7)
.attr("height", height * 0.2)
.style("fill", "white")
.style("stroke", "#969696")
.attr("stroke-width",1)
.style("opacity", 1);
tooltip2.append("text")
.attr("id", "txt1")
.attr("x", width * 0.05)
.attr("dy", height * 0.05)
.attr("font-size", 18)
.attr("font-weight", "bold");
body{
font-family: "Arial", sans-serif;
}
.bar{
fill: #c0c0c0;
}
.bar:hover{
fill:rgb(95, 109, 148);
}
.bar2nd{
fill:#00315b;
}
.bar2nd:hover{
fill:#3e73b8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
is there anyone could help about my problem ? cause I need to get the code for multiline text inside tooltips box.

It might be more straightforward to append the tooltips using divs rather than svg rects - for instance, if you added:
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
Into your code, then you could make it appear and disappear plus add multi-line text using:
.on("mouseover", function(d){
var xPos = d3.mouse(this)[0];
var yPos = d3.mouse(this)[1];
tooltip.style("left", xPos + "px")
.style("top", yPos + "px")
.html("<p class='tooltip'>" + d.category + "<br><br>Line 2<br><br>Etc</p>")
.transition().delay(200).style("opacity", 0.9);
})
.on("mouseout", function(){
tooltip.transition().delay(0).style("opacity", 0);
})
You can add the same styling you had before using CSS properties, as below:
div.tooltip {
width: 200px;
height: 125px;
background-color: white;
border: 1px solid #969696;
position: absolute;
}
p.tooltip {
font-size: 18;
font-weight: 1em;
padding-left: 10px;
}
I've mocked this up in a JSFiddle here - it might have some of your code missing, apologies if so - but it should give a good idea how to merge it in if you want to use the code. Let me know if you have any questions! You should be able to get some more information from here if you need it too.

Adding transition Image

I am trying to make a d3 visual through block builder.
I want the picture of tourdefrance to appear first in the whole container and then fade away and then the bars to appear.
I know I have made it a little complicated by copying from various sources.
Would be great if someone could help out and also explain the problem.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: gold;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// Mike Bostock "margin conventions"
var margin = {top: 10, right: 20, bottom: -500, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// D3 scales = just math
// x is a function that transforms from "domain" (data) into "range" (usual pixels)
// domain gets set after the data loads
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
// D3 Axis - renders a d3 scale in SVG
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
// create an SVG element (appended to body)
// set size
// add a "g" element (think "group")
// annoying d3 gotcha - the 'svg' variable here is a 'g' element
// the final line sets the transform on <g>, not on <svg>
body = d3.select("body");
show_image("https://upload.wikimedia.org/wikipedia/en/e/eb/Tour_de_France_logo.svg")
function show_image(source) {
var img = body.append("img").attr("src", source).style("opacity", 0)
; img.transition().duration(5000).ease(d3.easeLinear).style("opacity", 1)
}
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 + ")")
svg.append("g")
.attr("class", "y axis")
.append("text") // just for the title (ticks are automatic)
.attr("transform", "rotate(-90)") // rotate the text!
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
// d3.tsv is a wrapper around XMLHTTPRequest, returns array of arrays (?) for a TSV file
// type function transforms strings to numbers, dates, etc.
d3.csv("https://gist.githubusercontent.com/vaibhavjaitly/1418c9beb1c71f6acffdaf21669e1956/raw/45af8ebcc87d6641eee8b4a60b7bafb8326607a0/data.csv", type, function(error, data) {
replay(data);
});
function type(d) {
// + coerces to a Number from a String (or anything)
d.Frequency = +d.Frequency;
return d;
}
function replay(data) {
var slices = [];
for (var i = 0; i < data.length; i++) {
slices.push(data.slice(0, i+1));
}
slices.forEach(function(slice, index){
setTimeout(function(){
draw(slice);
}, index * 300);
});
}
function draw(data) {
// measure the domain (for x, unique letters) (for y [0,maxFrequency])
// now the scales are finished and usable
x.domain(data.map(function(d) { return d.Letter; }));
y.domain([0, d3.max(data, function(d) { return d.Frequency; })]);
// another g element, this time to move the origin to the bottom of the svg element
// someSelection.call(thing) is roughly equivalent to thing(someSelection[i])
// for everything in the selection\
// the end result is g populated with text and lines!
svg.select(".x.axis").transition().duration(300).call(xAxis);
// same for yAxis but with more transform and a title
svg.select(".y.axis").transition().duration(300).call(yAxis)
// THIS IS THE ACTUAL WORK!
var bars = svg.selectAll(".bar").data(data, function(d) { return d.Letter; }) // (data) is an array/iterable thing, second argument is an ID generator function
bars.exit()
.transition()
.duration(300)
.attr("y", y(0))
.attr("height", height - y(0))
.style('fill-opacity', 0.00001024)
.remove();
// data that needs DOM = enter() (a set/selection, not an event!)
bars.enter().append("rect")
.attr("class", "bar")
.attr("y", y(0))
.attr("height", height - y(0));
// the "UPDATE" set:
bars.transition().duration(300).attr("x", function(d) { return x(d.Letter); }) // (d) is one item from the data array, x is the scale object from above
.attr("width", x.rangeBand()) // constant, so no callback function(d) here
.attr("y", function(d) { return y(d.Frequency); })
.attr("height", function(d) { return height - y(d.Frequency); }); // flip the height, because y's domain is bottom up, but SVG renders top down
}

Map bar to y ordinal axis in d3

I'm attempting to map the beginning of bars to certain points on a y ordinal axis in d3, and it does not seem to recognize the names provided in the domain. Ultimately I'd like the chart to look like this:
This is what I've got so far (I've only provided a bit of the json because it would be huge otherwise):
var margin = {top: 50, right: 150, bottom: 50, left: 150},
w = 3000 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
d3.json("test_chart.json", function(json) {
var data = json.items;
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.starting_line + d.duration; })])
.range([0, w]);
var y = d3.scale.ordinal()
.domain(["Rome","Magdalene Castle","Herod's Palace","Pilate's Palace","King of the World's Stage","King of Flesh's stage","Stage Above Hell","Tavern","Arbor","Simon the Leper's House","Lazarus' tomb","Palace of the King of Marseilles","Sepulchre","Heathen Temple","Heaven","The Ship","The mountain","Wilderness","The priest's cell","Jherusalem","Marseilles","Hellmouth","The Place","The Lodge","The Stations","The Cloud"])
.rangeBands([0, h]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", function(d, i) {return "bar " + d.label;})
.attr("x", function(d, i) {return d.starting_line;})
.attr("y", function(d, i) {return d.location;})
.attr("width", function(d, i) {return d.duration})
.attr("height", 10)
.style("fill", function(d,i) {return d3.rgb(d.color)});
svg.append("g")
.attr("class", "y axis")
.attr("class", "x axis")
.call(xAxis)
.call(yAxis)
.call(bars);
// bars
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", function(d, i) {return "bar " + d.label;})
.attr("x", function(d, i) {return d.starting_line;})
.attr("y", function(d, i) {return d.location;})
.attr("width", function(d, i) {return d.duration})
.attr("height", 10)
.style("fill", function(d,i) {return d3.rgb(d.Color)});
});
And my sample json is here:
{"items":[{"character":"Inperator","color":"CC6600","location":"Rome","starting_line":"1","duration":"19"},{"character":"Serybyl","color":"660066","location":"Rome","starting_line":"20","duration":"1"},{"character":"Inperator","color":"3300FF","location":"Rome","starting_line":"21","duration":"9"},{"character":"Provost","color":"660066","location":"Rome","starting_line":"30","duration":"1"},{"character":"Inperator","color":"CC6600","location":"Rome","starting_line":"31","duration":"11"}]}
The problem I've run into is that my .attr("y", function(d, i) {return d.location;}) statement generates the following error: Error: Invalid value for <rect> attribute y="Rome".
I'm not sure how I need to format the statement to have it map properly to my ordinal scale. Also, my bars don't appear to actually be mapping to the hex codes I provide, but I'm more concerned about the ordinal axis at the moment. I tried to handle my x axis starting point based on the advice here but I had a hard time with it and figured if I embed the starting location in the actual json I could follow the more standard model. Any advice you might be able to give me would be greatly appreciated.

You need to call your scale and pass it the location so it can do the conversion:
.attr("y", function(d, i) {
return y(d.location); //<-- your y-scale is a function, that takes the ordinal "name" and returns a pixel value
}

White space between values of a line graph

I've created a line graph where the area under the graph is filled based on the rank of the values from data, but there is white space between data point assignments. I'm using d3.nest() to create sub dataGroups. Is there a better way to go about this that will eliminate the white space?
Here's a Plunker.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px Arial;
}
text.shadow {
stroke: #fff;
stroke-width: 2.5px;
opacity: 0.9;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid .tick {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
.area {
stroke-width: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 20, bottom: 35, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var color = d3.scale.category20();
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.close); });
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
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 + ")");
// function for the x grid lines
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
// function for the y grid lines
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
var dataGroup = d3.nest()
.key(function(d) {
return d.rank;
})
.entries(data);
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
dataGroup.forEach(function(d, i){
svg.append("path")
.datum(d.values)
.attr("class", "area")
.attr("d", area);
});
svg.selectAll(".area")
.style("fill",function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
})
// Draw the x Grid lines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
// Draw the y Grid lines
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
// Add the valueline path.
svg.append("path")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Add the text label for the X axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height+margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Distance");
// Add the text label for the Y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("x", margin.top - (height / 2))
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("");
// Add the title
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Elevation Graph");
});
</script>
</body>

Nest is insufficient for this. The problem with nest is that each data point (i.e. each day) belongs to only one subgroup (i.e. element of dataGroup). However, rendering it requires the first day of each group to also be the last day of the preceding group. So you need to get more sophisticated with how you generate dataGroup. At first I was going to suggest using a somewhat elaborate loop in place of .nest() (which you can still try to figure out how to do, if you'd like). However, I realized that you can still use nest just like you have it and then do a simple pass through the resulting groups and append the first element of each group to the group before it:
dataGroup.forEach(function(group, i) {
if(i < dataGroup.length - 1) {
group.values.push(dataGroup[i+1].values[0])
}
})
Here's the updated example.

Change the size of SVG according to device size in D3.js?

I am trying to visualize map and charts using leaflet.js and d3.js. I want to make the view device compatible. But my charts and maps are not device compatible. The code of showing a simple bar chart is below:
function updateCharts(data){
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 400 - margin.left - margin.right,
height = 250 - margin.top;
var x = d3.scale.ordinal().rangeRoundBands([ 0, width ], .05);
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(20);
x.domain(data.map(function(d) { return d.time; }));
y.domain([0, d3.max(data, function(d) { return d.speed1; })]);
var svg=d3.select("#bar").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 transition = svg.transition().duration(750), delay = function(d, i) {
return i * 50;
};
svg.append("text").attr("x", width / 2).attr("y", 0).style("text-anchor",
"middle").text("Speed of Lane1 Vs Time");
//Create X axis label
svg.append("text")
.attr("x", width / 2 )
.attr("y", height + margin.bottom)
.style("text-anchor", "middle")
.text("Time");
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("Speed");
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", 6)
.attr("dy", ".71em")
.attr("x",5)
.style("text-anchor", "middle");
svg.selectAll("rect")
.data(data)
.enter().append("rect").transition().delay(0)
.style("fill", "red")
.attr("x", function(d,i) { return x(d.time); }) //v
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.speed1); })
.attr("height", function(d) { return height - y(d.speed1); });
//function(d){return " "+d.datetime;}
//transition.select(".y.axis").call(yAxis);
// New SVG
}
In the html I also added meta tag for device compatibility like below:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Even if the deveice size is small there appears horizontal Scrollbar. But i don't want to see such scrollbar horizontally. I want the charts and maps to be fitted within the device width. Can anyone kindly help me to solve this?

Example (note: uses jQuery):
var $graphic = $('#graphic');
function drawGraphic() {
var margin = { top: 10, right: 10, bottom: 30, left: 30 };
var width = $graphic.width() - margin.left - margin.right;
$graphic.empty();
// ... code to create the chart ...
}
d3.csv("data.csv", function(data) { //loading data, may differ
// ... manipulate data here ...
drawGraphic();
window.onresize = drawGraphic;
}
A method based on D3 responsive charts described here: http://blog.apps.npr.org/2014/05/19/responsive-charts.html
My example is described here: http://bl.ocks.org/michalskop/2fa7d4c0ae029c36ba4e
See it in action here: http://bl.ocks.org/michalskop/raw/2fa7d4c0ae029c36ba4e/
My demo for Leaflet based responsive map: http://bl.ocks.org/michalskop/raw/001f6182db52d08f4925/