Eroui · October 14, 2024 23:12
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <title>Plotly Arrow Plot</title>
 </head>
 <body>

 <div id="myPlot" style="width:100%;max-width:700px"></div>

 <script>
    // Your data stream with 5 elements: date, tx, ty, hx, hy
    const dt = 10;
    let data = [
    	{date: 0, angle: 45, value: 0.915},
    	{date: 10, angle: 90, value: 0.210},
    	{date: 20, angle: 170, value: 0.314},
    	{date: 30, angle: 270, value: 0.100},
    	{date: 40, angle: 300, value: 0.907},
    	{date: 50, angle: 10, value: 0.411},
    ];
    
    const max = 0.915;
    const min = 0.100;
    const defaulty = 10;
    
    

    const annotations = data.map(e => {
    	let length = 1 + (dt-1) * (e.value - min) / (max - min) ;
        let hlength = length / 2;
        let rad = Math.PI * e.angle / 180;
        let a = Math.cos(rad) * hlength;
        let b = Math.sin(rad) * hlength;
    	return {
        	x: e.date + a,
            y: defaulty + b,
            ax: e.date - a,
            ay: defaulty - b,
            xref: 'x',
            yref: 'y',
            axref: 'x',
            ayref: 'y',
            showarrow: true,
            arrowhead: 3,
            arrowsize: 1,
            arrowwidth: 2,
            arrowcolor: 'red'
        }
    })


    // Extract data for plotting
    const dates = data.map(d => d.date);
    const ty = data.map(d => 10);

    // Create scatter trace for the tail points (tx, ty)
    const trace1 = {
        x: dates,
        y: ty,
        mode: 'markers',
        marker: { size: 0, color: 'blue' },
        name: 'Tail Points',
        type: 'scatter'
    };

    const layout = {
        title: 'Arrows Scatter Plot',
        xaxis: { title: 'Date' },
        yaxis: { title: 'Values' },
        annotations: annotations
    };

    Plotly.newPlot('myPlot', [trace1], layout);
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<title>Plotly Arrow Plot</title>
	</head>
	<body>

	<div id="myPlot" style="width:100%;max-width:700px"></div>

	<script>
	// Your data stream with 5 elements: date, tx, ty, hx, hy
	const dt = 10;
	let data = [
	{date: 0, angle: 45, value: 0.915},
	{date: 10, angle: 90, value: 0.210},
	{date: 20, angle: 170, value: 0.314},
	{date: 30, angle: 270, value: 0.100},
	{date: 40, angle: 300, value: 0.907},
	{date: 50, angle: 10, value: 0.411},
	];

	const max = 0.915;
	const min = 0.100;
	const defaulty = 10;



	const annotations = data.map(e => {
	let length = 1 + (dt-1) * (e.value - min) / (max - min) ;
	let hlength = length / 2;
	let rad = Math.PI * e.angle / 180;
	let a = Math.cos(rad) * hlength;
	let b = Math.sin(rad) * hlength;
	return {
	x: e.date + a,
	y: defaulty + b,
	ax: e.date - a,
	ay: defaulty - b,
	xref: 'x',
	yref: 'y',
	axref: 'x',
	ayref: 'y',
	showarrow: true,
	arrowhead: 3,
	arrowsize: 1,
	arrowwidth: 2,
	arrowcolor: 'red'
	}
	})


	// Extract data for plotting
	const dates = data.map(d => d.date);
	const ty = data.map(d => 10);

	// Create scatter trace for the tail points (tx, ty)
	const trace1 = {
	x: dates,
	y: ty,
	mode: 'markers',
	marker: { size: 0, color: 'blue' },
	name: 'Tail Points',
	type: 'scatter'
	};

	const layout = {
	title: 'Arrows Scatter Plot',
	xaxis: { title: 'Date' },
	yaxis: { title: 'Values' },
	annotations: annotations
	};

	Plotly.newPlot('myPlot', [trace1], layout);
	</script>

	</body>
	</html>