hgraph-os / Hgraph
Licence: apache-2.0
hGraph is an open source javascript library for visualizing health data.
Stars: ✭ 273
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Hgraph
Rox
🌍 BeWelcome lets you share a place to stay, connect with travellers, meet up and find accommodation on your journey. It is and will always be a free, open source, non for profit, democratic community.
Stars: ✭ 95 (-65.2%)
Mutual labels: open-source, design, ux
Server
☁️ Nextcloud server, a safe home for all your data
Stars: ✭ 17,723 (+6391.94%)
Mutual labels: open-source, design, ux
Circlebar
A fun, easy-to-use tab bar navigation controller for iOS.
Stars: ✭ 513 (+87.91%)
Mutual labels: open-source, design, ux
Csswand
🎨✨ Hover your wand and use your magic spell to copy beautiful css
Stars: ✭ 1,046 (+283.15%)
Mutual labels: open-source, design
Mahapps.metro.simplechildwindow
A simple child window for MahApps.Metro
Stars: ✭ 339 (+24.18%)
Mutual labels: open-source, ux
Fonts
A collection of rad, open-source typefaces that everyone needs in their lives.
Stars: ✭ 24 (-91.21%)
Mutual labels: open-source, design
Shrine Materialdesign2
implementation of Material Design 2 Shrine project
Stars: ✭ 215 (-21.25%)
Mutual labels: design, ux
Opensourcedesign.github.io
🎨💻 Source code of our website
Stars: ✭ 228 (-16.48%)
Mutual labels: open-source, design
Fonts
🔤 A collection of 100% actually free open source fonts!
Stars: ✭ 252 (-7.69%)
Mutual labels: open-source, design
HealthDeterminants
Social Determinants of Health Visualization
Stars: ✭ 58 (-78.75%)
Mutual labels: ux, healthcare
PulseTile-AngularJS
Leading edge modular UI framework for healthcare. Based on AngularJS. See documentation at http://docs.pulsetile.com/ See plugins at https://github.com/PulseTile-Plugins ##
Stars: ✭ 19 (-93.04%)
Mutual labels: ux, healthcare
sketch-git-hooks
Easy trick how to enjoy Git versioning for Sketch files thanks to Git Hooks
Stars: ✭ 12 (-95.6%)
Mutual labels: design, ux
Sketchsheets
Free ready to print sketch sheet templates for UX designers
Stars: ✭ 241 (-11.72%)
Mutual labels: design, ux
Ophidian
Ophidian's Mirror Repository on github. https://gitlab.com/eclufsc/eda/ophidian
Stars: ✭ 32 (-88.28%)
Mutual labels: open-source, design
Accessibility interview questions
A starting point for questions to ask someone that wants you to give them a job
Stars: ✭ 236 (-13.55%)
Mutual labels: design, ux
Jobs
💼 Post your open source design jobs, and find open source design to work on!
Stars: ✭ 257 (-5.86%)
Mutual labels: open-source, design
Flutterawesomelist
A UI experiment to create an awesome list for flutter apps
Stars: ✭ 171 (-37.36%)
Mutual labels: design, ux
Awesome Design
🌟 Curated design resources from all over the world.
Stars: ✭ 13,333 (+4783.88%)
Mutual labels: design, ux
Ehr
The code repository for the prototypes included in the eBook "Inspired EHRs - Designing for Clinicians" (inspiredEHRs.gov). The code of the prototypes is made available under the Apache 2.0 open source license. This license agreement allows anyone to freely use the code and ideas presented in this book, subject to the conditions listed at http://opensource.org/licenses/Apache-2.0.
Stars: ✭ 83 (-69.6%)
Mutual labels: healthcare, open-source
react-todo
A super accessible and easy to use todo list.
Stars: ✭ 13 (-95.24%)
Mutual labels: design, ux
hGraph: Your health in one picture.
hGraph is an open source javascript library for visualizing health data.
hGraph is a React component using D3.
Demos
React Demo
Patient Demo
Hospital Demo
Installation
This package can be found on npm and installed like so:
$ yarn add hgraph-react
# or
$ npm install hgraph-react
The hGraph component is packaged using webpack.
Usage
hGraph Component Props
Most props are not required and have sensible defaults built in, as listed below.
| Prop Name | Type | Is Required | Description | Default |
|---|---|---|---|---|
| data | array | true | An array of objects representing the metrics to display in hGraph (see below) | N/A |
| score | number | false | The overall score (hScore) to display in the center of hGraph | N/A |
| width | number | false | The width in pixels hGraph should render at. | 600 |
| height | number | false | The height in pixels hGraph should render at. | 600 |
| margin | object | false | An object representing the values for margins around hGraph. | { top: 70, right: 100, bottom: 70, left: 100 } |
| thresholdMin | number | false | A number value between 0 and 1 (percentage), determining the position the lower threshold of the healthy range renders at. | .25 |
| thresholdMax | number | false | A number value between 0 and 1 (percentage), determining the position the upper threshold of the healthy range renders at. | .75 |
| donutHoleFactor | number | false | A number value between 0 and 1 (percentage), determining the amount of hGraph's radius that should be cut out forming the hole in the center of the graph. | .4 |
| color | string (hex color code) | false | The color of the points and polygon shape. | '#616363' |
| healthyRangeFillColor | string (hex color code) | false | The color of the healthy range band. | '#98bd8e' |
| fontSize | number | false | The size (in pixels) of the font for the labels. | 16 |
| fontColor | string (hex color code) | false | The color of the labels. | '#000' |
| showAxisLabel | boolean | false | Whether or not axis labels should display around hGraph. | true |
| axisLabelWrapWidth | number | false | The width (in pixels) that the labels should wrap text at. | 80 (Note: use null for no wrapping) |
| axisLabelOffset | number | false | The distance (in pixels) that axis labels should be offset from the outer bounds of hGraph's 'absolute max' radius. | 12 |
| areaOpacity | number | false | The opacity of the polygon shape. | 0.25 |
| pointRadius | number | false | The radius (in pixels) of the points for metric values. | 10 |
| pointLabelWrapWidth | number | false | The width (in pixels) that the point labels should wrap text at. | null (no wrapping) |
| pointLabelOffset | number | false | The distance (in pixels) that point labels should be offset from the point. | 8 |
| hitboxRadius | number | false | The radius (in pixels) of the point hitboxes. (hGraph overlays a transparent hitbox over each point which can help users accurately click/touch points, particularly on mobile devices.) | Defaults to props.pointRadius size. |
| showScore | boolean | false | Whether or not to display the overall score (hScore) in the middle of hGraph. | true |
| scoreFontSize | number | false | The size (in pixels) of the font for the overall hGraph score | 120 |
| scoreFontColor | string (hex color code) | false | The color of the hGraph score. | '#000' |
| zoomFactor | number | false | The multiplier factor hGraph should zoom in. | 2.25 |
| zoomTransitionTime | number | false | The amount of time (in milliseconds) the zooming animation should take. | 750 |
| zoomOnPointClick | boolean | false | Configure if hGraph should zoom in/focus on a clicked point and display child points in the graph. | true |
| onPointClick | function | false | Callback function called when a point is clicked. Function is passed 2 arguments: the data object corresponding to the point clicked, and the event. | N/A |
hGraph Metric Object Properties
| Property Name | Type | Is Required | Description |
|---|---|---|---|
| id | string | true | A unique (compared to all other metrics) identifier string for the metric. |
| label | string | true | The axis display label for the metric. |
| value | number | true | The patient's recorded value for the metric. |
| healthyMin | number | true | The minimum value possible to still be considered a healthy value. |
| healthyMax | number | true | The maximum value possible to still be considered a healthy value. |
| absoluteMin | number | true | A reasonable minimum possible value for this metric. Note: values below this absolute minimum will be clamped to the min.) |
| absoluteMax | number | true | A reasonable maximum possible value for this metric. Note: values above this absolute maximum will be clamped to the max. |
| unitLabel | string | true | The units the metric is measured in, displayed with the metric value. |
| children | array | false | Optional array of child metrics that comprise this metric. Children metrics should conform to hGraph Metric Objects properties. Children are shown when a point is clicked and hGraph is in the "zoomed in" state. |
hMetrics
Set of health metrics to be displayed on the hGraph. A default set is provided but can be tailored to your installation.
(steps to edit coming)
hRanges
Defines the healthy range for hMetrics. A default set is provided but should be tailored to your installation.
(steps to edit coming)
hScore (notional)
hScore is an algorithm for scoring a person's health and can be displayed at the center of the hGraph. hScore is currently a concept and has not been developed.
Synthetic Patient Data
For development and demo’s, we’ve used Synthea for generating synthetic patient data to display in hGraph.
(steps to include coming)
Notable Repos
- A React Native port is available from Citizen Health.
- hGraph on FHIR (Fast Healthcare Interoperability Resources): https://github.com/symptomatic/hgraph-on-fhir
- hGraph + Spider chart demo, repo
Project
Roadmap
Code of Conduct
hGraph has adopted a Code of Conduct that we expect project participants to adhere to.
Please read the full text so that you can understand what actions will and will not be tolerated.
Contributing Guidelines
We encourage you to contribute to hGraph!
See the contributing guidelines for how to proceed.
Core Contributors
Founders/Designers: GoInvo is a digital design studio in Boston, crafting the future of healthcare through strategy, creativity, and vision.
Contact Us
[email protected]
Open Office Hours
License
hGraph is Apache 2.0 licensed.
For guidance integrating hGraph into your product or service, contact us at [email protected].
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].