console.image and console.plot

console.image.js

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;");	
		})
}

console.plot.js

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])