{"id":13991868,"url":"https://github.com/hgraph-os/hGraph","last_synced_at":"2025-07-22T14:32:32.160Z","repository":{"id":4124429,"uuid":"5235639","full_name":"hgraph-os/hGraph","owner":"hgraph-os","description":"hGraph is an open source javascript library for visualizing health data.","archived":false,"fork":false,"pushed_at":"2023-01-06T16:28:06.000Z","size":12874,"stargazers_count":292,"open_issues_count":38,"forks_count":60,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-08-09T14:05:26.985Z","etag":null,"topics":["boston","care-plan","data-viz","design","healthcare","open-source","patient-health-data","patient-health-record","ux","visualization","wellness"],"latest_commit_sha":null,"homepage":"http://www.hgraph.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hgraph-os.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-07-30T17:56:14.000Z","updated_at":"2024-05-15T00:58:20.000Z","dependencies_parsed_at":"2023-01-11T16:23:23.170Z","dependency_job_id":null,"html_url":"https://github.com/hgraph-os/hGraph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2FhGraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2FhGraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2FhGraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2FhGraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hgraph-os","download_url":"https://codeload.github.com/hgraph-os/hGraph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227124036,"owners_count":17734246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boston","care-plan","data-viz","design","healthcare","open-source","patient-health-data","patient-health-record","ux","visualization","wellness"],"created_at":"2024-08-09T14:01:38.560Z","updated_at":"2024-11-29T12:30:53.946Z","avatar_url":"https://github.com/hgraph-os.png","language":"JavaScript","readme":"# [hGraph](https://www.hgraph.org): Your health in one picture.\nhGraph is an open source javascript library for visualizing health data.  \nhGraph is a [React](https://reactjs.org) component using [D3](https://d3js.org/).\n\n![hGraph](https://github.com/hgraph-os/hgraph-design/blob/main/hgraph.png)\n\n## Demos\n[React Demo](https://hgraph-os.github.io/hGraph/)  \n[Patient Demo](https://www.hgraph.org/demo/)  \n[Hospital Demo](http://hospital.hgraph.org)\n\n## Installation\nThis package can be [found on npm](https://www.npmjs.com/package/hgraph-react) and installed like so:\n```bash\n$ yarn add hgraph-react\n# or\n$ npm install hgraph-react\n```\nThe hGraph component is packaged using [webpack](https://webpack.js.org/). \n\n## Usage\n\n### hGraph Component Props\nMost props are not required and have sensible defaults built in, as listed below.\n\n| Prop Name | Type | Is Required | Description | Default |\n| --------- | ---- | ----------- | ----------- | ------- |\n| data | array | true | An array of objects representing the metrics to display in hGraph (see [below](#metrics)) | N/A |\n| score | number | false | The overall score (hScore) to display in the center of hGraph | N/A |\n| width | number | false | The width in pixels hGraph should render at. | 600 |\n| height | number | false | The height in pixels hGraph should render at. | 600 |\n| margin | object | false | An object representing the values for margins around hGraph. | `{ top: 70, right: 100, bottom: 70, left: 100 }` |\n| thresholdMin | number | false | A number value between 0 and 1 (percentage), determining the position the lower threshold of the healthy range renders at. | .25 |\n| thresholdMax | number | false | A number value between 0 and 1 (percentage), determining the position the upper threshold of the healthy range renders at. | .75 |\n| 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 |\n| color | string (hex color code) | false | The color of the points and polygon shape. | '#616363' |\n| healthyRangeFillColor | string (hex color code) | false | The color of the healthy range band. | '#98bd8e' |\n| fontSize | number | false | The size (in pixels) of the font for the labels. | 16 |\n| fontColor | string (hex color code) | false | The color of the labels. | '#000' |\n| showAxisLabel | boolean | false | Whether or not axis labels should display around hGraph. | true |\n| axisLabelWrapWidth | number | false | The width (in pixels) that the labels should wrap text at. | 80 (Note: use `null` for no wrapping) |\n| axisLabelOffset | number | false | The distance (in pixels) that axis labels should be offset from the outer bounds of hGraph's 'absolute max' radius. | 12 |\n| areaOpacity | number | false | The opacity of the polygon shape. | 0.25 |\n| pointRadius | number | false | The radius (in pixels) of the points for metric values. | 10 |\n| pointLabelWrapWidth | number | false | The width (in pixels) that the point labels should wrap text at. | null (no wrapping) |\n| pointLabelOffset | number | false | The distance (in pixels) that point labels should be offset from the point. | 8 |\n| 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. |\n| showScore | boolean | false | Whether or not to display the overall score (hScore) in the middle of hGraph. | true |\n| scoreFontSize | number | false | The size (in pixels) of the font for the overall hGraph score | 120 |\n| scoreFontColor | string (hex color code) | false | The color of the hGraph score. | '#000' |\n| zoomFactor | number | false | The multiplier factor hGraph should zoom in. | 2.25 |\n| zoomTransitionTime | number | false | The amount of time (in milliseconds) the zooming animation should take. | 750 |\n| zoomOnPointClick | boolean | false | Configure if hGraph should zoom in/focus on a clicked point and display child points in the graph. | true |\n| 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 |\n\n### hGraph Metric Object Properties \u003ca name=\"metrics\"\u003e\u003c/a\u003e\n| Property Name | Type | Is Required | Description |\n| ------------- | ---- | ----------- | ----------- |\n| id | string | true | A unique (compared to all other metrics) identifier string for the metric. |\n| label | string | true | The axis display label for the metric. |\n| value | number | true | The patient's recorded value for the metric. |\n| healthyMin | number | true | The minimum value possible to still be considered a healthy value. |\n| healthyMax | number | true | The maximum value possible to still be considered a healthy value. |\n| absoluteMin | number | true | A reasonable minimum possible value for this metric. Note: values below this absolute minimum will be clamped to the min.) |\n| absoluteMax | number | true | A reasonable maximum possible value for this metric. Note: values above this absolute maximum will be clamped to the max. |\n| unitLabel | string | true | The units the metric is measured in, displayed with the metric value. |\n| 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. |\n\n### hMetrics\nSet of health metrics to be displayed on the hGraph. A default set is provided but can be tailored to your installation.  \n![hMetrics Component](https://github.com/hgraph-os/hgraph-design/blob/main/hGraph-components-diagram/hgraph-components-hmetrics.png)\n\n(steps to edit coming)\n\n### hRanges\nDefines the healthy range for hMetrics. A default set is provided but should be tailored to your installation.  \n![hRanges Component](https://github.com/hgraph-os/hgraph-design/blob/main/hGraph-components-diagram/hgraph-components-hranges.png)\n\n(steps to edit coming)\n\n### [hScore](https://github.com/hgraph-os/hScore) (notional)\nhScore 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.  \n![hScore Component](https://github.com/hgraph-os/hgraph-design/blob/main/hGraph-components-diagram/hgraph-components-hscore.png)\n\n### Synthetic Patient Data\nFor development and demo’s, we’ve used [Synthea](https://synthetichealth.github.io/synthea/) for generating synthetic patient data to display in hGraph.\n\n(steps to include coming)\n\n## Notable Repos\n* A [React Native port](https://github.com/CitizenHealth/react-native-hgraph) is available from Citizen Health.\n* hGraph on FHIR (Fast Healthcare Interoperability Resources): [https://github.com/symptomatic/hgraph-on-fhir](https://github.com/symptomatic/hgraph-on-fhir)\n* hGraph + Spider chart [demo](https://goinvo.github.io/VisualizationComponents/), [repo](https://github.com/goinvo/VisualizationComponents)\n\n## Project\n\n### [Roadmap](https://docs.google.com/document/d/1IiRXmd64ZKRt3mrrDPn4E2GWY5KBm_4VFHAtwOndPZA/)\n\n### [Code of Conduct](https://github.com/hgraph-os/hGraph/blob/master/CODE_OF_CONDUCT.md)\nhGraph has adopted a Code of Conduct that we expect project participants to adhere to.  \nPlease read the [full text](https://github.com/hgraph-os/hGraph/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.\n\n### [Contributing Guidelines](https://github.com/hgraph-os/hGraph/blob/master/CONTRIBUTE.md)\nWe encourage you to contribute to hGraph!  \nSee the [contributing guidelines](https://github.com/hgraph-os/hGraph/blob/master/CONTRIBUTE.md) for how to proceed.\n\n### Core Contributors\nFounders/Designers: [GoInvo](http://www.goinvo.com) is a digital design studio in Boston, crafting the future of healthcare through strategy, creativity, and vision.\n\n### Contact Us\n[hgraph@goinvo.com](mailto:hgraph@goinvo.com)  \n[Open Office Hours](https://calendly.com/goinvo/hgraph-open-office-hours)\n\n### License\nhGraph is [Apache 2.0](https://github.com/goinvo/hGraph/blob/master/LICENSE) licensed.\n\n### For guidance integrating hGraph into your product or service, contact us at [hgraph@goinvo.com](mailto:hgraph@goinvo.com).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhgraph-os%2FhGraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhgraph-os%2FhGraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhgraph-os%2FhGraph/lists"}