Old school D3 from simpler times

All examples By author By category About

jwildfire

Full window Github gist

Adverse Event Explorer Example

The Adverse Event Explorer is an interactive tool that allows users to dynamically query adverse event (AE) data in real time. This example shows data from a sample clinical trial.

This page was created using the AE explorer github library.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/rhoinc/aeexplorer/table.js"></script>	
	<link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/aeexplorer/master/table.css">
</head>
<script>
//Location to render the table (must be valid css)
var dataElement = "body";

//File path for the adverse event data set with 1 record per AE with 
//placeholder rows for participants with no exacerbations)
var dataFile = "ae_explorer.csv"

//Specify column names in the raw data
var variables = {
    "id":"USUBJID",
    "major":"AESOC",
    "minor":"AELLT",
    "group":"ARM",
    "filters":["AESEV","AESER"],
    "details":["USUBJID","AESOC","AELLT","AGE","ETHNIC"]
};

//Specify settings for groups, filters and display preferences
var settings = {
    "groups": [
       {"key":"Placebo","selected":true}, 
        {"key":"Xanomeline High Dose","selected":true},
        {"key":"Xanomeline Low Dose","selected":true}
    ],
    "defaults":{
        "maxPrevalence":"0.0"
    }
};

//Initialize the AE table
d3.csv(dataFile, function (data){
    aeTable.init(dataElement, data, variables, settings);    
})

</script>
<body></body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/rhoinc/aeexplorer/table.js"></script>  
    <link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/aeexplorer/master/table.css">
</head>
<script>
//Location to render the table (must be valid css)
var dataElement = "body";
​
//File path for the adverse event data set with 1 record per AE with 
//placeholder rows for participants with no exacerbations)
var dataFile = "ae_explorer.csv"
​
//Specify column names in the raw data
var variables = {
    "id":"USUBJID",
    "major":"AESOC",
    "minor":"AELLT",
    "group":"ARM",
    "filters":["AESEV","AESER"],
    "details":["USUBJID","AESOC","AELLT","AGE","ETHNIC"]
};
​
//Specify settings for groups, filters and display preferences
var settings = {
    "groups": [
       {"key":"Placebo","selected":true}, 
        {"key":"Xanomeline High Dose","selected":true},
        {"key":"Xanomeline Low Dose","selected":true}
    ],
    "defaults":{
        "maxPrevalence":"0.0"
    }
};
​
//Initialize the AE table
d3.csv(dataFile, function (data){
    aeTable.init(dataElement, data, variables, settings);    
})
​
</script>
<body></body>
​
</html>
​
    

Updated missing url https://cdn.rawgit.com/RhoInc/aeexplorer/master/table.js to https://cdn.jsdelivr.net/gh/rhoinc/aeexplorer/table.js

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

https://cdn.rawgit.com/RhoInc/aeexplorer/master/table.js