Archina/bees.html

## bees.html
<html>
    <head>
        <title>Bienentherme Graphen</title>
        <script src="snap.svg-min.js"></script>
        <script>
            const TEMP_RANGE_MAX = 90
            const HUMIDITY_MAX = 100
            const ACTIVITY_MAX = 50000

            const dataA = Array.from(new Array(48)).map(x => ({
                temp: (Math.random() * 90) - 30,
                humidity: (Math.random() * 100),
                activity: (Math.random()*50000)
            }));

            console.warn(dataA);

            const pathTemp = dataA
                .map((x, idx, arr) => ({
                    x: idx*50,
                    y: (x.temp+30)/TEMP_RANGE_MAX*1000,
                    val: x.temp,
                    node: idx === 0 ? 'M' : 'L'
                }))
                .map(ele => `${ele.node}${ele.x.toFixed(0)} ${ele.y.toFixed(2)}`)
                .join(' ');

            const pathHumidity = dataA
                .map((x, idx, arr) => ({
                    x: idx*50,
                    y: x.humidity/HUMIDITY_MAX*1000,
                    val: x.humidity,
                    node: idx === 0 ? 'M' : 'L'
                }))
                .map(ele => `${ele.node}${ele.x.toFixed(0)} ${ele.y.toFixed(2)}`)
                .join(' ');

            const pathActivity = dataA
                .map((x, idx, arr) => ({
                    x: idx*50,
                    y: x.activity/ACTIVITY_MAX*1000,
                    val: x.activity,
                    node: idx === 0 ? 'M' : 'L'
                }))
                .map(ele => `${ele.node}${ele.x.toFixed(0)} ${ele.y.toFixed(2)}`)
                .join(' ');


        </script>
    </head>
    <body>
        <section>
            <svg id="graphA" viewBox="0 0 2400 1000">
            </svg>
            <script>
                (function() {
                    var snap = Snap('svg#graphA');

                    const MAX_WIDTH = 2400
                    const MAX_HEIGHT = 1000

                    snap.path(pathTemp).attr({
                        fill: 'none',
                        strokeWidth: 5,
                        stroke: 'red'
                    })
                    snap.path(pathHumidity).attr({
                        fill: 'none',
                        strokeWidth: 5,
                        stroke: 'blue'
                    })
                    snap.path(pathActivity).attr({
                        fill: 'none',
                        strokeWidth: 5,
                        stroke: 'lightgreen'
                    })

                    makeHorizontalGrid = (min,max, color, resolution, unit) => {
                        const range = max - min;

                        var values = Array.from(new Array(resolution+1)).map((v, idx) => idx / resolution);
                        console.warn(values)

                        values.forEach(val => snap.path(`M0 ${val*MAX_HEIGHT} L ${MAX_WIDTH} ${val*MAX_HEIGHT}`).attr({
                            fill: 'none',
                            stroke: '#0002',
                            strokeWidth: 1
                        }));
                    }

                    makeVerticalGrid = (min,max, color, resolution, unit) => {
                        const range = max - min;

                        var values = Array.from(new Array(resolution+1)).map((v, idx) => idx / resolution);
                        console.warn(values)

                        values.forEach(val => snap.path(`M${val*MAX_WIDTH} 0 L ${val*MAX_WIDTH} ${MAX_HEIGHT}`).attr({
                            fill: 'none',
                            stroke: '#0002',
                            strokeWidth: 1
                        }));
                    }

                    makeHorizontalGrid(-30, 90, 'red', 30, 'C');
                    makeVerticalGrid(0, 24, 'black', 24, 'h');
                })();
            </script>
        </section>
    </body>
</html>
	<html>
	<head>
	<title>Bienentherme Graphen</title>
	<script src="snap.svg-min.js"></script>
	<script>
	const TEMP_RANGE_MAX = 90
	const HUMIDITY_MAX = 100
	const ACTIVITY_MAX = 50000

	const dataA = Array.from(new Array(48)).map(x => ({
	temp: (Math.random() * 90) - 30,
	humidity: (Math.random() * 100),
	activity: (Math.random()*50000)
	}));

	console.warn(dataA);

	const pathTemp = dataA
	.map((x, idx, arr) => ({
	x: idx*50,
	y: (x.temp+30)/TEMP_RANGE_MAX*1000,
	val: x.temp,
	node: idx === 0 ? 'M' : 'L'
	}))
	.map(ele => `${ele.node}${ele.x.toFixed(0)} ${ele.y.toFixed(2)}`)
	.join(' ');

	const pathHumidity = dataA
	.map((x, idx, arr) => ({
	x: idx*50,
	y: x.humidity/HUMIDITY_MAX*1000,
	val: x.humidity,
	node: idx === 0 ? 'M' : 'L'
	}))
	.map(ele => `${ele.node}${ele.x.toFixed(0)} ${ele.y.toFixed(2)}`)
	.join(' ');

	const pathActivity = dataA
	.map((x, idx, arr) => ({
	x: idx*50,
	y: x.activity/ACTIVITY_MAX*1000,
	val: x.activity,
	node: idx === 0 ? 'M' : 'L'
	}))
	.map(ele => `${ele.node}${ele.x.toFixed(0)} ${ele.y.toFixed(2)}`)
	.join(' ');


	</script>
	</head>
	<body>
	<section>
	<svg id="graphA" viewBox="0 0 2400 1000">
	</svg>
	<script>
	(function() {
	var snap = Snap('svg#graphA');

	const MAX_WIDTH = 2400
	const MAX_HEIGHT = 1000

	snap.path(pathTemp).attr({
	fill: 'none',
	strokeWidth: 5,
	stroke: 'red'
	})
	snap.path(pathHumidity).attr({
	fill: 'none',
	strokeWidth: 5,
	stroke: 'blue'
	})
	snap.path(pathActivity).attr({
	fill: 'none',
	strokeWidth: 5,
	stroke: 'lightgreen'
	})

	makeHorizontalGrid = (min,max, color, resolution, unit) => {
	const range = max - min;

	var values = Array.from(new Array(resolution+1)).map((v, idx) => idx / resolution);
	console.warn(values)

	values.forEach(val => snap.path(`M0 ${valMAX_HEIGHT} L ${MAX_WIDTH} ${valMAX_HEIGHT}`).attr({
	fill: 'none',
	stroke: '#0002',
	strokeWidth: 1
	}));
	}

	makeVerticalGrid = (min,max, color, resolution, unit) => {
	const range = max - min;

	var values = Array.from(new Array(resolution+1)).map((v, idx) => idx / resolution);
	console.warn(values)

	values.forEach(val => snap.path(`M${valMAX_WIDTH} 0 L ${valMAX_WIDTH} ${MAX_HEIGHT}`).attr({
	fill: 'none',
	stroke: '#0002',
	strokeWidth: 1
	}));
	}

	makeHorizontalGrid(-30, 90, 'red', 30, 'C');
	makeVerticalGrid(0, 24, 'black', 24, 'h');
	})();
	</script>
	</section>
	</body>
	</html>