Earth History Visualization

Overview

Pr

blem

The Time Scale Creator software for geologists needs to be made more publicly accessible, enabling users to plot and view regional geological data based on specified time periods and import data packages.

My Role

Front End Developer

Solution

Enhance the Time Scale Creator Online web application with a user-friendly interface that incorporates all necessary features, enabling users to create and modify charts and maps for a deeper understanding of Earth's geologic history.

Scope

January 2024 - Present

Team: 8 members

Overview

Pr

blem

Solution

My Role

Front End Developer

Scope

January 2024 - Present

Team: 8 members

Context

There exists an JAVA program called Time Scale Creator, which allows geologists to plot and view data based on certain parameters such as time periods and import each region’s specific data package. The purpose of our team is to translate the JAVA program into a website. This involves creating website specific elements through React and Typescript while also following the rules set by the JAVA program.

As a newcomer to the project, one of the challenges I faced was understanding how all the different aspects of the website work and interact together.

Component screenshots from the Time Scale Creator Java program. These are the menu's that allow the user to customize the style of text in their chart generation.

Font options menu made in React. Putting this together involved doing research to find the best libraries that could fufill certain needs such as the color picker.

Design Process

On this team of VIP, the design process of creating an aspect of the website starts with a specification, or a spec for short. A spec (functional specification) is a detailed document that outlines the design, functionality, and requirements of a software program. Its purpose is to facilitate thorough design, serve as a communication tool, guide project scheduling, and ensure everyone understands how the program should work, ultimately saving time and preventing errors.

Below is the spec I created before putting the about page into code. I found creating this to be helpful in portraying my vision and getting feedback from the team.

About Page

Example Code for About Page

type AboutCardProps = {
  name: string;
  role: string;
  homeTown: string;
  timeWorked: string;
  proPic: string | undefined;
};
export const AboutCard = ({ name, role, homeTown, timeWorked, proPic = defaultProPic }: AboutCardProps) => {
  return (
    <Card
      sx={{
        minWidth: 330,
        marginLeft: ".5vw",
        marginRight: ".5vw",
        marginTop: ".5vw",
        marginBottom: ".5vw"
      }}>
      <CardMedia sx={{ height: 250 }} image={proPic} title={name} />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {name}
        </Typography>
        <Typography variant="body1" color="text.secondary">
          {role}
        </Typography>
        <Typography variant="body1" color="text.secondary">
          {homeTown}
        </Typography>
        <Typography variant="body1" color="text.secondary">
          {timeWorked}
        </Typography>
      </CardContent>
    </Card>
  );
};

<div
    style={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        alignSelf: "center",
        width: "90%",
        flexWrap: "wrap"
    }}>
    {members.map(function (member) {
        return (
            <AboutCard
                key={member.name}
                name={member.name}
                role={member.role}
                homeTown={member.homeTown}
                timeWorked={member.timeWorked}
                proPic={member.proPic}
            />
        );
    })}
</div>

Typescript

This project was my first experience working with TypeScript. Since I was already very familiar with JavaScript when I joined the project, picking up TypeScript wasn't too challenging. Using TypeScript almost exclusively since starting this project, I've come to appreciate the clarity provided by types, rather than viewing them as extra work.

Putting it all Together

After working on the specification and receiving feedback from the team, I began developing the card component and subsequently the about page. The code for the card component, which accepts customizable props, is shown above. We use this component to map an array containing all the team members' data. Below, you can see the final product.

About Page. Using component mapping and an array to store the data makes this page easy to expand.