私はこの視覚化に取り組んでいます:
http://tinyurl.com/cul7oyg
#scatterplot div で (円の下にスクロールします)。Y スケーリングを対数に設定し、2 番目の数値を 1 に変更しました。
y = d3.scale.log().range([h - 60, 1])
ドメイン：
y.domain(d3.extent(data, function(d) {
console.log(+d.netdonations/+d.population)
console.log(y(+d.netdonations/+d.population))
return +d.netdonations/+d.population;
}));
データが 0 の場合は常に、ログに多数の「無限」値が表示されます。負の無限漸近線は、x-0 Y 軸の左側にあるはずです。
// set the stage
var margin = {
t : 30,
r : 20,
b : 20,
l : 40
}, w = 600 - margin.l - margin.r, h = 500 - margin.t - margin.b, x = d3.scale.linear().range([0, w]), y = d3.scale.log().range([h - 60, 1]),
//colors that will reflect geographical regions
color = d3.scale.category10();
var svg = d3.select("#scatterplot").append("svg").attr("width", w + margin.l + margin.r).attr("height", h + margin.t + margin.b);
scatterplot.svg = svg
// set axes, as well as details on their ticks
var xAxis = d3.svg.axis().scale(x).ticks(20).tickSubdivide(true).tickSize(6, 3, 0).orient("bottom");
var yAxis = d3.svg.axis().scale(y).ticks(20).tickSubdivide(true).tickSize(6, 3, 0).orient("left");
// group that will contain all of the plots
var groups = svg.append("g").attr("transform", "translate(" + margin.l + "," + margin.t + ")");
// array of the regions, used for the legend
var regions = getContinents;
//["Asia", "Europe", "Middle East", "N. America", "S. America", "Sub-Saharan Africa"]
// bring in the data, and do everything that is data-driven
//d3.csv("./data/trust-business.csv", function(data) {
// sort data alphabetically by region, so that the colors match with legend
/*data.sort(function(a, b) {
return d3.ascending(a.region, b.region);
})
console.log(data)*/
var x0 = Math.max(-d3.min(data, function(d) {
return d.gdppercap;
}), d3.max(data, function(d) {
return d.gdppercap;
}));
//x.domain([-100, 100]);
//y.domain([180, 0])
x.domain(d3.extent(data, function(d) {
return +d.gdppercap;
}));
y.domain(d3.extent(data, function(d) {
console.log(+d.netdonations/+d.population)
console.log(y(+d.netdonations/+d.population))
return +d.netdonations/+d.population;
}));
scatterplot.x = x
scatterplot.y = y
//console.log(d3.extent(data, function(d) {return +d.gdppercap;}));
//console.log(d3.extent(data, function(d) {return +d.netdonations/+d.population;}));
// style the circles, set their locations based on data
var circles = groups.selectAll("circle").data(data).enter().append("circle").attr("class", "circles").attr({
cx : function(d) {
return x(+d.gdppercap);
},
cy : function(d) {
console.log(+d.netdonations/+d.population)
console.log(y(+d.netdonations/+d.population))
return y(+d.netdonations/+d.population);
},
r : 8,
id : function(d) {
return d.name;
}
}).style("fill", function(d) {
return color(d.continent);
});
// what to do when we mouse over a bubble
var mouseOn = function() {
var circle = d3.select(this);
// transition to increase size/opacity of bubble
circle.transition().duration(800).style("opacity", 1).attr("r", 16).ease("elastic");
// append lines to bubbles that will be used to show the precise data points.
// translate their location based on margins
svg.append("g").attr("class", "guide").append("line").attr("x1", circle.attr("cx")).attr("x2", circle.attr("cx")).attr("y1", +circle.attr("cy") + 26).attr("y2", h - margin.t - margin.b).attr("transform", "translate(40,20)").style("stroke", circle.style("fill")).transition().delay(200).duration(400).styleTween("opacity", function() {
return d3.interpolate(0, 0.5);
});
svg.append("g").attr("class", "guide").append("line").attr("x1", +circle.attr("cx") - 16).attr("x2", 0).attr("y1", circle.attr("cy")).attr("y2", circle.attr("cy")).attr("transform", "translate(40,30)").style("stroke", circle.style("fill")).transition().delay(200).duration(400).styleTween("opacity", function() {
return d3.interpolate(0, 0.5);
});
// function to move mouseover item to front of SVG stage, in case
// another bubble overlaps it
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
// skip this functionality for IE9, which doesn't like it
//if (!$.browser.msie) {
if (navigator.appName !== 'ie') {
circle.moveToFront();
}
//select()
};
// what happens when we leave a bubble?
var mouseOff = function() {
var circle = d3.select(this);
// go back to original size and opacity
circle.transition().duration(800).style("opacity", 0.5).attr("r", 8).ease("elastic");
// fade out guide lines, then remove them
d3.selectAll(".guide").transition().duration(100).styleTween("opacity", function() {
return d3.interpolate(0.5, 0);
}).remove();
//mouseout
};
// run the mouseon/out functions
circles.on("mouseover", mouseOn);
circles.on("mouseout", mouseOff);
// tooltips (using jQuery plugin tipsy)
circles.append("title").text(function(d) {
return d.name;
});
$(".circles").tipsy({
gravity : 's'
});
// the legend color guide
var legend = svg.selectAll("rect").data(regions).enter().append("rect").attr({
x : function(d, i) {
return (40 + i * 80);
},
y : h,
width : 25,
height : 12
}).style("fill", function(d) {
return color(d);
});
// legend labels
svg.selectAll("text").data(regions).enter().append("text").attr({
x : function(d, i) {
return (40 + i * 80);
},
y : h + 24
}).text(function(d) {
return d;
});
// draw axes and axis labels
svg.append("g").attr("class", "x axis").attr("transform", "translate(" + margin.l + "," + (h - 60 + margin.t) + ")").call(xAxis);
svg.append("g").attr("class", "y axis").attr("transform", "translate(" + margin.l + "," + margin.t + ")").call(yAxis);
svg.append("text").attr("class", "x label").attr("text-anchor", "end").attr("x", w + 50).attr("y", h - margin.t - 5).text("Per Capita GDP");
svg.append("text").attr("class", "y label").attr("text-anchor", "end").attr("x", -20).attr("y", 45).attr("dy", ".75em").attr("transform", "rotate(-90)").text("Per Capita Net Donations");
//});