class Grid {
constructor(
props = {
graphicWidth: null,
graphicHeight: null,
graphicMargin: null,
totalValue: null,
perLine: null,
symbol: null,
viewBoxWidth: null,
viewBoxHeight: null,
symbolRatio: null,
symbolWidth: null,
symbolHeight: null,
symbolMargin: null,
fillColor: null,
strokeWidth: null,
backgroundColor: null,
borderColor: null,
filledPercent: null,
id: null,
label: null,
selected: null
}
) {
this.id = props.id
? props.id
: "id-" + Math.random().toString(36).substr(2, 4);
this.graphicWidth = props.graphicWidth ? props.graphicWidth : 600;
this.graphicHeight = props.graphicHeight ? props.graphicHeight : 600;
this.graphicMargin = props.graphicMargin ? props.graphicMargin : 15;
this.totalValue = props.totalValue ? props.totalValue : 100;
this.symbolperLine = props.symbolperLine ? props.symbolperLine : 10;
this.symbol = props.symbol
? props.symbol
: d3.symbol().type(d3.symbolSquare).size(64);
this.symbolRatio = props.symbolRatio ? props.symbolRatio : 1;
this.selected = props.selected ? props.selected : false;
this.symbolWidth = props.symbolWidth ? props.symbolWidth : 30;
this.symbolHeight = props.symbolHeight ? props.symbolHeight : 30;
this.viewBoxHeight = props.viewBoxHeight ? props.viewBoxHeight : 100;
this.viewBoxWidth = props.viewBoxWidth ? props.viewBoxWidth : 100;
this.symbolMargin = props.symbolMargin ? props.symbolMargin : 0;
this.fillColor = props.fillColor ? props.fillColor : "none";
this.strokeWidth = props.strokeWidth ? props.strokeWidth : "1px";
this.strokeColor = props.strokeColor ? props.strokeColor : "black";
this.backgroundColor = props.backgroundColor
? props.backgroundColor
: "white";
this.borderColor = props.borderColor ? props.borderColor : "none";
this.label = props.label ? props.label : false;
}
get matrix() {
let v = this.totalValue;
let ratio = this.symbolRatio;
let data = d3.range(v / ratio);
let w = this.symbolWidth;
let h = this.symbolHeight;
let pl = this.symbolperLine;
let scaleX = d3
.scaleLinear()
.domain([0, pl])
.range([0, w * pl]);
let scaleY = d3
.scaleLinear()
.domain([0, pl])
.range([0, h * pl]);
let size = pl;
let matrix = [];
for (var i = 0; i < data.length; i += size) {
matrix.push(data.slice(i, i + size));
}
//console.log(matrix);
return matrix;
/*
.attr("x", (d, i) => {
const n = i % pl;
return scaleX(n);
})
.attr("y", (d, i) => {
const n = Math.floor(i / pl);
return scaleY(n);
})
*/
}
get render() {
let uid = Math.random().toString(36).substr(2, 5);
let width = this.graphicWidth;
let height = this.graphicHeight;
let m = this.graphicMargin;
let v = this.totalValue;
let pl = this.symbolperLine;
let symbol = this.symbol;
let ratio = this.symbolRatio;
let w = this.symbolWidth;
let h = this.symbolHeight;
let symbolMargin = this.symbolMargin;
let vw = this.viewBoxWidth;
let vh = this.viewBoxHeight;
let id = this.id;
let fillColor = this.fillColor;
let strokeColor = this.strokeColor;
let strokeWidth = this.strokeWidth;
let percent = this.filledPercent;
let borderColor = this.borderColor;
let backgroundColor = this.backgroundColor;
let label = this.label;
let selected = this.selected;
let svg;
let dy = 0;
let viewBox = `0 0 ${vw} ${vh}`;
if (symbolMargin <= 1 && symbolMargin > 0) {
viewBox = `-${vw * symbolMargin} -${vh * symbolMargin} ${
vw + vw * symbolMargin
} ${vh + vh * symbolMargin}`;
} else {
viewBox = `0 0 ${vw} ${vh}`;
}
svg = DOM.svg(width, height);
d3.xml(symbol).then((data) => {
d3.selectAll(`.group-${uid}`).each(function (d, i) {
d3.select(this).html(d3.select(data).select("svg").html());
});
});
const g = d3
.select(svg)
.style("border", `1px solid ${borderColor}`)
.style("background-color", backgroundColor)
.attr("id", `svg-${uid}`);
let scaleX = d3
.scaleLinear()
.domain([0, pl])
.range([0, w * pl]);
let scaleY = d3
.scaleLinear()
.domain([0, pl])
.range([0, h * pl]);
let data = d3.range(v / ratio);
g.append("g")
.classed(`group-${uid}`, true)
.attr("transform", `translate(0,${dy})`)
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("title", (d, i) => {
const n1 = i % pl;
const n2 = Math.floor(i / pl);
return `(${Math.round(scaleX(n1))}, ${Math.round(scaleY(n2))})`;
})
.attr("class", `rect-${id}`)
.attr("width", w)
.attr("height", h)
.attr("x", (d, i) => {
const n = i % pl;
return scaleX(n);
})
.attr("y", (d, i) => {
const n = Math.floor(i / pl);
return scaleY(n);
})
.attr("data-highlight", selected)
.style("fill", fillColor)
.style("stroke", strokeColor)
.style("stroke-width", strokeWidth);
if (label) {
//to do
}
return g.node();
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
section([8])
section([4, 5, 8, 9, 16])
getTargetedSquare("SEq SWq NEq NWq")
getTargetedSquare("Wh")
getTargetedSquare("Eh NEq", {
highlight: {
fill: "pink",
stroke: "yellow",
"stroke-width": "1px" },
//quarter quarter
overlay: {
fill: "none",
stroke: "orange",
"stroke-width": "6px" },
default: { fill: "brown", stroke: "green", "stroke-width": "0.5px" }
})
getTargetedSquare("SWq NEq SWq")
getTargetedSquare("Eh NEq SEq")
getTargetedSquare("NEq SEq")
getTargetedSquare("Eh NEq")
getTargetedSquareArray = (target, style, uid) => {
if (style == undefined) {
style = {
highlight: { fill: "yellow", stroke: "yellow", "stroke-width": "1px" },
overlay: { fill: "none", stroke: "black", "stroke-width": "2px" },
default: { fill: "crimson", stroke: "red", "stroke-width": "1px" }
};
} else {
style = style;
}
if (uid == undefined) {
uid = Math.random().toString(36).substr(2, 4);
} else {
uid = uid;
}
}
getTargetedSquare = (target, style, uid) => {
if (style == undefined) {
style = {
highlight: { fill: "yellow", stroke: "yellow", "stroke-width": "1px" },
overlay: { fill: "none", stroke: "black", "stroke-width": "2px" },
default: { fill: "crimson", stroke: "red", "stroke-width": "1px" }
};
} else {
style = style;
}
if (uid == undefined) {
uid = Math.random().toString(36).substr(2, 4);
} else {
uid = uid;
}
//target = 'Nh SEq SWq' legal description "North half of the Northeast Quarter of the Southweat Quarter"
// legal description
/*The north 1/2 of the southeast quarter of the southwest quarter of section 24, township 32 north, range 18 east*/
/*R18E T32N S24 SWq SEq Nh*/
// plssfinder
/*Nh SEq SWq*/
/*for ease should be typed as written in the legal description would be typed as 'Nh SEq SWq' seperated by spaces*/
//
// layer1 quarters => SWq
// layer2 half/quarter quarters => NWq SEq
// layer3 half/quarter quarter quarters => NWq NWq SWq
// layer4 half quarter quarter quarters => Wh NWq NWq SWq
//
// q1 = scaleApply(matrixQuarter, 4).map((d) => d.map((d) => (d == "NW¼" ? 1 : 0)))
// q2 = scaleApply(matrixQuarterQuarter, 2).map((d) =>d.map((d) => (d == "SW¼" ? 1 : 0))
// q3 = scaleApply(matrixQuarterQuarterQuarter, 1).map((d) => d.map((d) => (d == "NE¼" ? 1 : 0))
// getAllIndexes(printMatrix(math.dotMultiply(math.dotMultiply(q1, q2),q3), 8, 8), 1)
if (typeof target == "string") {
let desc = target.split(" ").reverse();
if (Object.keys(dir).indexOf(desc[0]) > -1) {
let lookupMatrix = [];
let layer1 = [];
let layer2 = [];
let layer3 = [];
let layer4 = [];
switch (desc.length) {
case 1:
if (["Sh", "Wh", "Eh", "Nh"].indexOf(desc[desc.length - 1]) == -1) {
// if one use quarter
layer1 = scaleApply(matrixQuarter, 8).map((d) =>
d.map((d) => (d == dir[desc[0]] ? 1 : 0))
);
lookupMatrix = getAllIndexes(printMatrix(layer1, 16, 16), 1);
} else {
if (["Sh", "Nh"].indexOf(desc[0]) > -1) {
layer1 = scaleApply(matrixHalfNS, 8).map((d) =>
d.map((d) => (d == dir[desc[0]] ? 1 : 0))
);
}
if (["Wh", "Eh"].indexOf(desc[0]) > -1) {
layer1 = scaleApply(matrixHalfWE, 8).map((d) =>
d.map((d) => (d == dir[desc[0]] ? 1 : 0))
);
}
lookupMatrix = getAllIndexes(printMatrix(layer1, 16, 16), 1);
}
break;
case 2:
// if two use quarter quarter
layer1 = scaleApply(matrixQuarter, 8).map((d) =>
d.map((d) => (d == dir[desc[0]] ? 1 : 0))
);
if (["Sh", "Wh", "Eh", "Nh"].indexOf(desc[desc.length - 1]) == -1) {
layer2 = scaleApply(matrixQuarterQuarter, 4).map((d) =>
d.map((d) => (d == dir[desc[1]] ? 1 : 0))
);
lookupMatrix = getAllIndexes(
printMatrix(math.dotMultiply(layer1, layer2), 16, 16),
1
);
} else {
let subMatrix = getAllIndexes(printMatrix(layer1, 16, 16), 1);
lookupMatrix = makeMatrix(subMatrix, 8);
if (desc[desc.length - 1] == "Sh") {
lookupMatrix = lookupMatrix.splice(4, 7).flat();
}
if (desc[desc.length - 1] == "Wh") {
lookupMatrix = lookupMatrix.map((d) => d.splice(0, 4)).flat();
}
if (desc[desc.length - 1] == "Eh") {
lookupMatrix = lookupMatrix.map((d) => d.splice(4, 7)).flat();
}
if (desc[desc.length - 1] == "Nh") {
lookupMatrix = lookupMatrix.splice(0, 4).flat();
}
}
break;
case 3:
// // if two use quarter quarter quarters
layer1 = scaleApply(matrixQuarter, 8).map((d) =>
d.map((d) => (d == dir[desc[0]] ? 1 : 0))
);
layer2 = scaleApply(matrixQuarterQuarter, 4).map((d) =>
d.map((d) => (d == dir[desc[1]] ? 1 : 0))
);
layer3 = scaleApply(matrixQuarterQuarterQuarter, 2).map((d) =>
d.map((d) => (d == dir[desc[2]] ? 1 : 0))
);
if (["Sh", "Wh", "Eh", "Nh"].indexOf(desc[desc.length - 1]) == -1) {
layer3 = scaleApply(matrixQuarterQuarterQuarter, 2).map((d) =>
d.map((d) => (d == dir[desc[2]] ? 1 : 0))
);
lookupMatrix = getAllIndexes(
printMatrix(
math.dotMultiply(math.dotMultiply(layer1, layer2), layer3),
16,
16
),
1
);
} else {
let subMatrix = getAllIndexes(
printMatrix(math.dotMultiply(layer1, layer2), 16, 16),
1
);
//see case 4 for map
if (desc[desc.length - 1] == "Sh") {
lookupMatrix = makeMatrix(subMatrix, 4)[2].concat(
makeMatrix(subMatrix, 4)[3]
);
}
if (desc[desc.length - 1] == "Wh") {
lookupMatrix = makeMatrix(subMatrix, 4)
.map((d) => d.splice(0, 2))
.flat();
}
if (desc[desc.length - 1] == "Eh") {
lookupMatrix = makeMatrix(subMatrix, 4)
.map((d) => d.splice(2, 4))
.flat();
}
if (desc[desc.length - 1] == "Nh") {
lookupMatrix = makeMatrix(subMatrix, 4)[0].concat(
makeMatrix(subMatrix, 4)[1]
);
}
}
break;
case 4:
// // if two use quarter quarter quarters
layer1 = scaleApply(matrixQuarter, 8).map((d) =>
d.map((d) => (d == dir[desc[0]] ? 1 : 0))
);
layer2 = scaleApply(matrixQuarterQuarter, 4).map((d) =>
d.map((d) => (d == dir[desc[1]] ? 1 : 0))
);
layer3 = scaleApply(matrixQuarterQuarterQuarter, 2).map((d) =>
d.map((d) => (d == dir[desc[2]] ? 1 : 0))
);
layer4 = matrixQuarterQuarterQuarterQuarter.map((d) =>
d.map((d) => (d == dir[desc[3]] ? 1 : 0))
);
if (["Sh", "Wh", "Eh", "Nh"].indexOf(desc[desc.length - 1]) == -1) {
lookupMatrix = getAllIndexes(
printMatrix(
math.dotMultiply(
math.dotMultiply(math.dotMultiply(layer1, layer2), layer3),
layer4
),
16,
16
),
1
);
} else {
lookupMatrix = getAllIndexes(
printMatrix(
math.dotMultiply(math.dotMultiply(layer1, layer2), layer3),
16,
16
),
1
);
if (desc[desc.length - 1] == "Sh") {
lookupMatrix.splice(0, 2);
}
if (desc[desc.length - 1] == "Wh") {
lookupMatrix = [lookupMatrix[0], lookupMatrix[2]];
}
if (desc[desc.length - 1] == "Eh") {
lookupMatrix = [lookupMatrix[1], lookupMatrix[3]];
}
if (desc[desc.length - 1] == "Nh") {
lookupMatrix.splice(2, 4);
}
}
break;
}
let output = new Grid({
id: uid,
graphicHeight: 360,
graphicWidth: 360,
symbolWidth: 360 / 16,
symbolHeight: 360 / 16,
totalValue: 256,
symbolperLine: 16,
symbolRatio: 1,
selected: (feature) => {
if (lookupMatrix.indexOf(feature) > -1) {
return true;
} else {
return false;
}
},
fillColor: (feature) => {
if (lookupMatrix.indexOf(feature) > -1) {
return style["highlight"]["fill"];
} else {
return style["default"]["fill"];
}
},
strokeColor: (feature) => {
if (lookupMatrix.indexOf(feature) > -1) {
return style["highlight"]["stroke"];
} else {
return style["default"]["stroke"];
}
},
strokeWidth: (feature) => {
if (lookupMatrix.indexOf(feature) > -1) {
return style["highlight"]["stroke-width"];
} else {
return style["default"]["stroke-width"];
}
},
backgroundColor: "ivory",
borderColor: "black"
});
//define overlays
let q = new Grid({
id: "q",
graphicHeight: 360,
graphicWidth: 360,
symbolWidth: 360 / 2,
symbolHeight: 360 / 2,
totalValue: 2 * 2,
symbolperLine: 2,
symbolRatio: 1,
fillColor: style["overlay"]["fill"],
strokeColor: style["overlay"]["stroke"],
strokeWidth: style["overlay"]["stroke-width"],
backgroundColor: "black",
borderColor: "black"
});
var stringToHTML = function (str) {
var dom = document.createElement("div");
dom.innerHTML = str;
return dom;
};
return stringToHTML(
`<svg width="360" height="360">${output.render.innerHTML}${q.render.innerHTML}</svg>`
);
} else {
console.log("not a valid entry");
}
} else {
console.log("not a valid entry");
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.