/office-social-distancing

A data visualization prototype - React & D3.js - of what monitoring anonymous employee activity could look like when employees come back to the office.

Primary LanguageJavaScriptMIT LicenseMIT

Office Social Distancing Prototype

Screen Shot 2020-07-10 at 4 22 51 PM

Steps to replicate with a new office floor plan

  1. Download an office floor plan as a SVG - https://www.smartdraw.com/office-floor-plan/examples/cubicle-floor-plan/
  2. Open Adobe Illustrator
    1. Update art board to width: 900 pt and height: 600 pt
    2. Resize the floor plan to fit within the updated art board bounds
    3. Using the pen tool, draw a path throughout the office floor plan
    4. Re-name the path to WayFinding for easily finding in the SVG file
  3. Copy the updated SVG to the /src/assets/data directory
  4. Install svgo to convert shapes to paths
    1. npm install svgo --global
    2. svgo --pretty --config='{"full":true}' --enable=convertShapeToPath src/assets/data/<name-of-file>.svg
  5. Find the WayFinding <path/> in the SVG file and re-name the class name to way__finding so we can find within the code
  6. Update the reference SVG in Visualization/index.js
import { ReactComponent as OfficeFloorPlan } from '../../../assets/data/<name-of-file>.svg';

Installation

Ensure you have yarn or npm installed.

yarn // npm install
yarn start // npm start