Published
Edited
Aug 4, 2021
2 forks
7 stars
image = FileAttachment("camera.png").image()
coeffs = py`
# Wavelet transform of image
import numpy as np
import pywt
import pywt.data
pywt.dwt2(${pixels}, ${waveletType})
`
wvTypes = py`
import pywt
[pywt.wavelist(family) for family in pywt.families()]
`
display = (coeffs) => py`
########################################### patch matplotlib for Observable #######
## taken from "@gnestor/pyodide-demo"
from matplotlib import pyplot as plt
import types
import io
import base64
from js import document
def _show(self):
buf = io.BytesIO()
self.savefig(buf, format='png')
buf.seek(0)
img_str = 'data:image/png;base64,' + base64.b64encode(buf.read()).decode('UTF-8')
el = document.createElement('img')
el.src = img_str
return el
plt._show = types.MethodType(plt.show, plt)
plt.show = types.MethodType(_show, plt)
####################################################################################
LL, (LH, HL, HH) = ${coeffs}
# Plot approximation and details
titles = ['Approximation', ' Horizontal detail',
'Vertical detail', 'Diagonal detail']
fig = plt.figure(figsize=(12, 3))
for i, a in enumerate([LL, LH, HL, HH]):
ax = fig.add_subplot(1, 4, i + 1)
ax.imshow(a, interpolation="nearest", cmap=plt.cm.gray)
ax.set_title(titles[i], fontsize=10)
ax.set_xticks([])
ax.set_yticks([])
fig.tight_layout()
plt.show()
`
import { py, pyodide } from "@gnestor/pyodide"
pixels = {
const w = image.naturalWidth;
const h = image.naturalHeight;
const context = DOM.context2d(w, h, 1);
context.drawImage(image, 0, 0);
const { data } = context.getImageData(0, 0, w, h);
const pixels = [];
for (let y = 0; y < h; y++)
pixels.push(
Uint8Array.from({ length: w }, (_, x) =>
gray(data.slice(4 * (x + w * y), 4 * (x + w * y + 1)))
)
);
return pixels;
}
// Adobe Photoshop RGB (1998); proper grayscale conversion
function gray([r, g, b]) {
const gamma = 2.2;
return (
(r ** gamma * 0.2973 + g ** gamma * 0.6274 + b ** gamma * 0.0753) **
(1 / gamma)
);
}
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.
