Hex density: split radius into draw & pack radii

This commit is contained in:
toby 2017-05-30 15:24:23 -04:00
parent 281d558111
commit 6cdc7d3966
2 changed files with 17 additions and 11 deletions

View File

@ -3406,10 +3406,15 @@ const OperationConfig = {
value: Charts.FIELD_DELIMITER_OPTIONS, value: Charts.FIELD_DELIMITER_OPTIONS,
}, },
{ {
name: "Radius", name: "Pack radius",
type: "number", type: "number",
value: 25, value: 25,
}, },
{
name: "Draw radius",
type: "number",
value: 15,
},
{ {
name: "Use column headers as labels", name: "Use column headers as labels",
type: "boolean", type: "boolean",

View File

@ -78,12 +78,13 @@ const Charts = {
runHexDensityChart: function (input, args) { runHexDensityChart: function (input, args) {
const recordDelimiter = Utils.charRep[args[0]], const recordDelimiter = Utils.charRep[args[0]],
fieldDelimiter = Utils.charRep[args[1]], fieldDelimiter = Utils.charRep[args[1]],
radius = args[2], packRadius = args[2],
columnHeadingsAreIncluded = args[3], drawRadius = args[3],
columnHeadingsAreIncluded = args[4],
dimension = 500; dimension = 500;
let xLabel = args[4], let xLabel = args[5],
yLabel = args[5], yLabel = args[6],
{ headings, values } = Charts._getScatterValues( { headings, values } = Charts._getScatterValues(
input, input,
recordDelimiter, recordDelimiter,
@ -114,7 +115,7 @@ const Charts = {
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let hexbin = d3hexbin() let hexbin = d3hexbin()
.radius(radius) .radius(packRadius)
.extent([0, 0], [width, height]); .extent([0, 0], [width, height]);
let hexPoints = hexbin(values), let hexPoints = hexbin(values),
@ -122,10 +123,10 @@ const Charts = {
let xExtent = d3.extent(hexPoints, d => d.x), let xExtent = d3.extent(hexPoints, d => d.x),
yExtent = d3.extent(hexPoints, d => d.y); yExtent = d3.extent(hexPoints, d => d.y);
xExtent[0] -= 2 * radius; xExtent[0] -= 2 * packRadius;
xExtent[1] += 2 * radius; xExtent[1] += 2 * packRadius;
yExtent[0] -= 2 * radius; yExtent[0] -= 2 * packRadius;
yExtent[1] += 2 * radius; yExtent[1] += 2 * packRadius;
let xAxis = d3.scaleLinear() let xAxis = d3.scaleLinear()
.domain(xExtent) .domain(xExtent)
@ -151,7 +152,7 @@ const Charts = {
.enter() .enter()
.append("path") .append("path")
.attr("d", d => { .attr("d", d => {
return `M${xAxis(d.x)},${yAxis(d.y)} ${hexbin.hexagon(radius * 0.75)}`; return `M${xAxis(d.x)},${yAxis(d.y)} ${hexbin.hexagon(drawRadius)}`;
}) })
.attr("fill", (d) => color(d.length)) .attr("fill", (d) => color(d.length))
.append("title") .append("title")