Hex plot: add edge drawing & changing colour opts

This commit is contained in:
toby 2017-05-30 15:49:22 -04:00
parent 6cdc7d3966
commit dc642be1f5
2 changed files with 35 additions and 2 deletions

View file

@ -3430,6 +3430,21 @@ const OperationConfig = {
type: "string", type: "string",
value: "", value: "",
}, },
{
name: "Draw hexagon edges",
type: "boolean",
value: false,
},
{
name: "Min colour value",
type: "string",
value: Charts.COLOURS.min,
},
{
name: "Max colour value",
type: "string",
value: Charts.COLOURS.max,
},
] ]
} }
}; };

View file

@ -68,6 +68,19 @@ const Charts = {
}, },
/**
* Default from colour
*
* @constant
* @default
*/
COLOURS: {
min: "white",
max: "black",
},
/** /**
* Hex Bin chart operation. * Hex Bin chart operation.
* *
@ -81,6 +94,9 @@ const Charts = {
packRadius = args[2], packRadius = args[2],
drawRadius = args[3], drawRadius = args[3],
columnHeadingsAreIncluded = args[4], columnHeadingsAreIncluded = args[4],
drawEdges = args[7],
minColour = args[8],
maxColour = args[9],
dimension = 500; dimension = 500;
let xLabel = args[5], let xLabel = args[5],
@ -135,7 +151,7 @@ const Charts = {
.domain(yExtent) .domain(yExtent)
.range([height, 0]); .range([height, 0]);
let color = d3.scaleSequential(d3.interpolateLab("white", "steelblue")) let colour = d3.scaleSequential(d3.interpolateLab(minColour, maxColour))
.domain([0, maxCount]); .domain([0, maxCount]);
marginedSpace.append("clipPath") marginedSpace.append("clipPath")
@ -154,7 +170,9 @@ const Charts = {
.attr("d", d => { .attr("d", d => {
return `M${xAxis(d.x)},${yAxis(d.y)} ${hexbin.hexagon(drawRadius)}`; return `M${xAxis(d.x)},${yAxis(d.y)} ${hexbin.hexagon(drawRadius)}`;
}) })
.attr("fill", (d) => color(d.length)) .attr("fill", (d) => colour(d.length))
.attr("stroke", drawEdges ? "black" : "none")
.attr("stroke-width", drawEdges ? "0.5" : "none")
.append("title") .append("title")
.text(d => { .text(d => {
let count = d.length, let count = d.length,