I had to reformat this JSON file from what I originally had and am having a hard time creating a summary graph with it. I have the x axis working the way I want but am not having the same luck with the y axis and y values. I need a total of all open, all responded, etc.
y.domain([0, d3.max(color.domain(), function (d) { return d; })]);
and this is the part that plots the rectangles, as I mentioned, the x is correct, just the y needs some TLC.
svg.selectAll(".bar")
.data(color.domain())
.enter().append("rect")
.attr("class", "bar")
.style("fill", color)
//.attr("height", function (d) { return height - y(d.stati) })
.attr("x", function (d) { return x(d); })
.attr("width", 60);
here is a jsfiddle with a link to an example data set:
http://jsfiddle.net/ba5m8/
dataset:
https://dl.dropboxusercontent.com/u/23726217/queryStatusBar.json
Related
I built this line graph with d3js: jsfiddle
Example Data:
{
date: '18-May-18',
close: 281755783529,
volume: 11792035643,
notes: null
}
How can I use the "volume" value from data to plot a rectangle bar corresponding to each date? The line graph with volume bars would look something like this:
Thank you!
Because the volume uses a different Y-range you need to define a new yScale for that
var yVolume = d3.scaleLinear().range([height, 0]);
yVolume.domain([0, d3.max(data, function(d) { return d.volume; })]);
Draw a right axis for this scale
var yAxisVol = d3.axisRight(yVolume).ticks(10);
svg.append("g")
.attr("class", "yaxisVol")
.attr("transform", `translate(${width},0)`)
.call(yAxisVol);
Then draw the rect on the correct location
svg.append("g").attr("class", "barsVol")
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("fill", "yellow")
.attr("x", function(d) { return x(new Date(d.date.getTime()-11*60*60*1000)); })
.attr("y", function(d) { return yVolume(d.volume); })
.attr("height", function(d) { return height - yVolume(d.volume); })
.attr("width", function(d) {
return x(new Date(d.date.getTime()+11*60*60*1000)) -
x(new Date(d.date.getTime()-11*60*60*1000)); });
The rectangles have a width of 1 "day" (22 hours).
Add a clip rectangle to the barsVol group or extend the x-domain with a day on the left and right.
In my fiddle having horizontal bar graph; i want to give more space between the bars .my fiddle. I can tamper with the height attribute(line:101) and reduce the bar heights so that the space seems increased But i donot want to change their height. How can i increase the space between bars without changing their height?
Code for the rectangles
rects = groups.selectAll('rect')
.data(function (d) {
return d;
})
.enter()
.append('rect')
.attr('x', function (d) {
return xScale(d.x0);
})
.attr('y', function (d, i) {
return yScale(d.y);
})
.attr('height', function (d) {
return yScale.rangeBand();
})
.attr('width', function (d) {
return xScale(d.x);
})
You're already doing it in your code. When you write:
yScale = d3.scale.ordinal()
.domain(months)
.rangeRoundBands([0, height], .1);
That second argument in rangeRoundBands is the padding between the bars:
ordinal.rangeRoundBands(interval[, padding[, outerPadding]])
So, you just need to tweak that value. Check this fiddle, using 0.5: https://jsfiddle.net/catbu2oz/
But if you're talking about keeping the same height in pixels, there is only one solution: hardcoding the height value of the bars and increasing the range of the scale, as in this fiddle: https://jsfiddle.net/3xakLhfo/
I'm trying to create a simple single stacked bar chart that goes left to right.
I've adapted the code found here, and I've gotten pretty close.
However, the stacked data is in the wrong direction.
The data at index 0 is all the right to the right, and the data at index 2 is all the way to the left.
I have a feeling it's got something to do with the rectangle and transition, but I'm not sure where I went wrong.
var rect = layer.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("y", function(d) {
return y(d.y);
})
.attr("x", 0)
.attr("height", y.rangeBand())
.attr("width", 0);
rect.transition()
.delay(function(d, i) {
return i * 10;
})
.attr("x", function(d) {
return x(d.x0 + d.x);
})
.attr("width", function(d) {
return x(d.x0) - x(d.x0 + d.x);
});
Fiddle
The main reason your stack starts at the right is that the range of your scale [width, 0] is inversely correlated to your domain [0, xStackMax]. Smaller input values will thus lead to larger output values, so your first x/x0 values will end up with values at the 'width' end of the scale.
Fix this so they both go in the same direction.
var x = d3.scale.linear()
.domain([0, xStackMax])
.range([0, width]);
Then change the x and width .attr calcs, the rects start at their scaled x0 coord and are as wide as the difference between x(d.x0 + d.x) - x(d.x0). For linear scales this can be simplified to x(d.x)
.attr("x", function(d) {
return x(d.x0);
})
.attr("width", function(d) {
return x(d.x0 + d.x) - x(d.x0);
});
https://jsfiddle.net/zkbxeby8/14/
I'm trying to create something similar to this example: Wealth and Health of Nations:
My data comes from a JSON file, just like the example, but when I add the transitions, I'm getting duplicate bubbles. Instead of the bubble transitioning from point A to point B I'm getting 2 bubbles (one for point A, one for point B). Generally speaking, the transition is not able to differentiate between 2 data points for the same bubble or 2 separate bubbles.
Looking at the example, I'm missing the interpolate and bisect functions. I haven't been able to grasp how they work and what exactly i'm doing wrong. Is this what's causing the problem in my graph?
Also, can someone give me an example on how bisectors and interpolate works in d3?
Code:
g = d3.select("#animation")
.append("svg")
.attr("width", width)
.attr("height", height);
x_extent = [0, 100];
x_scale = d3.scale.linear().domain(x_extent).range([margin + 20, width - 30]);
y_extent = [0, 60];
y_scale = d3.scale.linear().domain(y_extent).range([height - margin, margin]);
r_scale = d3.scale.linear().domain([0, d3.max(jsondata, function (d) { return d.MSVMMboe; })]).range([2, 30]);
g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; }).enter().append("circle")
.attr("cx", function (d) { return x_scale(d.PercentageComplete * 100) })
.attr("cy", function (d) { return y_scale(d.GPoS * 100) })
.attr("r", function (d) { return r_scale(d.MSVMMboe) })
.attr("stroke", "blue")
.attr("stroke-width", 1)
.attr("opacity", 0.6)
.attr("fill", "red");
//add transition
g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; })
.transition()
.duration(1000);
You haven't told the transition what you want to change. You need to add some attribute changes for example. Have a look at the d3 website for examples and tutorials.
I am trying to create a bar graph with a time scale where its possible to zoom into any time period. I was able to create the zooming functionality for my x-axis(time scale) however my data (in this case rects) doesn't zoom along with my axis.
Here is a simplified version of my graph: http://jsfiddle.net/gorkem/Mf457/5/embedded/result/
As you can see I can zoom in to my x-axis but the bars do not zoom along.
and here is the jfiddle link: http://jsfiddle.net/gorkem/Mf457/6/
var y = d3.scale.linear().domain([0, max_val]).range([graph_height, 0]);
var x = d3.time.scale().domain([minDate, maxDate]).range([0, graph_width]);
var chart = d3.select(location).append("svg")
.attr("class", "chart")
.attr("width", graph_width+20)
.attr("height", graph_height+20)
.call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom));
var lines = chart.selectAll("line");
var lines_y = lines
.data(x.ticks(5))
.enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", function (d) {return graph_height - 20 - d;})
.attr("y2", graph_height)
.style("stroke", "#ccc");
var lines_x = lines
.data(y.ticks(10))
.enter().append("line")
.attr("x1", 0)
.attr("x2", graph_width)
.attr("y1", y)
.attr("y2", y)
.style("stroke", "#ccc");
xAxis = d3.svg.axis().scale(x);
yAxis = d3.svg.axis().scale(y).orient("left");
chart.append("svg:g")
.attr("class", "xaxis")
.attr("transform","translate(0,300)")
.call(xAxis);
chart.append("svg:g")
.attr("class", "yaxis")
.attr("transform", "translate(25,0)")
.call(yAxis);
var rect = chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function (d,i) {return x(new Date(d["date"]))+20; })
.attr("y", function (d,i) { return graph_height - (d["num"] *v_scale);})
.attr("width", x(new Date(data[1]["date"])))
.attr("height", function (d,i) {return d["num"]*v_scale;});
rect.call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom));
function zoom() {
chart.select(".xaxis").call(xAxis);
chart.select(".yaxis").call(yAxis);
}
}
I feel like I should be adding more functionality to my zoom function for the function to be effective on bars(rects). I would really appreciate any help.
Using 'selectAll', I've applied the scaling and translation to each bar respectively, restricting both scale and translation to the x-axis only.
function zoom() {
chart.select(".xaxis").call(xAxis);
chart.select(".yaxis").call(yAxis);
chart.selectAll(".chart rect").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)");
}
This works equally well with a single path element, which is what I was trying to figure out when I stumbled upon your question.
I'm wondering the same thing, so at least know you're in good company. Here's my current approach. First of all, I can't generate a plot from your code and the links don't send me to anything useful -- no chart renders. So I can't help with your specific problem. However, there is an example that has zoomable rectangles here: http://bl.ocks.org/1962173. I'm currently going through it and deleting unnecessary elements and seeing if I can make it work. Hopefully this helps!