Old school D3 from simpler times

All examples By author By category About

jwildfire

Full window Github gist

Adverse Event Timeline - Example

This chart shows the timing of Adverse Events for a simulated clinical trial. Click a participant ID on the y-axis to see details for that participant.

This page was created using webcharts and the associated AE timeline wrapper.

<!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://graphics.rhoworld.com/src/webcharts/webcharts.v1.6.1.js"></script>	
	<script src="https://cdn.jsdelivr.net/gh/rhoinc/ae-timelines/build/aetimeline.js"></script>	
	<link rel="stylesheet" href="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.css">
</head>
<body></body>
<script>
var div = 'body';
var settings = {
        legend: {
           location:"top",
            order: ['MILD', 'MODERATE', 'SEVERE', 'NA']
        },
        colors: ['green', 'orange', 'red', '#444'],
        stdy_col: 'AESTDY', //Overwrites default value
        endy_col: 'AEENDY', //Overwrites default value
        date_format:"%Y-%m-%d" //Overwrites default value
    };

var dataFile = 'ae_explorer.csv';
    d3.csv(dataFile, function (data){
        console.log(data[1])
        var plot = aeTimelines(div, settings).init(data);
        console.log(plot)
    });
</script>
</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://graphics.rhoworld.com/src/webcharts/webcharts.v1.6.1.js"></script> 
    <script src="https://cdn.jsdelivr.net/gh/rhoinc/ae-timelines/build/aetimeline.js"></script> 
    <link rel="stylesheet" href="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.css">
</head>
<body></body>
<script>
var div = 'body';
var settings = {
        legend: {
           location:"top",
            order: ['MILD', 'MODERATE', 'SEVERE', 'NA']
        },
        colors: ['green', 'orange', 'red', '#444'],
        stdy_col: 'AESTDY', //Overwrites default value
        endy_col: 'AEENDY', //Overwrites default value
        date_format:"%Y-%m-%d" //Overwrites default value
    };
​
    var dataFile = 'ae_explorer.csv';
    d3.csv(dataFile, function (data){
        console.log(data[1])
        var plot = aeTimelines(div, settings).init(data);
        console.log(plot)
    });
</script>
</html>
​
    

Updated missing url https://cdn.rawgit.com/RhoInc/ae-timelines/master/build/aeTimeline.js to https://cdn.jsdelivr.net/gh/rhoinc/ae-timelines/build/aetimeline.js

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

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

https://cdn.rawgit.com/RhoInc/ae-timelines/master/build/aeTimeline.js