Triangle scatter plot with D3.js - d3.js

I was trying to create a scatter plot with triangle points following this example. But I got all the triangles locate at the top left corner, which looks so weired.
Can anyone help to fix and explain?
code:
svg.selectAll(".point")
.data(data)
.enter()
.append("path")
.attr("class", "point")
.attr("d", d3.svg.symbol().type("triangle-up"))
.attr({
cx: function(d) { return x(d.quality); },
cy: function(d) { return y(d.Type); },
r: 8
})
.style("fill", function(d){return color(d.Type);});

You can't use cx and cy for anything other than circles. Use
.attr("transform", function(d) { return "translate(" + x(d.quality) + "," + y(d.Type) + ")"; })

Related

Some triangle symbols are not showing, diamond and squares not showing at all on D3 V5

I'm a D3 newbie, trying to show symbols on a muli-line line chart with D3
. a line of them should have circles in the data points positions and they show well, the other 3 lines, one should have triangles, one should have diamonds, and the last one should have squares. The triangles are showing 10 out the the 16 points, the diamonds and squares don't show at all. There is no errors in the console. Any help??
var symbolGenerator = d3.symbol().type(d3.symbolTriangle);
svg2.selectAll('path')
.data(six)
.enter()
.append("path")
.attr('d', function(d,i) {
symbolGenerator
.size(deaths[i]/1000+100);
return symbolGenerator();
})
.attr("fill", color_scheme['6_6.9'])
.attr("transform", function(d,i) {
return 'translate(' + xScale(year[i]) + ',' + yScale(six[i])+') ';
});
console.log(six);
console.log(seven);
var symbolGenerator1 = d3.symbol().type(d3.symbolDiamond);
svg2.selectAll('path')
.data(seven)
.enter()
.append("path")
.attr('d', function(d,i) {
symbolGenerator1.size(100);
return symbolGenerator1();
})
.attr("fill", color_scheme['7_7.9'])
.attr("transform", function(d,i) {
return 'translate(' + xScale(year[i]) + ',' + yScale(seven[i])+') ';
});
var arc = d3.symbol().type(d3.symbolSquare);
//alert(arc);
svg2.selectAll('path')
.data(eight)
.enter()
.append("path")
.attr("d", function(d,i) {
arc.size(500);
return arc();
})
.attr("fill", color_scheme['8.0+'])
.attr("transform", function(d,i) {
return 'translate(' + xScale(year[i]) + ',' + yScale(eight[i])+') ';
});*emphasized text*

d3.js v4 change line to bar chart

I'm trying to convert the line graph to bar, I'm having trouble understanding where I'm making the error. I'm using d3.js v4.
This line of code displays code that works for line area:
var area = d3.area()
.x(function(d) { return time_scale(d['timestamp'])+6.5; })
.y0(-80+width -max_y)
.y1(function(d) { return measure_scale(+d[field]); })
.curve(d3.curveStep)
;
// append a SVG path that corresponds to the line chart
d3.select('#chart').append("path")
.datum(neigh_data)
.attr("class", "area")
.attr("d", area)
.attr('transform', 'translate(' + margin + ', -15)')
;
This line of code does not work for bars (it looks like the height of the rectangle is not correct, and I'm not using the color fill):
d3.select('#chart').selectAll(".bar").append("path")
.datum(neigh_data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return time_scale(d['timestamp']); })
.attr("y", function(d,i) { return measure_scale(+d[field]); })
.attr("width", time_scale.bandwidth())
.attr("height", function (d,i) { return height - measure_scale(+d[field]); })
;
I'm really messing around with something.

d3js add volume bars to line graph

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.

Why point closeness is differing from scatter plot to hexbin plot?

Please look at Hexbin and scatterplots: http://imgur.com/a/2oR68
Why in Hexbinplot, points donot touch each other whereas in scatterplot it clearly touches the close points ?
I expected my hexbin plot comes up like this: https://bl.ocks.org/mbostock/4248145 but it didnot.
I am using d3.hexbin plugin.
The only code that is differing from Hexbin plot to scatter plot (I am dealing with same dataset) apart from little bit of scaling is:
For Hexbin:
var color = d3.scale.linear()
.range(["white", "steelblue"])
.interpolate(d3.interpolateLab);
var hexbin = d3.hexbin()
.extent([[0,0],[size - padding , padding]])
.radius();
hexbin.x(function(d,i){return x(subdata[0][i]);})
hexbin.y(function(d,i){return y(subdata[0][i]);})
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("class", "mesh")
.attr("width", w)
.attr("height", size);
svg.append("g")
.attr("clip-path", "url(#clip)")
.selectAll(".hexagon")
.data(hexbin(datum))
.enter()
.append("path")
.attr("class", "hexagon")
.attr("d", hexbin.hexagon())
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.style("fill", function(d) { return color(d.length); });
For scatterplot:
svg.selectAll("circle")
.data(datum)
.enter()
.append("circle")
.style("fill", "steelblue")
.attr("cx", function (d, i) {
return x(subdata[0][i]);
})
.attr("cy", function (d,i) {
return y(subdata[0][i]);
})
.attr("r", 3)
Where am i doing wrong ?
Edit1: Included some fraction of code under Hexbin
If you set...
.attr("d", hexbin.hexagon(5))
//radius value here ------^
..., the hexagons will touch only if you set the same value in the hexabin generator:
var hexbin = d3.hexbin()
.radius(5)//same value here
.extent([[0, 0], [width, height]]);
According to your result, I believe that was not the case. Thus, the solution can be simply removing that value:
.attr("d", hexbin.hexagon())
//no radius here --------^

d3 pie labels aren't in right place, centroids are way off for some reason

I'm building a d3 pie chart with labels on the centroids just like so many examples. I've checked my code against many of those examples but can't figure out where or how my centroids are being calculated. The labels appear to be arranged around the origin of the svg and not the center of the chart like I'd expect. I feel like there's a grouping issue since the text is added but it's not grouped with the arc. Unfortunately, I have no idea how to fix it.
var arcs = svg.datum(domain)
.selectAll('path')
.data(pie);
arcs.enter()
.append('path')
.attr('fill', function(d, i){
return color[i];
})
.attr('d', arc)
.each(function(d) {
this._current = d;
}) // store the initial angles
.attr('transform', 'translate(' + outerRadius + ", " + outerRadius + ')');
arcs.enter()
.append("text")
.attr("transform", function(d) {
console.log(arc.centroid(d));
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d,i) {
return data[i].playerName+": "+data[i].playerScore;
});
Here's a fiddle with the complete code.
You need to also move the text over to adjust for the radius of the chart:
arcs.enter()
.append("text")
.attr("transform", function(d) {
console.log(arc.centroid(d));
return "translate(" + arc.centroid(d) + ")translate(" + outerRadius + ", " + outerRadius + ")";
})
.attr("text-anchor", "middle")
.text(function(d,i) {
return data[i].playerName+": "+data[i].playerScore;
});
This will shift everything over to match the locations of the arcs' centroids.

Resources