Created
November 30, 2023 01:47
-
-
Save antimatter15/53a00fa2285da6cfe7f7627ee191f29e to your computer and use it in GitHub Desktop.
console.image and console.plot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.image = (url) => { | |
| fetch(url) | |
| .then(res => res.blob()) | |
| .then(blob => new Promise(resolve => { | |
| let fr = new FileReader() | |
| fr.onload = () => resolve(fr.result) | |
| fr.readAsDataURL(blob) | |
| })) | |
| .then(url => new Promise(resolve => { | |
| let img = new Image() | |
| img.onload = () => resolve([url, img.width, img.height]) | |
| img.src = url | |
| })) | |
| .then(([url, width, height]) => { | |
| console.log("%c+", "font-size: 1px; padding: " + Math.floor(height / 2) + "px " + Math.floor(width / 2) + | |
| "px;background: url(" + url + "); background-size: " + width | |
| + "px " + height + "px; color: transparent;"); | |
| }) | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.plot = (yData, xData = yData.map((k, i) => i)) => { | |
| const width = 400; | |
| const height = 300; | |
| const margin = { top: 20, right: 30, bottom: 30, left: 40 }; | |
| const xMin = xData.reduce((a, b) => Math.min(a,b)), yMin = yData.reduce((a, b) => Math.min(a,b)) | |
| const xMax = xData.reduce((a, b) => Math.max(a,b)), yMax = yData.reduce((a, b) => Math.max(a,b)) | |
| let svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">`; | |
| svg += `<line x1="${margin.left}" y1="${height - margin.bottom}" x2="${width - margin.right}" y2="${height - margin.bottom}" stroke="black"/>`; // X-axis | |
| svg += `<line x1="${margin.left}" y1="${margin.top}" x2="${margin.left}" y2="${height - margin.bottom}" stroke="black"/>`; // Y-axis | |
| // Add tick labels and lines (example only, should be based on actual data) | |
| const xTicks = 5; | |
| for (let i = 0; i < xTicks; i++) { | |
| let x = margin.left + i * (width - margin.left - margin.right) / 4; | |
| let y = height - margin.bottom; | |
| svg += `<line x1="${x}" y1="${y}" x2="${x}" y2="${y - 5}" stroke="black"/>`; // X-axis ticks | |
| svg += `<text x="${x}" y="${y + 20}" text-anchor="middle">${(xMax-xMin) *(i/xTicks) + xMin}</text>`; // X-axis labels | |
| } | |
| // Y-axis ticks and labels | |
| const yTicks = 5; // number of y-axis ticks | |
| for (let i = 0; i <= yTicks; i++) { | |
| let x = margin.left; | |
| let y = height - margin.bottom - i * (height - margin.top - margin.bottom) / yTicks; | |
| svg += `<line x1="${x}" y1="${y}" x2="${x + 5}" y2="${y}" stroke="black"/>`; // Y-axis ticks | |
| svg += `<text x="${x - 10}" y="${y}" text-anchor="end" alignment-baseline="middle">${(yMax-yMin)*(i/yTicks)+yMin}</text>`; // Y-axis labels | |
| } | |
| // Plotting the line (example only, should be based on dataPoints) | |
| let path = "M "; | |
| for (let i = 0; i < yData.length; i++) { | |
| let x = margin.left + i * (width - margin.left - margin.right) / (yData.length - 1); | |
| let y = height - margin.bottom - (yData[i]-yMin)/(yMax-yMin) *(height - margin.bottom - margin.top); | |
| path += `${x} ${y} `; | |
| } | |
| svg += `<path d="${path}" fill="none" stroke="blue"/>`; | |
| svg += `</svg>`; | |
| console.log("%c+", "font-size: 1px; padding: " + Math.floor(height / 2) + "px " + Math.floor(width / 2) + | |
| `px;background: url(data:image/svg+xml;base64,${btoa(svg)}); background-size: ` + width | |
| + "px " + height + "px; color: transparent;"); | |
| } | |
| console.plot([1,2,3,4,5]) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment