JoBerkner’s gists

JoBerkner / Button.js

Created July 31, 2020 05:20

code of a button component

	import React from "react";
	import { View, Text, StyleSheet, TouchableOpacity, Animated } from "react-native";

	const Button = props => {
	return (
	<Animated.View style={props.buttonStyle}>
	<TouchableOpacity onPress={props.onPress}>
	<Text style={styles.text}>{props.text}</Text>
	</TouchableOpacity>
	</Animated.View>

JoBerkner / panGesture.js

Created July 31, 2020 05:03

callback functions for the pan gesture handler

	const panStateHandler = event => {
	if (event.nativeEvent.oldState === State.UNDETERMINED) {
	setLastTranslateX(translateX);
	setLastTranslateY(translateY);
	};
	};

	const panGestureHandler = event => {
	setTranslateX(-event.nativeEvent.translationX / scale + lastTranslateX);
	setTranslateY(-event.nativeEvent.translationY / scale + lastTranslateY);

JoBerkner / CBGestureHandlers.js

Created July 31, 2020 04:33

Callbacks for the geesture handlers

	const pinchStateHandler = event => {
	if (event.nativeEvent.oldState === State.UNDETERMINED) {
	setLastScaleOffset(-1 + scale);
	};
	};

	const pinchGestureHandler = event => {
	if (event.nativeEvent.scale + lastScaleOffset >= 1 && event.nativeEvent.scale + lastScaleOffset <= 5) {
	setPrevScale(scale);
	setScale(event.nativeEvent.scale + lastScaleOffset);

JoBerkner / GestureHandlers.js

Last active July 31, 2020 04:11

Gesture handlers inside return statement for panning and pinch-zooming

	return (
	<View style={styles.container}>
	<PanGestureHandler
	onGestureEvent={(e) => panGestureHandler(e)}
	onHandlerStateChange={(e) => panStateHandler(e)}
	>
	<PinchGestureHandler
	onGestureEvent={(e) => pinchGestureHandler(e)}
	onHandlerStateChange={(e) => pinchStateHandler(e)}
	>

JoBerkner / useEffect.js

Last active July 23, 2020 04:38

useEffect hook to create SVG paths for each country

	useEffect(() => {
	setCountryList(
	countryPaths.map((path, i) => {
	const curCountry = COUNTRIES[i].properties.name;

	const isCountryNameInData = data.some(country => country.name === curCountry);

	const curCountryData = isCountryNameInData
	? data.find(country => country.name === curCountry)["data"]
	: null;

JoBerkner / dataManipulation.js

Last active July 23, 2020 02:30

manipulating the data for the visualization

	//Data Manipulation
	const covidData = useMemo(() => {
	const countriesAsArray = Object.keys(covidData_raw).map((country) => ({
	name: country,
	data: covidData_raw[country]
	}));

	const windowSize = 7;

	const countriesWithAvg = countriesAsArray.map(country => ({

JoBerkner / movingAverage.js

Created July 23, 2020 02:07

Calculating moving average

	export default (data, windowSize) => {
	newData = [];
	for (var i = windowSize - 1; i < data.length; i++) {
	const averages = {};
	for (stat of ["confirmed", "deaths"]) {
	const curWindowData = data.slice(i - windowSize + 1, i + 1);
	const average = curWindowData.reduce((acc, cur) => cur[stat] + acc, 0) / windowSize;
	const keyName = "avg_" + stat;
	averages[keyName] = Math.round(average);
	}

JoBerkner / index.html

Last active November 29, 2018 04:47

Hold + Tap for d3 v5 using touchpad (still with errors)

	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="http://d3js.org/d3.v5.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>
	<body>
	<style>
	#svg-div {
	position: absolute;