|
function ScatterPlot(){ |
|
|
|
var outerWidth = 100; |
|
var outerHeight = 100; |
|
|
|
var margin = { left: 60, top: 5, right: 10, bottom: 60 }; |
|
|
|
var rMin = 2; // "r" stands for radius |
|
var rMax = 300; |
|
var xColumn = "No X column configured"; |
|
var yColumn = "No Y column configured"; |
|
var rColumn = "No radius column configured"; |
|
var colorColumn = "No color column configured"; |
|
var colorRange = d3.scale.category10().range(); |
|
|
|
var xAxisLabel = "No X axis label configured"; |
|
var xAxisLabelOffset = 40; |
|
|
|
var yAxisLabel = "No Y axis label configured"; |
|
var yAxisLabelOffset = 30; |
|
|
|
var xScale = d3.scale.linear(); |
|
var yScale = d3.scale.linear(); |
|
var rScale = d3.scale.linear(); |
|
var colorScale = d3.scale.ordinal(); |
|
|
|
var xAxis = d3.svg.axis().scale(xScale).orient("bottom") |
|
.tickFormat(d3.format("s")) |
|
.outerTickSize(0); |
|
var xTicks = 5; |
|
|
|
var yAxis = d3.svg.axis().scale(yScale).orient("left") |
|
.tickFormat(d3.format("s")) |
|
.outerTickSize(0); |
|
var yTicks = 5; |
|
|
|
function chart(selection){ |
|
|
|
var innerWidth = outerWidth - margin.left - margin.right; |
|
var innerHeight = outerHeight - margin.top - margin.bottom; |
|
|
|
colorScale.range(colorRange); |
|
xScale.range([0, innerWidth]); |
|
yScale.range([innerHeight, 0]); |
|
rScale.range([rMin, rMax]); |
|
|
|
xAxis.ticks(xTicks); |
|
yAxis.ticks(yTicks); |
|
|
|
selection.each(function (data) { |
|
|
|
var svg = d3.select(this).selectAll("svg").data([data]); |
|
var gEnter = svg.enter().append("svg").append("g"); |
|
var g = svg.select("g"); |
|
var circles = g.selectAll("circle").data(data); |
|
|
|
gEnter |
|
.append("g") |
|
.attr("class", "x axis") |
|
.append("text") |
|
.attr("class", "label") |
|
.style("text-anchor", "middle"); |
|
|
|
gEnter |
|
.append("g") |
|
.attr("class", "y axis") |
|
.append("text") |
|
.attr("class", "label") |
|
.style("text-anchor", "middle"); |
|
|
|
xScale.domain(d3.extent(data, function (d){ return d[xColumn]; })); |
|
yScale.domain(d3.extent(data, function (d){ return d[yColumn]; })); |
|
rScale.domain(d3.extent(data, function (d){ return d[rColumn]; })); |
|
|
|
svg |
|
.attr("width", outerWidth) |
|
.attr("height", outerHeight); |
|
|
|
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
g |
|
.select(".x.axis") |
|
.attr("transform", "translate(0," + innerHeight + ")") |
|
.call(xAxis) |
|
.select("text") |
|
.attr("x", innerWidth / 2) |
|
.attr("y", xAxisLabelOffset) |
|
.text(xAxisLabel); |
|
|
|
g |
|
.select(".y.axis") |
|
.call(yAxis) |
|
.select("text") |
|
.attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)") |
|
.text(yAxisLabel); |
|
|
|
circles.enter().append("circle"); |
|
circles |
|
.attr("cx", function (d){ return xScale(d[xColumn]); }) |
|
.attr("cy", function (d){ return yScale(d[yColumn]); }) |
|
.attr("r", function (d){ return rScale(d[rColumn]); }) |
|
.attr("fill", function (d){ return colorScale(d[colorColumn]); }); |
|
|
|
circles.exit().remove(); |
|
|
|
}); |
|
} |
|
|
|
chart.outerWidth = function(_) { |
|
if (!arguments.length) return outerWidth; |
|
outerWidth = _; |
|
return chart; |
|
}; |
|
|
|
chart.outerHeight = function(_) { |
|
if (!arguments.length) return outerHeight; |
|
outerHeight = _; |
|
return chart; |
|
}; |
|
|
|
chart.xColumn = function(_) { |
|
if (!arguments.length) return xColumn; |
|
xColumn = _; |
|
return chart; |
|
}; |
|
|
|
chart.yColumn = function(_) { |
|
if (!arguments.length) return yColumn; |
|
yColumn = _; |
|
return chart; |
|
}; |
|
|
|
chart.rColumn = function(_) { |
|
if (!arguments.length) return rColumn; |
|
rColumn = _; |
|
return chart; |
|
}; |
|
|
|
chart.rMin = function(_) { |
|
if (!arguments.length) return rMin; |
|
rMin = _; |
|
return chart; |
|
}; |
|
|
|
chart.rMax = function(_) { |
|
if (!arguments.length) return rMax; |
|
rMax = _; |
|
return chart; |
|
}; |
|
|
|
chart.colorRange = function(_) { |
|
if (!arguments.length) return colorRange; |
|
colorRange = _; |
|
return chart; |
|
}; |
|
|
|
chart.colorColumn = function(_) { |
|
if (!arguments.length) return colorColumn; |
|
colorColumn = _; |
|
return chart; |
|
}; |
|
|
|
chart.xAxisLabel = function(_) { |
|
if (!arguments.length) return xAxisLabel; |
|
xAxisLabel = _; |
|
return chart; |
|
}; |
|
|
|
chart.yAxisLabel = function(_) { |
|
if (!arguments.length) return yAxisLabel; |
|
yAxisLabel = _; |
|
return chart; |
|
}; |
|
|
|
chart.xAxisLabelOffset = function(_) { |
|
if (!arguments.length) return xAxisLabelOffset; |
|
xAxisLabelOffset = _; |
|
return chart; |
|
}; |
|
|
|
chart.yAxisLabelOffset = function(_) { |
|
if (!arguments.length) return yAxisLabelOffset; |
|
yAxisLabelOffset = _; |
|
return chart; |
|
}; |
|
|
|
chart.xTicks = function(_) { |
|
if (!arguments.length) return xTicks; |
|
xTicks = _; |
|
return chart; |
|
}; |
|
|
|
chart.yTicks = function(_) { |
|
if (!arguments.length) return yTicks; |
|
yTicks = _; |
|
return chart; |
|
}; |
|
|
|
chart.margin = function(_) { |
|
if (!arguments.length) return margin; |
|
margin = _; |
|
return chart; |
|
}; |
|
|
|
return chart; |
|
} |