The avatar for @julesblm
Jules Blom
Interested in data visualisation, maps, JavasScript, and geology
Published
JavaScript explainable
Edited
Mar 5, 2022
8 stars
Insert cell
Insert cell
Insert cell
buffer = new ArrayBuffer(arrayBufferSize);
Insert cell
Insert cell
Insert cell
buffer.byteLength // Checking byteLength is pretty much the only thing you can do on an ArrayBuffer
Insert cell
Insert cell
Insert cell
dataview = {
const dataview = new DataView(buffer);
dataview.setInt16(1, 42); // set type Int16 with value 42 in 1st byte
dataview.setInt8(3, 4); // set type Int8 with value 1 in 3rd byte
return dataview
}
Insert cell
dataview.getInt16(1);
Insert cell
dataview.getInt8(3);
Insert cell
Insert cell
Insert cell
Insert cell
uint8 = new Uint8Array(buffer)
Insert cell
Insert cell
Insert cell
Insert cell
uint8.BYTES_PER_ELEMENT
Insert cell
uint16 = new Uint16Array(buffer)
Insert cell
Insert cell
Insert cell
uint16.BYTES_PER_ELEMENT
Insert cell
Insert cell
Object.is(dataview.buffer, uint8.buffer) // ✅ dataview and uint8 are associated with the same ArrayBuffer
Insert cell
Object.is(uint16.buffer, uint8.buffer) // ✅ uint8 and uint16 are associated with the same ArrayBuffer
Insert cell
Insert cell
uint32 = new Uint32Array(buffer)
Insert cell
Insert cell
uint32.BYTES_PER_ELEMENT
Insert cell
float64a = new Float64Array(buffer)
Insert cell
Insert cell
Insert cell
float64a.BYTES_PER_ELEMENT
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Int8Array(16) // 🌶
Insert cell
Create a typed array by passing it the desired length. Unlike normal arrays, typed arrays can't have holes. Therefore typed arrays are initialized with all 0s.
Insert cell
int8 = new Int8Array(10) // ✅
Insert cell
Insert cell
arrayWithHoles = {
const regulararray = new Array(10); // Creates a regular Array without any elements, it initially only has empty 'holes'

// fill the these indices with values
regulararray[4] = 12;
regulararray[7] = 10;
regulararray[10] = 5;

return regulararray;
}
Insert cell
Insert cell
int8.buffer
Insert cell
Insert cell
new Uint16Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) // Create a Uint16 typed array from a regular array
Insert cell
Insert cell
Uint32Array.from([1, "12", 12, ])
Insert cell
Insert cell
uint32b = new Uint32Array(uint16) // Create a typed array from another typed array
Insert cell
Object.is(uint16.buffer, uint32b.buffer)
Insert cell
Insert cell
iterable = (function* () {
yield* [1, 2, 3];
})()
Insert cell
new Int8Array(iterable)
Insert cell
Insert cell
newBuffer = new ArrayBuffer(8);
Insert cell
new Int8Array(buffer, 2, 4);
Insert cell
Insert cell
float64 = new Float64Array(10)
Insert cell
{
float64[0] = "Can't add strings!" // 🌶 String is not a number NaN
float64[1] = { text: "Can't add objects!" } // 🌶 Object is not a number NaN
float64[2] = ["Can't add arrays neither!"] //🌶 Arrays are just objects, so will also return NaN
float64[3] = () => "Nor functions" // 🌶 Functions are also objects NaN
float64[4] = 28289 // ✅ Numbers only, thank you
float64[5] = -213 // ✅ Negative numbers for float64? Sure
float64[6] = "53" // ✅ Strings are coerced to numbers if possible
return float64
}
Insert cell
Insert cell
typeof float64[0] // 🌶 typeof NaN = "number" so not a good way to check if values are NaN
Insert cell
Number.isNaN(float64[0]) // ✅
Insert cell
Insert cell
Insert cell
{
uint8[0] = 255; // ✅ Highest value within range
uint8[1] = 256; //🌶 Overflow: value exceeds 255, so it wraps around
uint8[2] = 300; //🌶 Overflow: 300%256 = 44
uint8[3] = -10; //🌶 Underflow: subtract 10 from the max+1: 256 - 10 = 246
uint8[4] = -255; //🌶 Underflow: subtract 255 from the max+1: 256 - 255 = 1
uint8[5] = 9.2; // ⚠️ If you specify a non-integer in an Int typed array, the decimal will be ignored
uint8[6] = 9.9; // ⚠️ So it does NOT round up, it's like Math.floor(number)
uint8[7] = "ayyy"; // 🌶 Ignored as value is not a number!

return uint8;
}
Insert cell
Insert cell
{
int8[0] = 127; // ✅ Highest value within range
int8[1] = 128; //🌶 Overflow: value exceeds 127!
int8[2] = 300; //🌶 Overflow: 300 % 256 = 44
int8[3] = -128; // ✅ Lowest value withing range
int8[4] = -130; //🌶 Underflow, so it wraps around
int8[5] = -200; //🌶 Underflow, so it wraps around
int8[6] = 9.2; // ⚠️ If you specify a non-integer in an Integer typed array, the decimal will be ignored
int8[7] = 9.9; // ⚠️ So it does NOT round up, it's like Math.floor(number)

return int8;
}
Insert cell
Insert cell
uint8clamped = new Uint8ClampedArray(10)
Insert cell
{
uint8clamped[0] = 9.8 // ⚠️ The NEAREST integer is set, here it's rounded UP
uint8clamped[1] = 5.2 // ⚠️ The NEAREST integer is set, here it's rounded DOWN
uint8clamped[2] = 300 // 🌶 300 is out of range, 255 is set instead
uint8clamped[3] = -10 // 🌶 -10 is out of range, 0 is set instead
return uint8clamped
}
Insert cell
Insert cell
Insert cell
Insert cell
Array.isArray(uint8) // 🌶
Insert cell
Insert cell
uint8 instanceof Array //🌶 Remember: a typed array is not an Array
Insert cell
uint8 instanceof Uint8Array // ✅
Insert cell
Insert cell
Insert cell
uint8.slice(0, 10)
Insert cell
uint8.slice(-5, -1)
Insert cell
Insert cell
uint8.splice(0, 10) // can't change its length
Insert cell
Insert cell
Insert cell
subuint8 = uint8.subarray(0, 5) // from 0 to 5
Insert cell
Insert cell
[...uint8]
Insert cell
Insert cell
Array.from(uint8)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
intBlockMaker = (size, int) => svg`<svg text-anchor="middle" font-size=${(16*26/size)} width=${width} height=${squareWidth*2+5}>
<g transform="translate(4,4)">
${[...new Array(arrayBufferSize).keys()].map(d => `
<g transform="translate(${d * squareWidth})">
<text alignment-baseline="middle" x=${squareWidth/2} y=${squareWidth/2}>${d}</text>
<rect width=${squareWidth} height=${squareWidth} fill="transparent" stroke="dimgray"/>
${(d*8) % int === 0 ? `<line stroke-width="2.5" y0="0" y1=${squareWidth} stroke="coral" />` : null}
</g> `)}
</g>
</svg>`
Insert cell
visualizeTypedArray = (typedArray) => {
const bufferLength = typedArray.buffer.byteLength;
const bytesPerElement = typedArray.BYTES_PER_ELEMENT;
const { length } = typedArray;

const typedArraySquareWidth = squareWidth * bytesPerElement;

const typedArrayBlocks = svg`
<svg text-anchor="middle" width=${width} height=${squareWidth * 2 + 5}>
<g font-size=${width / (bufferLength * 2.5)}>
${[...Array(length).keys()].map(
(d) => `<g transform="translate(${d * typedArraySquareWidth})">
<text x=${typedArraySquareWidth / 2} y=${squareWidth / 2}>
<tspan fill="DarkGrey">${d}:</tspan> <tspan>${
typedArray[d]
}</tspan></text>
<rect width=${typedArraySquareWidth} height=${squareWidth} fill="transparent" stroke="dimgray"/>
</g> `
)}
</g>
<g font-size=${
width / (bufferLength * 1.75)
} transform="translate(0,${squareWidth})">
${[...new Array(bufferLength).keys()].map(
(d) => `
<g transform="translate(${d * squareWidth})">
<rect width=${squareWidth} height=${squareWidth} fill=${arrayBufferColor} stroke="dimgray"/>
<text alignment-baseline="middle" x=${squareWidth / 2} y=${
squareWidth / 2
}>${d}</text>
</g> `
)}
</g>
</svg>
`;
return typedArrayBlocks;
}
Insert cell
arrayBufferColor = "#e4e4e4"
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more