Published
Edited
Oct 8, 2020
2 forks
md`# Untitled`
bees = [0]
cubes = [
[0, -1], [+1, 0], [+1, -1],
[-1, 0], [-1, +1], [0, +1], [0,0]
]
beeData = {
var beecubes = [
[0, -1], [+1, 0], [+1, -1],
[-1, 0], [-1, +1], [0, +1], [0,0]
];
var beeColors = ["white","lightgrey","lightgrey","lightgrey","lightgrey","black","#ebff01"]
var beeStrokes = ["black","white","white","white","white","black","#ebff01"]
var beeStrokesWidth = ["2px","3px","3px","3px","3px","0px","12px"]
var temp = [];
cubes.forEach(function(d,i){
temp.push({
"data":cubes[i],
"colors": beeColors[i],
"stroke": beeStrokes[i],
"width": beeStrokesWidth[i]
})
})
return temp;
}
DOM.download(() => serialize(beehex), undefined, "Save as SVG")
serialize = {
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
return function serialize(svg) {
svg = svg.cloneNode(true);
const fragment = window.location.href + "#";
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
}
}
svg.setAttributeNS(xmlns, "xmlns", svgns);
svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(svg);
return new Blob([string], {type: "image/svg+xml"});
};
}
var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 100)
.style("border", "1px solid black");
var text = svg.selectAll("text")
.data([0])
.enter()
.append("text")
.text("Testing")
.attr("x", "40")
.attr("y", "60");
var beehex = svg.selectAll("image").data([0]);
beehex.enter()
.append("svg.image")
.attr("xlink:href", "@Url.Content("~beehex.png")");
function beehexLocation(x,hexRadius,boxsize) {
const height = 350
const width = 900
return (((hexRadius*(Math.sqrt(3)/(2/3))))-((hexRadius*1.5)*x[0])) + "," + (((hexRadius*(Math.sqrt(3)/(2/3)))-((boxsize/3)*x[1]))+(x[0]*(-(hexRadius/2)* Math.sqrt(3))))
}
function rasterize(svg) {
let resolve, reject;
const promise = new Promise((y, n) => (resolve = y, reject = n));
const image = new Image;
image.onerror = reject;
image.onload = () => {
const rect = svg.getBoundingClientRect();
const context = DOM.context2d(rect.width, rect.height);
context.drawImage(image, 0, 0, rect.width, rect.height);
context.canvas.toBlob(resolve);
};
image.src = URL.createObjectURL(serialize(svg));
return promise;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
