Systematic Graphic Generator

Live Demo

##Animation generated by server data

How can data be visualized? With the enormous amount of information available online, it must be processed visually to be better understood. Most of this information is stored in databases as strings and numbers in objects. How might these strings be be manipulated into visual information? Through injecting them into the React render as styles.

This project is a kernel of a generative graphic platform to visualize data, such as weather patterns, or home energy consumption over a billing period.

In it's current iteration it's a platform of experimentation to explore the manipulation of strings and numbers into visualizations through firebase data.

#Process

MVP

Animation generated by server data

TECH

• React
• Firebase
• CSS Animation

STEPS

Phase 1 - Achieve MVP

• set up working environment
• create CSS animated react element
• set animation specifications as inline styled props
• pass in props from Firebase FUNCTIONALITY ACHIEVED

Phase 2 - Modifying React Element

• create functions that modify behavior of element
• behaviors will be saved in the state of element
• state of element can be saved to Firebase
• element can be re-loaded to page
• element can be deleted from server FUNCTIONALITY ACHIEVED

Phase 4 - GUI

• create buttons that trigger modification functions
• create buttons that trigger creation of element on server
• create buttons that trigger destruction of element on server
• create buttons that trigger save state of component on server
• amount of elements will be capped by CPU performance FUNCTIONALITY ACHIEVED

Phase 5 - User Login to Save Elements

• user can save their project
• user can have library of multiple projects
• user can share project as public web page via FB or TW

BONUS

Synesthesia Sound Visualizer This project will blend sound and vision to help users gain an understanding of the condition of synesthesia.

• set timescale of elements for sense of composition
• set sound for each element

Weather Visualizer This project will animate the condition of weather throughout the day. This will help people understand not only what the current condition is, but also how the weather will develop throughout the day.

• animation of weather throughout day
• generate 12 second animation. Each second will reflect an hour of the day
• animations will blend together to give sense of time