https://github.com/dianaow/star-wars-viz

A simple implementation of a scatter plot built with React + D3 (Typescript)
https://github.com/dianaow/star-wars-viz

d3js d3v4 data-visualization reactjs star-wars star-wars-api typescript

Last synced: about 2 months ago
JSON representation

A simple implementation of a scatter plot built with React + D3 (Typescript)

• Host: GitHub
• URL: https://github.com/dianaow/star-wars-viz
• Owner: dianaow
• Created: 2020-06-27T10:31:08.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T21:54:54.000Z (over 3 years ago)
• Last Synced: 2025-03-06T00:17:35.966Z (over 1 year ago)
• Topics: d3js, d3v4, data-visualization, reactjs, star-wars, star-wars-api, typescript
• Language: TypeScript
• Homepage:
• Size: 8.82 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Star Wars Data Visualization

## [Live Demo](http://star-wars-viz.s3-website-ap-southeast-1.amazonaws.com/)

An interactive scatter plot built with React, D3v4 and Typescript.

Features:

 - Data extracted from [swapi API](https://swapi.dev/)

 - Dropdown to pick a species from the list of existing ones.

 - Scatter plot points have a tooltip which shows on mouse hover and hides on mouse out.

![alt text](https://github.com/dianaow/star-wars-viz/raw/master/demo.gif "Demo")

Tag versions:

 - v1.0: Barebones workable interactive scatter plot with javascript

 - v2.0: Barebones workable interactive scatter plot with typescript

 - v3:0: Sylized UI and scatter plot

## Getting started 

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.


You will also see any lint errors in the console.

### `yarn build`

Builds the app for production to the `build` folder.


It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.


Your app is ready to be deployed!