Communication Infographic

A full-stack app, which is a rework of my Dissertation in the History of Communication. With a React front-end running an Express server loading data stored as JSON.

Details

Timeframe

14 days

Technologies Used

React
Webpack
Express
Ajax
JavaScript (ES6)
HTML5
Bulma (CSS framework)
SCSS
GitHub
React Select

App Overview

This project was first created in 2016 as my BA(Hons) Graphic Design dissertation. It's an interactive Infographic which covers the History of Communication. I really wanted to push the boundaries of what was possible within designing my dissertation, not wanting to settle for an essay format.

I relished this opportunity to push my design skills and moulded the constraints of the brief so that I was able to create my first website from the information of my dissertation in a creative and unusual way, which actually enhanced the experience of engaging with the essay.

This project was created with Adobe Muse and was created to be viewed on large desktop screens, the live project can be viewed here

The application is deployed via Git on Heroku and can be found here: Communication Timeline Infographic

Development Process

To get myself started with few distractions I worked on a JS, Pug & Express app at first, once the functionality was tested I then migrated my work and adapted my functions to a React app, allowing me greater scope to build onto the project in the future.

Server Side

As the basis of the site was my dissertation I wanted a clean way to handle such a lage amount of data, so chose to convert the essay into JSON, which would be retrieved with Express, and loaded onto my React front end.

getData() {
    axios.get('api/data')
      .then(res => {
        this.yAxis(res.data)
      })
      .then(() => console.log(this.state.timeline))
      .catch(err => console.error(err))
  }

Y Axis

To place the items along the timeline on the y-axis I created a function.

yAxis(data) {
    const y = 10
    const timeline = data.data.map(item => {
      const yAxis = (item.year - 1425) * y
      return { ...item, yAxis }
    })
    this.setState({ timeline })
    this.xAxis()
  }

This function first sets a base value of 10, so 1 year is exquivalent of 10px.

It then maps over the data to read the year value within each item object. It uses this value to subtract 1425, this is for visual purposes as the timeline starts at the year 1440, so removes the inital white space. It then takes the value and times it by the base value set for the pixels, so that value can be used to transform the object to 'z'px on the y-axis.

It then sets the data back to state, with a new key of yAxis and the value created.

X Axis

The X-Axis function is a little more complex as it is not constant.

Main Function

xAxis() {
    const timeline = this.state.timeline.map((item, i) => {
      const xAxis = this.randomNumber()
      return { ...item, xAxis }
    })
    this.setState({ timeline })
    this.overlapCheck()
  }

The main function maps over the data set to state, it then creates a random number and sets the data back to state with the new key and value for xAxis.

Random Number

randomNumber() {
    const width = document.getElementById('timeline').offsetWidth
    // MAKE A RANDOM VALUE WHICH IS HALF OF TIMELINE WIDTH
    let randomValue = Math.round(Math.random() * (width / 2) - 1)
    // RANDOMLY MAKE THE VALUE POSITIVE OR NEGATIVE
    randomValue = randomValue * this.posOrNeg()
    return randomValue
  }

The logic behind placing items on the x-axis is that the items are centered within the viewport, so to scatter them I first find a random number which is half of the timeline container width. I then randomly make this number positive or negative to offset the items to the left or right of the centre.

This randomly generated value is set to the xAxis variable and set to state.

Functionality

The site utalises interative features to engage the audience.

A roll over affect allows the user to clearly point mark out an individual item using scale and colour to define it.

Each item can be clicked on, which will open up a modal window. The modal contains more information about each item, which is present in the JSON data and is being loaded.

The timeline starts at 1440, which was chosen as it was the year the printing press was invented, and spans across a few centuries, until it covers modern day communication techniques used today, to about 2010.

Challenges & Achievements

The no overlap functionn.

The Y axis function.

Future enhancements

Working on the overlap check function
Adding more data to the timeline lines, such as: images, Wikipedialinks
Add to the functionality of the site
- Create a search feature
- Create a timeline navigation to 'jump' to a specific century
- Add more visual enhancements
- Make a database which can be added to, edited or deleted from
- Add a current year display, based on cursors position on the y-axis

Sammii-HK / communication-infographic