open source with R and JavaScript
Public
Edited
Aug 7, 2022
4 stars
{
// mario example from documentation
const R = convertToRgbString(cR); //Red Hat & Shirt
const B = convertToRgbString(cB); //Brown Hair & Boots
const S = convertToRgbString(cS); //Skin Tone
const O = convertToRgbString(cO); //Blue Overalls
const Y = convertToRgbString(cY); //Yellow Buckles
const W = convertToRgbString(cW); //White Gloves
const _ = "0, 0, 0, 0"; //Transparent (RGBA Format)
const marioPixelData = [
[_, _, _, B, R, R, B, R, _, _, _, _],
[_, _, R, R, R, R, R, R, R, R, R, _],
[_, _, B, B, B, S, S, B, S, _, _, _],
[_, B, S, B, S, S, S, B, S, S, S, _],
[_, B, S, B, B, S, S, S, B, S, S, B],
[_, B, B, S, S, S, S, B, B, B, B, _],
[_, _, _, S, S, S, S, S, S, S, _, _],
[_, _, R, R, O, R, R, R, R, _, _, _],
[_, R, R, R, O, R, R, O, R, R, R, _],
[R, R, R, R, O, O, O, O, R, R, R, R],
[W, W, R, O, Y, O, O, Y, O, R, W, W],
[W, W, W, O, O, O, O, O, O, W, W, W],
[W, W, O, O, O, O, O, O, O, O, W, W],
[_, _, O, O, O, _, _, O, O, O, _, _],
[_, B, B, B, _, _, _, _, B, B, B, _],
[B, B, B, B, _, _, _, _, B, B, B, B]
];
//const pixelSize = 50;
const dp = new DataPixels(marioPixelData, pixelSize);
const image = dp.image; //or dp.canvas
image.style.filter = "drop-shadow(-10px 10px 20px #000000)";
document.querySelector('#pixelart').replaceChild(image, document.querySelector('#pixelart > img'))
}
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.
