d3.js set with attribute in percent rather than pixels - html

When creating the objects in d3.js, here is my regular approach:
var svgcanvas = d3.select("body")
.append("svg")
.attr("width", 100)
.attr("height", 100)
.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 10)
.attr("fill", "red")
which creates a completely static object in the end. What I would like o do is to have something like this (notice the percents):
var svgcanvas = d3.select("#tweets")
.append("svg")
.attr("width", 100%)
.attr("height", 100%)
.append("circle")
.attr("cx", 50%)
.attr("cy", 50%)
.attr("r", 10)
.attr("fill", "red")
However it doens't seem to be possible.
When creating svg elements manually, doing this works like a charm. Here is an example
http://cssdeck.com/labs/jxda8sth
For something with such a naive solution, digging auto-scale scripts is a no-no to me. So I want to ask: is it possible to do it with an almost css-only solution (like the one above)?


Put the values in double quotes e.g. "100%"
var svgcanvas = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height","100%")
.append("circle")
.attr("cx", "50%")
.attr("cy", "50%")
.attr("r", "10%")
.attr("fill", "red")
And as a jsfiddle

Related

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
}

Adding text to rect not working

I am trying to add text to rect but it doesn't seem to be working, This is what I am trying,
var width = 600,
height = 600;
var margin = {top: -5, right: -5, bottom: -5, left: -5};
var zoom = d3.behavior.zoom()
.scaleExtent([1, 15])
.on("zoom", zoomed);
var svgContainer = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "black")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")")
.call(zoom);
var zoomed = function () {
svgContainer.attr("transform", "translate("+ d3.event.translate + ")scale(" + d3.event.scale + ")");
};
var zoom = d3.behavior.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed)
.size([width, height]);
svgContainer.call(zoom);
var rectangle1 = svgContainer.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 100)
.attr("fill", "red")
.append("text")
.text("Hahaha");
Here's is fiddle for it - http://jsfiddle.net/nhe613kt/60/

A rect can't contain a text element. Instead transform a g element with the location of text and rectangle, then append both the rectangle and the text to it:
D3 Appending Text to a SVG Rectangle
svgContainer.append("text")
.attr("id", "rectangleText")
.attr("class", "visible")
.attr("x", 10)
.attr("y", 50)
.attr("dy", ".35em")
.text("You're Welcome :)");
Instead of appending it to the rectangle append it to the object the rectangle is appended to :)
Fiddle : http://jsfiddle.net/nhe613kt/71/
Also, your dragging of the rectangle is a bit static, doesnt move correctly. You need to split your zoom function and create a drag function separately. Then append the dragged to the rectangle, and the zoomed to the SVG :)
Hope that helps

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

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.

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/

Adding custom backgrounds to D3.js bar graph

I'm fairly new to d3.js and I'm building a bar graph in D3.js.
I'm trying to make the background three different colors to break the x axis into distinct three zones (low, medium, and high). I figure I should be appending some <g>elements but I'm not sure how to place them in this case.
The site is up here:
Not sure if providing more of the code would help

This answer is based on what Josh suggested in the comments but I thought I'd add my code since I also had to deal with a mouseover and so this created some extra challenges too.
One thing worth mentioning is that there isn't a z-index with SVGs so you have to put the new background shades in first and then do the chart bars (which is also why you have to give the rectangles for the bar chart a new name, as per Josh's suggestion)
svg.append("rect")
.attr("y", padding)
.attr("x", padding)
.attr("width", 200)
.attr("height", h -padding*2)
.attr("fill", "rgba(0,255,0, 0.3")
.attr("class", "legendBar")
svg.append("rect")
.attr("y", padding)
.attr("x", padding +200)
.attr("width", 200)
.attr("height", h -padding*2)
.attr("fill", "rgba(0,0,255, 0.3")
.attr("class", "legendBar")
svg.append("rect")
.attr("y", padding)
.attr("x", padding +400)
.attr("width", 200)
.attr("height", h -padding*2)
.attr("fill", "rgba(255,0,0, 0.3")
.attr("class", "legendBar")
svg.selectAll("rect.bars")
.data(dataset)
.enter()
.append("rect")
.attr("class", "bars")
.attr("x", 0 + padding)
.attr("y", function(d, i){
return yScale(i);
})
.attr("width", function(d) {
return xScale(d.values[0]);
})
.attr("height", yScale.rangeBand())
.on("mouseover", function(d){
var yPosition = parseFloat(d3.select(this).attr("y")) + yScale.rangeBand() /2
var xPosition = parseFloat(d3.select(this).attr("x")) /2 + w /2;
d3.select("#tooltip")
.style("left", "660px")
.style("top", "140px")
.select("#strat")
.text(d.values[3]);
d3.select("#tooltip")
.select("#graph")
.attr("src", "img/cpg.jpg");
d3.select("#tooltip")
.select("#studentName")
.text(d.name);
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
d3.select("#tooltip").classed("hidden", true);
});