Spaces:

dwellnick
/

function-tabulator-and-grapher

Running

App Files Files Community

function-tabulator-and-grapher / index.html

dwellnick

Add 2 files

a3f85c8 verified about 1 year ago

raw

history blame contribute delete

19 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Function Tabulator and Grapher</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.9.0/math.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	:root {
	--primary-color: #4a6bff;
	--secondary-color: #ff6b6b;
	--background-light: #f8f9fa;
	--background-dark: #343a40;
	--text-dark: #212529;
	--text-light: #f8f9fa;
	}

	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	body {
	background-color: var(--background-light);
	color: var(--text-dark);
	line-height: 1.6;
	padding: 20px;
	}

	.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	background-color: white;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	}

	h1 {
	text-align: center;
	margin-bottom: 30px;
	color: var(--primary-color);
	font-weight: 600;
	}

	.input-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
	padding: 20px;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4eff8 100%);
	border-radius: 10px;
	align-items: flex-end;
	}

	.input-group {
	flex: 1;
	min-width: 250px;
	}

	label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--primary-color);
	}

	input, select {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	font-size: 16px;
	transition: all 0.3s;
	}

	input:focus, select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.2);
	}

	button {
	background-color: var(--primary-color);
	color: white;
	border: none;
	padding: 12px 25px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	gap: 8px;
	}

	button:hover {
	background-color: #3a56cc;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(74, 107, 255, 0.3);
	}

	button i {
	font-size: 18px;
	}

	.results {
	display: flex;
	flex-direction: column;
	gap: 30px;
	}

	.table-section, .graph-section {
	background-color: white;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	}

	h2 {
	margin-bottom: 20px;
	color: var(--primary-color);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	h2 i {
	color: var(--secondary-color);
	}

	table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	th, td {
	padding: 12px 15px;
	text-align: center;
	border: 1px solid #e9ecef;
	}

	th {
	background-color: var(--primary-color);
	color: white;
	font-weight: 500;
	}

	tr:nth-child(even) {
	background-color: #f8f9fa;
	}

	tr:hover {
	background-color: #e9ecef;
	}

	.chart-container {
	position: relative;
	height: 500px;
	width: 100%;
	}

	.error-message {
	color: #dc3545;
	font-weight: 500;
	margin-top: 5px;
	display: none;
	}

	.example-functions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
	}

	.example-btn {
	background-color: #e9ecef;
	color: var(--text-dark);
	border: none;
	padding: 8px 15px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s;
	}

	.example-btn:hover {
	background-color: #dee2e6;
	transform: translateY(-1px);
	}

	@media (max-width: 768px) {
	.input-section {
	flex-direction: column;
	}

	.input-group {
	width: 100%;
	}

	.chart-container {
	height: 300px;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Function Tabulator and Grapher</h1>

	<div class="input-section">
	<div class="input-group">
	<label for="function">Function of x (e.g., x^2 + 3*sin(x))</label>
	<input type="text" id="function" placeholder="Enter a function of x">
	<div class="example-functions">
	<small>Examples: </small>
	<button class="example-btn" onclick="insertExample('x^2')">x²</button>
	<button class="example-btn" onclick="insertExample('sin(x)')">sin(x)</button>
	<button class="example-btn" onclick="insertExample('2^x + 3')">2^x+3</button>
	<button class="example-btn" onclick="insertExample('log(x, 2)')">log₂(x)</button>
	</div>
	</div>

	<div class="input-group">
	<label for="start-x">Start X</label>
	<input type="number" id="start-x" value="-5" step="0.1">
	</div>

	<div class="input-group">
	<label for="end-x">End X</label>
	<input type="number" id="end-x" value="5" step="0.1">
	</div>

	<div class="input-group">
	<label for="step">Step Size</label>
	<input type="number" id="step" value="1" min="0.1" step="0.1">
	</div>

	<button onclick="calculate()">
	<i class="fas fa-calculator"></i> Calculate
	</button>
	</div>

	<div class="error-message" id="error-message">
	<i class="fas fa-exclamation-circle"></i> <span id="error-text"></span>
	</div>

	<div class="results">
	<div class="table-section">
	<h2><i class="fas fa-table"></i> Function Table</h2>
	<div id="table-container">
	<p>Enter a function and click "Calculate" to see results.</p>
	</div>
	</div>

	<div class="graph-section">
	<h2><i class="fas fa-chart-line"></i> Function Graph</h2>
	<div class="chart-container">
	<canvas id="function-chart"></canvas>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Global variable for the chart so we can update it later
	let functionChart = null;

	// Function to insert example functions
	function insertExample(func) {
	document.getElementById('function').value = func;
	}

	// Main calculation function
	function calculate() {
	const funcInput = document.getElementById('function').value.trim();
	const startX = parseFloat(document.getElementById('start-x').value);
	const endX = parseFloat(document.getElementById('end-x').value);
	const step = parseFloat(document.getElementById('step').value);

	const errorMessage = document.getElementById('error-message');
	const errorText = document.getElementById('error-text');

	// Reset error message
	errorMessage.style.display = 'none';

	// Validate inputs
	if (!funcInput) {
	errorText.textContent = "Please enter a function.";
	errorMessage.style.display = 'block';
	return;
	}

	if (isNaN(startX) \|\| isNaN(endX) \|\| isNaN(step)) {
	errorText.textContent = "Please enter valid numeric values for all fields.";
	errorMessage.style.display = 'block';
	return;
	}

	if (step <= 0) {
	errorText.textContent = "Step size must be greater than zero.";
	errorMessage.style.display = 'block';
	return;
	}

	if (startX >= endX) {
	errorText.textContent = "Start X must be less than End X.";
	errorMessage.style.display = 'block';
	return;
	}

	try {
	// Try to compile the function to check for syntax errors
	const node = math.compile(funcInput);
	// Test evaluation at x=1 to catch domain errors (like log(0))
	node.evaluate({x: 1});
	} catch (error) {
	errorText.textContent = `Function error: ${error.message}`;
	errorMessage.style.display = 'block';
	return;
	}

	// Generate table and graph if inputs are valid
	generateTable(funcInput, startX, endX, step);
	generateGraph(funcInput, startX, endX, step);
	}

	// Function to generate the table of values
	function generateTable(funcInput, startX, endX, step) {
	const tableContainer = document.getElementById('table-container');
	const table = document.createElement('table');

	// Create table header
	const thead = document.createElement('thead');
	thead.innerHTML = `
	<tr>
	<th>x</th>
	<th>f(x) = ${funcInput}</th>
	</tr>
	`;
	table.appendChild(thead);

	// Create table body
	const tbody = document.createElement('tbody');

	// Calculate values and round to 4 decimal places
	const roundedStep = Math.round(step * 100) / 100; // Avoid floating point precision issues
	let currentX = startX;
	const values = [];

	while (currentX <= endX + 0.0001) { // Add small epsilon to handle floating point
	try {
	// Calculate y value
	const y = math.evaluate(funcInput, {x: currentX});
	values.push({x: currentX, y: y});

	// Create row
	const tr = document.createElement('tr');
	tr.innerHTML = `
	<td>${currentX.toFixed(4)}</td>
	<td>${Number.isFinite(y) ? y.toFixed(4) : 'undefined'}</td>
	`;
	tbody.appendChild(tr);

	// Move to next x value
	currentX = parseFloat((currentX + roundedStep).toFixed(4));
	} catch (error) {
	// Handle evaluation errors (like division by zero)
	const tr = document.createElement('tr');
	tr.innerHTML = `
	<td>${currentX.toFixed(4)}</td>
	<td>undefined</td>
	`;
	tbody.appendChild(tr);
	currentX = parseFloat((currentX + roundedStep).toFixed(4));
	continue;
	}
	}

	table.appendChild(tbody);
	tableContainer.innerHTML = '';
	tableContainer.appendChild(table);
	}

	// Function to generate the graph
	function generateGraph(funcInput, startX, endX, step) {
	const ctx = document.getElementById('function-chart').getContext('2d');

	// Generate smooth curve data
	const smoothStep = (endX - startX) / 500; // Use 500 points for smooth curve
	const smoothX = [];
	const smoothY = [];
	const tabulatedX = [];
	const tabulatedY = [];

	// Calculate smooth curve
	let x = startX;
	while (x <= endX) {
	try {
	const y = math.evaluate(funcInput, {x: x});
	if (Number.isFinite(y)) {
	smoothX.push(x);
	smoothY.push(y);
	}
	} catch (error) {
	// Skip points that can't be evaluated
	}
	x += smoothStep;
	x = parseFloat(x.toFixed(5)); // Avoid floating point accumulation
	}

	// Calculate tabulated points
	const roundedStep = Math.round(step * 100) / 100;
	x = startX;
	while (x <= endX + 0.0001) {
	try {
	const y = math.evaluate(funcInput, {x: x});
	if (Number.isFinite(y)) {
	tabulatedX.push(x);
	tabulatedY.push(y);
	}
	} catch (error) {
	// Skip points that can't be evaluated
	}
	x += roundedStep;
	x = parseFloat(x.toFixed(4)); // Match table precision
	}

	// Destroy previous chart if it exists
	if (functionChart) {
	functionChart.destroy();
	}

	// Create new chart
	functionChart = new Chart(ctx, {
	type: 'line',
	data: {
	datasets: [
	{
	label: `f(x) = ${funcInput}`,
	data: smoothX.map((x, i) => ({x: x, y: smoothY[i]})),
	borderColor: '#4a6bff',
	backgroundColor: 'rgba(74, 107, 255, 0.1)',
	borderWidth: 2,
	pointRadius: 0,
	tension: 0.1,
	fill: false
	},
	{
	label: 'Tabulated Points',
	data: tabulatedX.map((x, i) => ({x: x, y: tabulatedY[i]})),
	borderColor: '#ff6b6b',
	backgroundColor: '#ff6b6b',
	borderWidth: 2,
	pointRadius: 5,
	showLine: false
	}
	]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	x: {
	type: 'linear',
	position: 'center',
	title: {
	display: true,
	text: 'x',
	font: {
	weight: 'bold'
	}
	},
	grid: {
	color: 'rgba(0, 0, 0, 0.05)'
	}
	},
	y: {
	type: 'linear',
	position: 'left',
	title: {
	display: true,
	text: 'f(x)',
	font: {
	weight: 'bold'
	}
	},
	grid: {
	color: 'rgba(0, 0, 0, 0.05)'
	}
	}
	},
	plugins: {
	legend: {
	position: 'top',
	labels: {
	usePointStyle: true,
	padding: 20
	}
	},
	tooltip: {
	callbacks: {
	label: function(context) {
	let label = context.dataset.label \|\| '';
	if (label) {
	label += ': ';
	}
	if (context.parsed.y !== null) {
	label += `(${context.parsed.x.toFixed(4)}, ${context.parsed.y.toFixed(4)})`;
	}
	return label;
	}
	}
	}
	},
	interaction: {
	intersect: false,
	mode: 'index'
	}
	}
	});
	}
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
	</html>