Plot Scatterplot / abhisek banerjee

chart2={

// Set up SVG dimensions

const svgWidth = 500;

const svgHeight = 500;

const margin = { top: 70, right: 20, bottom: 30, left: 40 }; // Increased top margin

const width = svgWidth - margin.left - margin.right;

const height = svgHeight - margin.top - margin.bottom;

// Create an SVG container

const svg = d3.create("svg")

.attr("width", svgWidth)

.attr("height", svgHeight);

// Initialize count

let count = 0;

// Function to update the visualization based on the current count

function updateVisualization() {

svg.selectAll("*").remove();

var l = count;

// Set up matrix dimensions

const numRows = 5;

const numCols = 5;

const cellSize = 40;

// Create an SVG container

// const svg = d3.create("svg")

// .attr("width", numCols * cellSize )

// .attr("height", numRows * cellSize);

// Create a matrix with numbers 1 to 25

const matrixData = d3.range(1, numRows * numCols + 1);

function makeMarix(x) {

const randomNumber = (25.06 + 0.8*(-x)).toFixed(2);

// Create a rectangle for each cell

const cells = svg.selectAll(".cell")

.data(matrixData)

.enter().append("rect")

.attr("class", "cell")

.attr("x", (d, i) => (i % numCols) * cellSize)

.attr("y", (d, i) => Math.floor(i / numCols) * cellSize)

.attr("width", cellSize)

.attr("height", cellSize)

.attr("fill", (d, i) => i % numCols === x ? "rgb(255, 140, 0)" : "steelblue");

// Add text to each cell

const text = svg.selectAll(".text")

.data(matrixData)

.enter().append("text")

.attr("class", "text")

.attr("fill","white")

.attr("x", (d, i) => (i % numCols) * cellSize + cellSize / 2 - 7)

.attr("y", (d, i) => Math.floor(i / numCols) * cellSize + cellSize / 2 + 7)

.text(d => d);

// Add vertical lines between cells

const verticalLines = svg.selectAll(".vertical-line")

.data(d3.range(numCols + 1))

.enter().append("line")

.attr("class", "vertical-line")

.attr("x1", d => d * cellSize)

.attr("y1", 1)

.attr("x2", d => d * cellSize)

.attr("y2", numRows * cellSize)

.attr("stroke", "white")

.attr("stroke-width", 2);

// Add horizontal lines between cells

const horizontalLines = svg.selectAll(".horizontal-line")

.data(d3.range(numRows + 1))

.enter().append("line")

.attr("class", "horizontal-line")

.attr("x1", 0)

.attr("y1", d => d * cellSize)

.attr("x2", numCols * cellSize)

.attr("y2", d => d * cellSize)

.attr("stroke", "white")

.attr("stroke-width", 2);

// Add legend

svg.append("rect")

.attr("x", width - 230)

.attr("y", 10)

.attr("width", 20)

.attr("height", 20)

.attr("fill", "rgb(255, 140, 0)");

svg.append("text")

.attr("x", width - 200)

.attr("y", 25)

.attr("fill", "black")

.text("Validation Set");

svg.append("rect")

.attr("x", width - 230)

.attr("y", 40)

.attr("width", 20)

.attr("height", 20)

.attr("fill", "steelblue");

svg.append("text")

.attr("x", width - 200)

.attr("y", 58)

.attr("fill", "black")

.text("Training Set");

// Add "K=i" text

svg.append("text")

.attr("x", (l-1)*40)

// .attr("x", 10)

.attr("y", 230)

.attr("fill", "black")

.text(`K= ${l}`);

// Add "Partioned data text"

svg.append("text")

.attr("x", 2)

.attr("y", 255)

.attr("fill", "black")

.text("Partitioned Data");

// Add "MSE" text with 'i' in subscript and a random number in curly braces

svg.append("text")

.attr("x", 210)

.attr("y", 110)

.attr("fill", "black")

.text("MSE")

.append("tspan")

.attr("baseline-shift", "sub") // shift to subscript

.style("font-size", "0.8em")

.text(`${x+1}`)

.append("tspan")

// reset font size to normal for the rest of the text

.attr("baseline-shift", "baseline")

.style("font-size", "1em")

.text(`= ${randomNumber}`); // Replace 123 with your actual random number

// Calculate MSE and set it to a variable

const mseValue = 23 / 5;

// Create the main "MSE" text

const mseText = svg.append("text")

.attr("x", 2)

.attr("y", 280)

.text("MSE = (");

// Helper function to append a tspan with the given text and attributes

function appendTspan(parent, text, fontSize, fill, baselineShift) {

return parent

.append("tspan")

.text(text)

.style("font-size", fontSize)

.attr("fill", fill)

.attr("baseline-shift", baselineShift);

}

// Append tspan elements to the text

appendTspan(mseText, "MSE", "1.2em", l === 1 ? "rgb(255, 140, 0)" : "black", "baseline");

appendTspan(mseText, "1", "0.8em", l === 1 ? "rgb(255, 140, 0)" : "black", "sub");

appendTspan(mseText, "+", "1.2em", "black", "baseline");

appendTspan(mseText, "MSE", "1.2em", l === 2 ? "rgb(255, 140, 0)" : "black", "baseline");

appendTspan(mseText, "2", "0.8em", l === 2 ? "rgb(255, 140, 0)" : "black", "sub");

appendTspan(mseText, "+", "1.2em", "black", "baseline");

appendTspan(mseText, "MSE", "1.2em", l === 3 ? "rgb(255, 140, 0)" : "black", "baseline");

appendTspan(mseText, "3", "0.8em", l === 3 ? "rgb(255, 140, 0)" : "black", "sub");

appendTspan(mseText, "+", "1.2em", "black", "baseline");

appendTspan(mseText, "MSE", "1.2em", l === 4 ? "rgb(255, 140, 0)" : "black", "baseline");

appendTspan(mseText, "4", "0.8em", l === 4 ? "rgb(255, 140, 0)" : "black", "sub");

appendTspan(mseText, "+", "1.2em", "black", "baseline");

appendTspan(mseText, "MSE", "1.2em", l === 5 ? "rgb(255, 140, 0)" : "black", "baseline");

appendTspan(mseText, "5", "0.8em", l === 5 ? "rgb(255, 140, 0)" : "black", "sub");

// Add the closing part of the text

mseText.append("tspan")

.attr("baseline-shift", "baseline")

.style("font-size", "1.5em")

.text(`)/5 = ${mseValue}`);

};

if(count == 0){

// Create a rectangle for each cell

const cells = svg.selectAll(".cell")

.data(matrixData)

.enter().append("rect")

.attr("class", "cell")

.attr("x", (d, i) => (i % numCols) * cellSize )

.attr("y", (d, i) => Math.floor(i / numCols) * cellSize )

.attr("width", cellSize)

.attr("height", cellSize)

.attr("fill", "steelblue");

// Add text to each cell

const text = svg.selectAll(".text")

.data(matrixData)

.enter().append("text")

.attr("class", "text")

.attr("x", (d, i) => (i % numCols) * cellSize + cellSize / 2-7)

.attr("y", (d, i) => Math.floor(i / numCols) * cellSize + cellSize / 2+7)

.attr("fill", "white")

.text(d => d);

// Add vertical lines between cells

const verticalLines = svg.selectAll(".vertical-line")

.data(d3.range(numCols + 1))

.enter().append("line")

.attr("class", "vertical-line")

.attr("x1", d => d * cellSize )

.attr("y1", 1)

.attr("x2", d => d * cellSize )

.attr("y2", numRows * cellSize)

.attr("stroke", "white")

.attr("stroke-width", 2);

// Add horizontal lines between cells

const horizontalLines = svg.selectAll(".horizontal-line")

.data(d3.range(numRows + 1))

.enter().append("line")

.attr("class", "horizontal-line")

.attr("x1", 0)

.attr("y1", d => d * cellSize )

.attr("x2", numCols * cellSize)

.attr("y2", d => d * cellSize)

.attr("stroke", "white")

.attr("stroke-width", 2);

//Add text at the end

svg.append("text")

.attr("x", 2)

.attr("y", 230)

.attr("fill", "black")

.text("Unpartitioned Data")

}if(count > 0 & count < 6) {

makeMarix(l-1);

};

console.log("Current count:", count);

}

// Update the visualization initially

updateVisualization();

// Set interval to update count every second

const interval = setInterval(() => {

// Increment count

count++;

// If count reaches 6, reset to 0

if (count === 6) {

count = 0;

}

// Update the visualization

updateVisualization();

}, 1000);

return svg.node();

}

chart10 = {

const margin = { top: 20, right: 30, bottom: 50, left: 50 },

width = 800 - margin.left - margin.right,

height = 400 - margin.top - margin.bottom;

// Create an SVG container

const svg = d3.create("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", `translate(${margin.left},${margin.top})`);

// Set up initial data

let data = Array.from({ length: 5 }, (_, i) => ({

index: i,

value: Math.random() * 100

}));

// Set up scales

const x = d3.scaleBand()

.domain(data.map(d => d.index))

.range([0, width])

.padding(0.1);

const y = d3.scaleLinear()

.domain([0, 100])

.range([height, 0]);

// X axis

svg.append("g")

.attr("transform", `translate(0, ${height})`)

.call(d3.axisBottom(x))

.append("text")

.attr("y", 40)

.attr("x", width / 2)

.attr("text-anchor", "middle")

.attr("class", "axis-label")

.text("Index");

// Y axis

svg.append("g")

.call(d3.axisLeft(y))

.append("text")

.attr("y", -40)

.attr("x", -height / 2)

.attr("transform", "rotate(-90)")

.attr("text-anchor", "middle")

.attr("class", "axis-label")

.text("Value");

// Add bars

svg.selectAll(".bar")

.data(data)

.enter()

.append("rect")

.attr("class", "bar")

.attr("x", d => x(d.index))

.attr("y", d => y(d.value))

.attr("width", x.bandwidth())

.attr("height", d => height - y(d.value))

.attr("fill", "steelblue");

// Line generator

const line = d3.line()

.x(d => x(d.index) + x.bandwidth() / 2)

.y(d => y(d.value));

// Add line path

svg.append("path")

.datum(data)

.attr("class", "line")

.attr("d", line)

.attr("fill", "none")

.attr("stroke", "orange")

.attr("stroke-width", 2);

// Update function

function updateChart() {

// Add new data point

data.push({ index: data.length, value: Math.random() * 100 });

// Update scales

x.domain(data.map(d => d.index));

y.domain([0, d3.max(data, d => d.value)]);

// Update X axis

svg.select(".x-axis")

.transition()

.duration(1000)

.call(d3.axisBottom(x));

// Update bars

const bars = svg.selectAll(".bar")

.data(data);

bars.enter()

.append("rect")

.attr("class", "bar")

.attr("x", d => x(d.index))

.attr("y", height) // Start from bottom for animation

.attr("width", x.bandwidth())

.attr("height", 0) // Start with height 0 for animation

.attr("fill", "steelblue")

.merge(bars)

.transition()

.duration(1000)

.attr("x", d => x(d.index))

.attr("y", d => y(d.value))

.attr("height", d => height - y(d.value));

bars.exit().remove();

// Update line path

svg.select(".line")

.datum(data)

.transition()

.duration(1000)

.attr("d", line);

}

// Set interval for dynamic updates

setInterval(updateChart, 2000);

return svg.node();

}

import { require } from "d3-require";

Purpose-built for displays of data