Old school D3 from simpler times

All examples By author By category About

jwildfire

Full window Github gist

Population Explorer - Simple Example with Mock Data

<html lang="en">
<title>Population Explorer - Simple Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>	
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rhoinc/populationexplorer/populationexplorer.js"></script>	
<script src="https://cdn.jsdelivr.net/gh/rhoinc/populationexplorer/basictable.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/PopulationExplorer/master/populationExplorer.css">

</head>

<body style="padding:1em;">
</body>
<script>
$(document).ready(function(){
   var dataElement = "body";
    var dataPath = "mockData.csv"
    var settings = {
        "denominator":[
            {"type":"cat","name":"gender","head":"Gender"},
            {"type":"num","name":"age","head":"Age"},
            {"type":"cat","name":"treatment","head":"Treatment"},
        ],
        "numerator":[
            {"type":"cat","name":"outcome","head":"Outcome"},
        ],
        "rowUnits":"enrolled particpants",
        "viz":true,
        "participantTable":{
            "cols":["gender","age","treatment","outcome"],
	        "start":1,
    	    "n":10,
        	"paginate":true
        }
    }
    
    d3.csv(dataPath,function(error,raw){
        popExplore.init(dataElement,raw,settings);
    })
})

</script>
</html>

xxxxxxxxxx
 
<html lang="en">
<title>Population Explorer - Simple Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>   
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rhoinc/populationexplorer/populationexplorer.js"></script> 
<script src="https://cdn.jsdelivr.net/gh/rhoinc/populationexplorer/basictable.js"></script> 
​
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/PopulationExplorer/master/populationExplorer.css">
​
</head>
​
<body style="padding:1em;">
</body>
<script>
$(document).ready(function(){
   var dataElement = "body";
    var dataPath = "mockData.csv"
    var settings = {
        "denominator":[
            {"type":"cat","name":"gender","head":"Gender"},
            {"type":"num","name":"age","head":"Age"},
            {"type":"cat","name":"treatment","head":"Treatment"},
        ],
        "numerator":[
            {"type":"cat","name":"outcome","head":"Outcome"},
        ],
        "rowUnits":"enrolled particpants",
        "viz":true,
        "participantTable":{
            "cols":["gender","age","treatment","outcome"],
            "start":1,
            "n":10,
            "paginate":true
        }
    }
    
    d3.csv(dataPath,function(error,raw){
        popExplore.init(dataElement,raw,settings);
    })
})
​
</script>
</html>
    

Updated missing url https://cdn.rawgit.com/RhoInc/PopulationExplorer/master/populationExplorer.js to https://cdn.jsdelivr.net/gh/rhoinc/populationexplorer/populationexplorer.js

Updated missing url https://cdn.rawgit.com/RhoInc/PopulationExplorer/master/basicTable.js to https://cdn.jsdelivr.net/gh/rhoinc/populationexplorer/basictable.js

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

https://code.jquery.com/jquery-1.9.1.min.js

https://code.jquery.com/ui/1.9.2/jquery-ui.js

https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/js/bootstrap.min.js

https://cdn.rawgit.com/RhoInc/PopulationExplorer/master/populationExplorer.js

https://cdn.rawgit.com/RhoInc/PopulationExplorer/master/basicTable.js