hermionewy / 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.

Office Social Distancing Prototype

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