const rectSize = 15; // Size of the color box
        const spacing = 5; // Space between legend items
        let legend = canvas.append('g').attr('class','chart-legend')
        .attr('transform', `translate(${0}, ${height + 3})`);

        // Sample data for the legend
        const legendData = [
            { label: 'low', color: '#1f77b4' },
            { label: 'medium', color: '#ff7f0e' },
            { label: 'high', color: '#2ca02c' },
            { label: 'very high', color: '#2ca02c' }
        ];


        legend.selectAll('g')
            .data(legendData)
            .join('g')
            .attr('class', 'legend-item')
            
            .each(function (d, i) {
                const legendItem = d3.select(this);
                console.log(d.label)
                console.log(d.label?.length)
                let labelWidth = (d.label.length * 5) + 7 + 15
                

                var bbox = legendItem.node().getBBox()
                var width = bbox.width
                console.log(width)
                
                // Add rectangle for color
                legendItem.append('rect')
                    .attr('width', rectSize)
                    .attr('height', rectSize)
                    .attr('fill', d.color);
                    
                    // Add label
                    legendItem.append('text')
                    .attr('x', rectSize + spacing) // Position text to the right of the rectangle
                    .attr('y', rectSize / 2) // Align text vertically with the rectangle
                    .attr('dy', '.35em') // Adjust vertical alignment
                    .attr('text-anchor', 'start') // Align text to the start
                    .text(d.label)
                    .attr('fill', 'black'); // Optional: Text color
                // legendItem.attr('transform', `translate(${i * (rectSize + spacing + labelWidth)}, 0)`) // Position each item horizontally
            });

            const legendItems_spacing = 12
            var legendLength = 0
            legend.selectAll('.legend-item').each(function(d,i) {
              d3.select(this).attr('transform',function() {
                var bbox = d3.select(this).node().getBBox()
                var width = bbox.width
                // if (width == 0) width = (d.text.length * 5) +15  // not in dom yet
                let startingPosition = 0 
                if (i > 0) {
                    startingPosition = legendLength
                }
                legendLength += width + legendItems_spacing
                
                // return `translate(${xx - (width + 30)},0$)`
                return `translate(${startingPosition},0)`
            })
            })

class DoublyLinkedList {
  constructor() {
    this.nodes = [];
  }

  get size() {
    return this.nodes.length;
  }

  get head() {
    return this.size ? this.nodes[0] : null;
  }

  get tail() {
    return this.size ? this.nodes[this.size - 1] : null;
  }

  insertAt(index, value) {
    const previousNode = this.nodes[index - 1] || null;
    const nextNode = this.nodes[index] || null;
    const node = { value, next: nextNode, previous: previousNode };

    if (previousNode) previousNode.next = node;
    if (nextNode) nextNode.previous = node;
    this.nodes.splice(index, 0, node);
  }

  insertFirst(value) {
    this.insertAt(0, value);
  }

  insertLast(value) {
    this.insertAt(this.size, value);
  }

  getAt(index) {
    return this.nodes[index];
  }

  removeAt(index) {
    const previousNode = this.nodes[index - 1] || null;
    const nextNode = this.nodes[index + 1] || null;

    if (previousNode) previousNode.next = nextNode;
    if (nextNode) nextNode.previous = previousNode;

    return this.nodes.splice(index, 1);
  }

  clear() {
    this.nodes = [];
  }

  reverse() {
    this.nodes = this.nodes.reduce((acc, { value }) => {
      const nextNode = acc[0] || null;
      const node = { value, next: nextNode, previous: null };
      if (nextNode) nextNode.previous = node;
      return [node, ...acc];
    }, []);
  }

  *[Symbol.iterator]() {
    yield* this.nodes;
  }
}

const list = new DoublyLinkedList();

list.insertFirst(1);
list.insertFirst(2);
list.insertFirst(3);
list.insertLast(4);
list.insertAt(3, 5);

list.size;                      // 5
list.head.value;                // 3
list.head.next.value;           // 2
list.tail.value;                // 4
list.tail.previous.value;       // 5
[...list.map(e => e.value)];    // [3, 2, 1, 5, 4]

list.removeAt(1);               // 2
list.getAt(1).value;            // 1
list.head.next.value;           // 1
[...list.map(e => e.value)];    // [3, 1, 5, 4]

list.reverse();
[...list.map(e => e.value)];    // [4, 5, 1, 3]

list.clear();
list.size;                      // 0

import React, { useState } from 'react' import Welcome from '../components/Welcome'  function About() {  	const [showWelcome, setShowWelcome] = useState(false)  	return ( 	<div> 	{showWelcome ? <Welcome /> : null} 	</div> 	<div> 	{showWelcome && <Welcome /> } 	</div> 	) }  export default App

// Get the text that the user has selected
const getSelectedText = () => window.getSelection().toString();
getSelectedText();

//Allegedly never tested on the twitter website
function scrapeScreen(){
    let articles = Array.from(document.getElementsByTagName("article"));
    let results = [];
    for(let tweet of articles){
        const isAnAd = Array.from(tweet.querySelectorAll("span")).map((e)=>e.textContent).includes("Ad");
        if(isAnAd){
            //console.log(tweet, "is an ad. Skipping...");
            continue;
        }
        const userName = tweet.querySelector("[data-testid='User-Name'] > div:nth-child(2) > div > div")?.textContent;
        const tweetContent = tweet.querySelector("[data-testid='tweetText']")?.textContent;
        const timeStamp = tweet.querySelector("time")?.getAttribute("datetime");
        const tweetLink = tweet.querySelector("time")?.parentElement?.getAttribute("href");
        if((!userName) || (!tweetContent)) continue;
        results.push({
            username: userName,
            tweetText: tweetContent,
            timeStamp: timeStamp,
            tweetLink: tweetLink
        });
    }
    return results;
}
let scraped = scrapeScreen();
setInterval(()=>{
    scraped = scraped.concat(
        scrapeScreen().filter((tweet)=>{
            for(let scrapedTweet of scraped){
                if(scrapedTweet.username == tweet.username && scrapedTweet.tweetText == tweet.tweetText) return false;
            }
            return true;
        })
    );
}, 500); //Scrape everything on the screen twice a second

window.scrollIntervalId = setInterval(function(){
    window.scrollBy(0, 1000);
}, 500); //Scroll for me


//http://bgrins.github.io/devtools-snippets/#console-save
(function(console){

console.save = function(data, filename){

 if(!data) {
 console.error('Console.save: No data')
 return;
 }

 if(!filename) filename = 'console.json'

 if(typeof data === "object"){
 data = JSON.stringify(data, undefined, '\t')
 }

 var blob = new Blob([data], {type: 'text/json'}),
 e = document.createEvent('MouseEvents'),
 a = document.createElement('a')

 a.download = filename
 a.href = window.URL.createObjectURL(blob)
 a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
 e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
 a.dispatchEvent(e)
 }
})(console)

setTimeout(()=>{
    clearTimeout(window.scrollIntervalId);
    delete window.scrollIntervalId;

    console.save(scraped, "TwitterScrape" + Date.now() + ".json");
}, 60 * 1000 * 20); //Twenty minutes

const euclideanDistance = (a, b) =>
  Math.hypot(...Object.keys(a).map(k => b[k] - a[k]));
  
euclideanDistance([1, 1], [2, 3]); // ~2.2361
euclideanDistance([1, 1, 1], [2, 3, 2]); // ~2.4495