Old school D3 from simpler times

All examples By author By category About

jwildfire

Full window Github gist

Safety Histogram - React/ChartFoundry Example

This chart shows the distribution of labs measures, vital signs and other measures related to safety in a simulated clinical trial, and is designed to be used with the (soon to be released) ChartFoundry platform.

This page was created using webcharts and the associated Safety Histogram library.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
</head>
<body>
    <div id="chart"></div>
</body>
<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.5.0.js"></script> 
<script src="https://cdn.jsdelivr.net/gh/rhoinc/safety-histogram/reorg-backup/build/safetyhistogram-chf.js"></script>  
<script>
// path to data file
var dataFile = 'labs_vitals_sub.csv';
// props for React component in the format provided by ChartFoundry
var props = {
    id: 'id',
    chartProperties: {}, 
    dataMappings: {
        time_col: "VISITNUM",
        measure_col: "test",
        value_col: "stresn",
        unit_col: "stresu"
    },
    template: { chartProperties: {}, dataMappings: {}, controls: [] }
};

d3.csv(dataFile, function (data){
    // add data to props
    props.data = data;

// render to DOM
    ReactDOM.render(
        React.createElement(safetyHistogram, props),
        document.getElementById('chart')
    );
});
</script>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
</head>
<body>
    <div id="chart"></div>
</body>
<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.5.0.js"></script> 
<script src="https://cdn.jsdelivr.net/gh/rhoinc/safety-histogram/reorg-backup/build/safetyhistogram-chf.js"></script>  
<script>
// path to data file
var dataFile = 'labs_vitals_sub.csv';
// props for React component in the format provided by ChartFoundry
var props = {
    id: 'id',
    chartProperties: {}, 
    dataMappings: {
        time_col: "VISITNUM",
        measure_col: "test",
        value_col: "stresn",
        unit_col: "stresu"
    },
    template: { chartProperties: {}, dataMappings: {}, controls: [] }
};
​
d3.csv(dataFile, function (data){
    // add data to props
    props.data = data;
​
    // render to DOM
    ReactDOM.render(
        React.createElement(safetyHistogram, props),
        document.getElementById('chart')
    );
});
</script>
</html>
​
    

Updated missing url https://rawgit.com/RhoInc/safety-histogram/reorg-backup/build/safetyHistogram-chf.js to https://cdn.jsdelivr.net/gh/rhoinc/safety-histogram/reorg-backup/build/safetyhistogram-chf.js

https://fb.me/react-0.14.7.js

https://fb.me/react-dom-0.14.7.js

https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js

https://d3js.org/d3.v3.min.js

https://graphics.rhoworld.com/src/webcharts/webcharts.v1.5.0.js

https://rawgit.com/RhoInc/safety-histogram/reorg-backup/build/safetyHistogram-chf.js