Scribd
Upload
4 views3 pages

Fractal and Power Law Visualization

The document is a React component that visualizes fractal patterns and power law scaling using line charts. It generates fractal data at different scales and power law data, displaying them in separate cards with charts. The component utilizes the Recharts library for rendering the charts and includes tooltips for better data interpretation.

Uploaded by

ajaytharsancomputerscience
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

Fractal and Power Law Visualization

The document is a React component that visualizes fractal patterns and power law scaling using line charts. It generates fractal data at different scales and power law data, displaying them in separate cards with charts. The component utilizes the Recharts library for rendering the charts and includes tooltips for better data interpretation.

Uploaded by

ajaytharsancomputerscience
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

import React from 'react';

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

const ScaleInvarianceVisualization = () => {

// Generate fractal data at different scales

const generateFractalData = (scale, points = 200) => {

return [Link]({ length: points }, (_, i) => {

const x = i / (points - 1);

let y = 0;

// Sum multiple sine waves at different scales

for (let j = 1; j <= scale; j++) {

y += [Link](2 * [Link] * x * [Link](2, j)) / [Link](2, j);

return { x, y };

});

};

// Generate power law data

const generatePowerLawData = (points = 100) => {

return [Link]({ length: points }, (_, i) => {

const x = [Link](i / 20);

const y = [Link](x, -0.7) * (1 + 0.1 * ([Link]() - 0.5));

return { x, y };

});

};

return (

<div className="w-full max-w-6xl p-4">

<div className="grid grid-cols-2 gap-4 mb-4">

<Card>
<CardHeader>

<CardTitle>Fractal Pattern at Different Scales</CardTitle>

</CardHeader>

<CardContent>

<LineChart width={400} height={300} data={generateFractalData(3)}>

<CartesianGrid strokeDasharray="3 3" />

<XAxis label={{ value: 'Position', position: 'bottom' }} />

<YAxis label={{ value: 'Amplitude', angle: -90, position: 'left' }} />

<Tooltip />

<Line type="monotone" dataKey="y" stroke="#8884d8" dot={false} />

</LineChart>

</CardContent>

</Card>

<Card>

<CardHeader>

<CardTitle>Power Law Scaling</CardTitle>

</CardHeader>

<CardContent>

<LineChart

width={400}

height={300}

data={generatePowerLawData()}

scale="log"

>

<CartesianGrid strokeDasharray="3 3" />

<XAxis

dataKey="x"

scale="log"

domain={['auto', 'auto']}

label={{ value: 'Scale', position: 'bottom' }}


/>

<YAxis

scale="log"

domain={['auto', 'auto']}

label={{ value: 'Intensity', angle: -90, position: 'left' }}

/>

<Tooltip />

<Line type="monotone" dataKey="y" stroke="#82ca9d" dot={false} />

</LineChart>

</CardContent>

</Card>

</div>

</div>

);

};

export default ScaleInvarianceVisualization;

You might also like