View demo version
This project was bootstrapped with Create React App.
Tag cloud app which takes a json file, and other parameters to show a word cloud which is interactive, showing more metadata when words are selected.
The Tag Cloud takes parameters as props
- title: A string
- data: JSON object - see
src/json/topics.json
for format. - sortType: A string, either 'pyramid' or 'shuffle'. Defaults to 'shuffle'.
- customSort: A function taking a one dimensional array.
- detailsAreas: JSON object with labels and string representing how to access values from data object
- legendDetails: JSON object representing a lengend of the tags colour coding.
Node
- 9.3.0 tested; you may find other versions workNPM
- 5.5.1 tested; you may find other versions work- or alternatively
Yarn
.
- Clone this repository
- run
npm install
(if you get errors on Windows you may need to trynpm install --force
)
This will build the app for production into the build
folder.
On a succesfull build you will find instruction on how to serve locally
Runs the app in the development mode.
Open 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.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Built app is targeted using Browserslist to allow Babel and PostCSS to attempt to build correctly for
> 1%
last 4 versions
Chrome > 62
Safari > 11
Edge > 40
Firefox > 57
IE 11
Note that for IE11 support some Polyfills and specific css rules have been used. These are all commented in the code because it might not be obvious why they are there.
A workaround for iOS devices implementation of viewport units, in particlar VH needs to be considered and implemented. Perhaps something like the 'vh-check' module which was tried but was buggy.
Currently this app is lacking good test coverage because I don't have much experience with these and this project also had a tight intital turnaround time, please feel free to lend a hand.