The site can be visited at :
Graphlite is a web app designed for simple data visualization, inspired by Chartio. It was planned, implemented, and completed on a strict two week schedule. Graphlite was written by Daniel Pages.
-Users can upload datasets and view them using a variety of graphs, such as line graphs, bar graphs, pie charts, and many more.
-Users can modify parameters of the graph, such as scaling, sorting, and data sources, and view the changes to the graph in real time
-Users can save graphs for later viewing
-Supports CSV, JSON, and TSV data files
-Generates datasets from daily stock prices using an external API call
Users can upload datasets and view them using a variety of graphs. These graphs can be customized in real time using simple drop-down menus and tools.
Multiple aspects of the dataset can be plotted simultaneously using different types of graph (bar, line, area).
Users can scale and sort the data, and then save all parameters of a graph. A simple button press will reload previously saved graph parameters from the database and re-render the graph as it was before.
Users can upload their personal datasets using a simple drag-and-drop interface or auto-generate datasets with code that uses an external API call under the hood. Either way, the stored datasets are populated into a list and users can click on any dataset to visualize it and create graphs using that dataset.
Graphlite uses ruby on rails as its backend to store and retrieve data from a postgreSQL database. The API of the backend uses RESTful routes to serve data. Because all of the HTML is generated by the frontend, rails only serves JSON.
The frontend of the site uses Javascript with a react/redux framework. This is particularly advantageous for the primary data visualization functionality of this site, as redux allows a graph to be simply and elegantly updated in real time when the user interacts with the interface elements of the page to change the graph's parameters.
Example: the DatasetShow component is subscribed to the selectedGraph part of the redux state...
const mapStateToProps = state => ({
selectedGraph: selectedGraph(state)
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(DatasetShow);The GraphForm component is also subscribed and also has a localUpdate method that updates the store (without doing anything to the database)...
const mapStateToProps = state => ({
selectedGraph: selectedGraph(state)
});
const mapDispatchToProps = dispatch => ({
localUpdate: (graph) => dispatch(receiveSingleGraph(graph))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(GraphForm);This means that we can use the drop-down menus and toggle buttons in the GraphForm to update the DatasetShow in real time using the following code.
setScale(event){
this.props.localUpdate({scaled: event.target.value});
}<select value={this.props.selectedGraph.scaled} onChange={this.setScale.bind(this)}>
<option value="default">Default</option>
<option value="log">Log</option>
<option value="range">Range</option>
</select>The graphs themselves are rendered using the graphing libraries Recharts and VictoryCharts. The PapaParse parsing library is used to aid in JSON parsing. Furthermore, reactDND is used to manage the drag-and-drop interface for data file uploading.
-Currently, the app is only compatible with Chrome, Safari, Firefox, and Opera. Compatibility with Internet Explorer and Microsoft Edge browsers is a future plan.
-Additional external API calls could be made for a wider variety of data (weather, currency exchange rates, astronomical phenomenon, etc)
-Styling improvements for VictoryCharts based charts (scatter, voronoi, and pie charts)