The avatar for @julesblm
Jules Blom
Interested in data visualisation, maps, JavasScript, and geology
Public
JavaScript explainable
Edited
Apr 9
8 stars
Insert cell
Insert cell
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
import { freelanceBanner } from "@julesblm/freelance-banner"
Insert cell

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