mlu @aws
chart = {
const width = 200;
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Define the data for the path
var data = [ { x: 50, y: 50 }, { x: 100, y: 100 }, { x: 150, y: 50 }];
// Create a new SVG path element and set its d attribute
var path = svg.append('path')
.datum(data)
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
)
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('id', 'my-path')
// Get the SVG path element
var path2 = document.getElementById('my-path');
// Trace the path with the character '4' repeating along it
var text = tracePathWith4(path);
// Add the text to the SVG element on the page
svg.node().appendChild(text);
return svg.node();
}
function tracePathWith4(path) {
console.log('path', path)
var pathLength = path.node().getTotalLength();
// Create a new SVG <text> element
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
// Set the font size and font family of the text
text.setAttribute('font-size', '20px');
text.setAttribute('font-family', 'sans-serif');
// Set the position and orientation of the text
text.setAttribute('x', 0);
text.setAttribute('y', 0);
text.setAttribute('text-anchor', 'start');
text.setAttribute('dominant-baseline', 'middle');
// Set the text to be the character '4' repeated along the path
text.textContent = 'r'.repeat(pathLength);
// // Create a new SVG <path> element that will be used to animate the text
// var animate = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// // Set the path data of the animate element to be the same as the input path
// animate.setAttribute('d', path.getAttribute('d'));
// // Set the length of the path to be equal to the length of the text
// animate.setAttribute('stroke-dasharray', pathLength + ' ' + pathLength);
// // Create a new SVG <animate> element that will be used to animate the text along the path
// var animateMotion = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');
// // Set the animation to repeat indefinitely
// animateMotion.setAttribute('repeatCount', 'indefinite');
// // Set the animation to follow the path defined by the animate element
// animateMotion.setAttribute('path', animate);
// // Add the animateMotion element to the text element
// text.appendChild(animateMotion);
// Return the text element
return text;
}
function renderAscii(svgElement) {
// First, we need to get the dimensions of the SVG element
const { width, height } = svgElement.getBoundingClientRect();
// Next, we need to create a canvas element that we can use to draw the SVG element
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
// We'll use the canvas element to draw the SVG element and convert it to a data URL
const dataUrl = canvas.toDataURL();
// Finally, we'll convert the data URL to ASCII using a simple algorithm
const ascii = dataUrlToAscii(dataUrl);
// Here, we'll create a new `pre` element to hold the ASCII representation of the SVG element
const preElement = document.createElement("pre");
preElement.textContent = ascii;
// Finally, we'll add the `pre` element to the page
document.body.appendChild(preElement);
}
// This is a helper function that converts a data URL to ASCII
function dataUrlToAscii(dataUrl) {
// First, we'll convert the data URL to a byte array
const byteArray = dataUrlToByteArray(dataUrl);
// Next, we'll convert the byte array to ASCII using a simple algorithm
const ascii = byteArrayToAscii(byteArray);
// Finally, we'll return the ASCII representation of the data URL
return ascii;
}
// This is a helper function that converts a data URL to a byte array
function dataUrlToByteArray(dataUrl) {
// First, we'll split the data URL into its components (mime type, base64 data, etc.)
const [, base64] = dataUrl.split(",");
// Next, we'll decode the base64 data to get the raw bytes
const rawBytes = atob(base64);
// Finally, we'll convert the raw bytes to a JavaScript array of 8-bit integers
const byteArray = rawBytes.split("").map(char => char.charCodeAt(0));
// Return the byte array
return byteArray;
}
function byteArrayToAscii(byteArray) {
// We'll use a simple algorithm to convert the byte array to ASCII
// For each byte in the array, we'll look up the corresponding ASCII character
// and append it to a string
const ascii = byteArray.map(byte => {
// Here, we'll use a simple lookup table to convert the byte to its corresponding ASCII character
const asciiChars = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
const asciiChar = asciiChars[byte];
// Return the ASCII character
return asciiChar;
}).join("");
// Return the ASCII representation
return ascii;
}
height = 200
width = 400
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.
