React D3js new and ongoing projects
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We're looking for a developer (possibly more than one) to work with our our small all-remote team for ongoing development.

We primarily work in React for the front-end and MongoDB with Realm for microservice-only backend development.

We are particularly looking for interactive visualization. Our actual application will interface via webhooks to our AWS hosted backend. This post is intended as a simple challenge to show off your skills. We're looking for a React app that can interactively select and display data from a public Covid dataset. https://ourworldindata.org/ or https://coronavirus.jhu.edu/data or possibly a CDC dataset would be acceptable or use more than one if you prefer. If you can access a live dataset or preload into Mongo, that would be a plus.

We'd like to see the visualizations update smoothly and interactively with D3js or some derivative graphics library. Selections should be by location, interactive range of dates, possibly multiple U.S. states or multiple countries, criteria such as deaths, cases, hospitalizations, and especially vaccination data.

We really like simple, elegant code that uses features from ES6 to ES20. I'm also a huge fan of functional programming and no callbacks. Hooks rule.

This is purely for demonstration. Afterward the code is yours to use as you wish, but we may want you to re-use some of it in a real app. If you are not interested in possibly doing ongoing work with our team on an ongoing part- or full-time work with our team, please don't submit.

Crowdsource coding tasks.

2 Solutions


Placeholder

This is a placeholder for my solution.

Updates forthcoming.

Winning solution

Copying my solution from the other bounty per billsouthworth's comment.


Full code available here. For demo purposes I just did everything in the same file and dumped the networking code in the component (which is just a POST to google.com).

import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import {
  StyleSheet, Text, View, SafeAreaView, ScrollView, Alert, Button,
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

const QRWrapper = (props) => (
  <QRCodeScanner onRead={(e) => props.callback(e.data)} />
);

const AppBody = () => {
  const [response, setResponse] = useState(null); // fake API response
  const [code, setCode] = useState(null); // qr code

  useEffect(() => {
    const fetchData = async () => {
      if (!code) return;

      fetch('https://google.com/', { // using a random url as an example
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(code),
      })
        .then((response) => response.text()) // .then(response => response.json())
        .then(setResponse)
        .catch((error) => {
          Alert.alert('Error Loading Data', error.message);
        });
    };

    fetchData();
  }, [code]);

  // Show QR code scanner if no code data
  if (!code) {
    return (
      <View style={styles.container}>
        <Text style={styles.prompt}>Scan a QR code.</Text>
        <QRWrapper callback={setCode} />
      </View>
    );
  }

  // Show loading indicator if waiting for response
  if (!response) {
    return (
      <Text style={styles.prompt}>Loading...</Text>
    );
  }

  // Show response data
  return (
    <View>
      <Button onPress={(_) => setCode(null)} title="Scan Again" />
      <ScrollView>
        <Text style={styles.code}>{response}</Text>
      </ScrollView>
    </View>
  );
};

const App = () => (
  <SafeAreaView style={styles.container}>
      <AppBody />
    <StatusBar style="auto" />
  </SafeAreaView>
);

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  prompt: {
    fontSize: 14,
    marginTop: 14,
    marginBottom: 14,
  },
  code: {
    padding: 10,
    backgroundColor: '#ccc',
    fontFamily: 'Menlo', // NOTE: this font is ios specific
  },
});
View Timeline