Adding transition Image - html
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
}
Related
d3 : coloring dots on a scatterplot using column in dataset
I've copied some code to make a basic scatterplot and I'm trying to color the dots based on one of the columns of the data.
I've tried modifying the dataset to have a column named "Color" with values between 0 and 1 but when I assign the color function (i.e. d3.interpolateRdGy(d[2]) ) the scatterplot has no dots on it.
I'm very, very new to d3 (I have experience only with ggplot2 in R).
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
// Add X axis
var x = d3.scaleLinear()
.domain([0, 4000])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, 500000])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Add dots
svg.append('g')
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return x(d.GrLivArea); } )
.attr("cy", function (d) { return y(d.SalePrice); } )
.attr("r", 1.5)
.style("fill", d3.interpolateRdGy(d[1]))
})
</script>
Typically with D3, you would create a color scale. If you want to map a quantitative value to a color, then you could do
const color = d3.scaleSequential()
.domain(d3.extent(data, d => d.Color))
.interpolator(d3.interpolateBlues);
d3.extent(data, d => d.Color) returns an array that contains the min and max values of the "Color" column in your dataset. This approach will work even when the values are not between 0 and 1, unlike directly calling the interpolator.
You can find other color schemes in the d3-scale-chromatic docs. For diverging color schemes, you can use a diverging scale.
Then to use the color scale, you would do
.attr('fill', d => color(d.Color))
D3v4 zoom coordinates of visible area
I'm trying to calculate the coordinates of the visible area after zooming. Is there a way to calculate it using d3.event.transform? I tried a lot but couldn't make it work, at least not for d3v4. Using v3 is no opinion since everything else of the project is using v4. Isolated Code: https://jsfiddle.net/qyvnhvmj/
All you need to do is grab the inverse of the points from the transform,
var width = 800,
height = 400,
Radius = 20;
var Circles, Data = [];
for (var i = 0; i < 3; i++) {
Data.push({
x: 100 + i * Radius * 8,
y: 100,
});
}
var zoom = d3.zoom().scaleExtent([1, 128]).on("zoom", zoomed);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.style("fill", d3.color("gray"))
.attr("opacity", 0.1);
Circles = svg.selectAll("circle")
.data(Data)
.enter().append("circle")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", Radius);
function getVisibleArea(t) {
var l = t.invert([0, 0]),
r = t.invert([width, height]);
return Math.trunc(l[0]) + " x " + Math.trunc(l[1]) + " - " + Math.trunc(r[0]) + " x " + Math.trunc(r[1]);
}
function zoomed(d) {
Circles.attr("transform", d3.event.transform);
console.log("zoom transform: ", d3.event.transform);
d3.select("#area span").text(getVisibleArea(d3.event.transform));
}
svg {
position: absolute;
top: 50;
}
<svg width="800" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<a id="area">visible area: <span>?</span></a>
<br>
<br>
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.
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.
D3.js Dynamic Transitioning with Live Data
Long time lurker, enthusiastic about learning D3! Anywhoo, I'm working on following Mr. Bostock's paths examples.
Now, I have a fiddle that is working just wonderfully - it is smooth, updates quickly, scales the x-axis and y-axis quite nicely.
This is a time series chart I'm trying to tackle. Basically, I'm taking sensor integers that go into a JSON array. My target is to receive this data in realtime; Sensor sends a temp, and I get a smooth reflection of that data on the chart in near realtime. Here's the rub. As soon as I add in the JSON fetching code, everything goes from smooth as butter to choppy and crazy. Here's what I'm working with... Please be understand that I am very new to D3.
Here is the nicely randomized code which displays the graph in the way I want:
var n = 40,
duration = 750,
now = new Date(Date.now() - duration),
random = d3.random.normal(0, 0.2),
count = 0,
data = d3.range(n).map(random);
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 40
},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([now - (n - 2) * duration, now - duration])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(data)])
.range([height, 0]);
var line = d3.svg.line()
.interpolate("basis")
.x(function (d, i) {
return x(now - (n - 1 - i) * duration);
})
.y(function (d, i) {
return y(d);
});
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("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var axis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
var yAx = svg.append("g")
.attr("class", "y axis")
.call(y.axis = d3.svg.axis().scale(y).orient("left"));
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(data)
.attr("class", "line");
var transition = d3.select({}).transition()
.duration(750)
.ease("linear");
tick();
function tick() {
transition = transition.each(function () {
// update the domains
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
y.domain([0, d3.max(data) + 10]);
// push a new data point onto the back
data.push(20 + Math.random() * 100);
// redraw the line, and slide it to the left
path.attr("d", line)
.attr("transform", null);
// slide the x-axis left, rescale the y-axis
axis.call(x.axis);
yAx.call(y.axis);
// slide the line left
path.transition()
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");
// pop the old data point off the front
data.shift();
}).transition().each("start", tick);
}
svg {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: orange;
stroke-width: 1.5px;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Now, I realize that my poor understanding of transitions is probably getting me stuck. That being said, I need help! My trouble starts when I add the following:
First, I add var JSONdata = []; as a global, then right after function tick() {
transition = transition.each(function () { I add my JSON code:
d3.json("tempdata.php", function(error, data){
JSONdata = data;
data.forEach(function(d) {
JSONdata.temp = +d.temp;
})
I finish by wrapping up the end of the whole tick block with the final })
So it works... but it's slow and choppy! Methinks there be dragons in my transitions...? I'd like to have as near real time as possible, but even up to 5 seconds as a buffered delay would be acceptable.
Can anyone lend a hand or some enlightenment?
I'd like the graph to display a constant line with the last updated value, so even if the sensor goes offline, I'll see the last value. Granted, eventually I need to work out a round robin database type deal and actually face the issue of better timestamp handling. But, that can be for another day.
My JSFiddle with just the randomized data: http://jsfiddle.net/6z9qe46e/7/