Old school D3 from simpler times

All examples By author By category About

mforando

Full window Github gist

Reusable HTML Table Function

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    table 
		{
		font-family:'Open Sans',sans-serif; 
		font-size:14px;
		border-collapse: collapse;
		}
	table th 
		{
		border: 1px solid #008265;
		border-right: 1px solid #fff;
		padding: 8px;
		
		padding-top: 11px;
		padding-bottom: 11px;
		text-align: left;
		background-color: #008265;
		color: white;
		}
	table th:last-child 
		{
		border-right: 1px solid #008265;
		}
	table td
		{
		border: 1px solid #ddd;
		padding: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    }
	table tr:nth-child(even)
		{
		background-color: #f2f2f2;
		}

</style>
</head>

<body>
  <script>
    
    // This is a charting (table) function factory/generator 
    // based on Mike Bostock's Toward's Resuable Charts
    //
    //--------https://bost.ocks.org/mike/chart/--------------//
    //
    // the over arching formula, tabulate(), generates a configured 
    // table creation function called 'table()'
    //
    // wrapper functions, such as table.columns are used to attach 
    // table specifications to the 'configured' function to make
    // portions of the d3 code dynamic to user input. 
    //
    // These specifications can be as simple or complex as needed for
    // the particular webpage or visualization component.
    
    function tabulate() {
 				
      	//configure the table function for desired columns.
        table.columns = function(value) { 
          
          	//default in case a specification is not provided. 
      			if (!arguments.length) return null;		
      			columns = value;
          
          	//return the charting function with the new specifications. 
       		 	return table; 
          
    		};
      
      
      	table.showHeaders = function(value){
          	//if not specified, show headers by default
      			if (!arguments.length) return true;
      			showHeaders = value;
       			
	          //return the charting function with the new specifications. 
          	return table; 
        }
      
      
      	//this is the configurable charting function 
        function table(selection){

var columns = table.columns;
            
            if(table.columns == null){
              	columns = Object.keys(selection.data()[0].values[0])              
            }
        
            var tablecont = selection.append('table')
            
            if(table.showHeaders){
            	var thead = tablecont.append('thead')
            }
          
            var	tbody = tablecont.append('tbody');
            
          	var data = selection.data();	 
						
            selection.select("thead")
              	.append('tr')
              	.selectAll('th')
              	.data(columns)
              	.enter()
              	.append('th')
              	.text(function (column) {return column;});

var rows = tbody.selectAll('tr')
              .data(function(d){return d.values})
              .enter()
              .append('tr');

var cells = rows.selectAll('td')
              .data(function (row) {  
                return columns.map(function (column,i) {
                    return {column: column, value: row[column]};
                });
              }) 
              .enter()
              .append('td')
              .text(function (d) { return d.value; });

}
      	
      	//return the configured table function. 
        return table;
      
    	}
    
    var customTable = tabulate();
    customTable.columns = ["category","value"];
    customTable.showHeaders = true;  
    
    var dims = [{"category":"a"},
                {"category":"b"},
                {"category":"c"}];
    
    dims.forEach(function(d){
      	d.values = d3.range(Math.floor(Math.random()*10+1)).map(function(z){return {"category":d.category,"value":z, "hiddenfield":Math.random()}})    
    })

var containers = d3.select("body").selectAll(".containers").data(dims)
 
    containers.enter()
      .append("div")
    	.merge(containers) 
    	.html(function(d){return "<h2>" + "Category " + d.category + "</h2>"})
    	.call(customTable)
	
    containers.exit().remove();
    
    var starsData = [{"PROVIDER_ID":"010001","Outcomes_Mortality_cnt":7,"Outcomes_safety_cnt":8,"Outcomes_Readmission_cnt":9,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":8,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":2}
,{"PROVIDER_ID":"010005","Outcomes_Mortality_cnt":6,"Outcomes_safety_cnt":7,"Outcomes_Readmission_cnt":8,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":10,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":1}
,{"PROVIDER_ID":"010006","Outcomes_Mortality_cnt":7,"Outcomes_safety_cnt":7,"Outcomes_Readmission_cnt":9,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":8,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":3}
,{"PROVIDER_ID":"010007","Outcomes_Mortality_cnt":4,"Outcomes_safety_cnt":3,"Outcomes_Readmission_cnt":7,"Patient_Experience_cnt":10,"Efficiency_cnt":2,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":8,"Total_measure_group_cnt":6,"Outcomes_Measure_Group_cnt":3,"star":1}
,{"PROVIDER_ID":"010008","Outcomes_Mortality_cnt":3,"Outcomes_safety_cnt":1,"Outcomes_Readmission_cnt":4,"Patient_Experience_cnt":0,"Efficiency_cnt":2,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":7,"Total_measure_group_cnt":4,"Outcomes_Measure_Group_cnt":2,"star":4}
,{"PROVIDER_ID":"010011","Outcomes_Mortality_cnt":7,"Outcomes_safety_cnt":7,"Outcomes_Readmission_cnt":8,"Patient_Experience_cnt":10,"Efficiency_cnt":4,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":9,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":2}
,{"PROVIDER_ID":"010012","Outcomes_Mortality_cnt":5,"Outcomes_safety_cnt":3,"Outcomes_Readmission_cnt":7,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":8,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":2}
,{"PROVIDER_ID":"010016","Outcomes_Mortality_cnt":7,"Outcomes_safety_cnt":7,"Outcomes_Readmission_cnt":8,"Patient_Experience_cnt":10,"Efficiency_cnt":4,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":8,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":2}
,{"PROVIDER_ID":"010019","Outcomes_Mortality_cnt":5,"Outcomes_safety_cnt":7,"Outcomes_Readmission_cnt":7,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":7,"Process_Effectiveness_cnt":10,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":3}
,{"PROVIDER_ID":"010021","Outcomes_Mortality_cnt":3,"Outcomes_safety_cnt":2,"Outcomes_Readmission_cnt":5,"Patient_Experience_cnt":10,"Efficiency_cnt":4,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":7,"Total_measure_group_cnt":6,"Outcomes_Measure_Group_cnt":2,"star":3}
,{"PROVIDER_ID":"010022","Outcomes_Mortality_cnt":3,"Outcomes_safety_cnt":1,"Outcomes_Readmission_cnt":5,"Patient_Experience_cnt":10,"Efficiency_cnt":2,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":4,"Total_measure_group_cnt":5,"Outcomes_Measure_Group_cnt":2,"star":4}
,{"PROVIDER_ID":"010023","Outcomes_Mortality_cnt":7,"Outcomes_safety_cnt":7,"Outcomes_Readmission_cnt":9,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":9,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":2}
,{"PROVIDER_ID":"010024","Outcomes_Mortality_cnt":7,"Outcomes_safety_cnt":8,"Outcomes_Readmission_cnt":9,"Patient_Experience_cnt":10,"Efficiency_cnt":4,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":8,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":2}
,{"PROVIDER_ID":"010029","Outcomes_Mortality_cnt":7,"Outcomes_safety_cnt":8,"Outcomes_Readmission_cnt":9,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":10,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":4}
,{"PROVIDER_ID":"010032","Outcomes_Mortality_cnt":3,"Outcomes_safety_cnt":1,"Outcomes_Readmission_cnt":3,"Patient_Experience_cnt":0,"Efficiency_cnt":2,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":6,"Total_measure_group_cnt":4,"Outcomes_Measure_Group_cnt":2,"star":3}
,{"PROVIDER_ID":"010033","Outcomes_Mortality_cnt":7,"Outcomes_safety_cnt":8,"Outcomes_Readmission_cnt":9,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":5,"Process_Effectiveness_cnt":9,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":2}
,{"PROVIDER_ID":"010034","Outcomes_Mortality_cnt":4,"Outcomes_safety_cnt":2,"Outcomes_Readmission_cnt":6,"Patient_Experience_cnt":10,"Efficiency_cnt":3,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":7,"Total_measure_group_cnt":6,"Outcomes_Measure_Group_cnt":2,"star":3}
,{"PROVIDER_ID":"010035","Outcomes_Mortality_cnt":6,"Outcomes_safety_cnt":7,"Outcomes_Readmission_cnt":8,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":9,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":2}
,{"PROVIDER_ID":"010036","Outcomes_Mortality_cnt":5,"Outcomes_safety_cnt":4,"Outcomes_Readmission_cnt":8,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":8,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":4}
,{"PROVIDER_ID":"010038","Outcomes_Mortality_cnt":5,"Outcomes_safety_cnt":4,"Outcomes_Readmission_cnt":8,"Patient_Experience_cnt":10,"Efficiency_cnt":5,"Process_Timeliness_cnt":6,"Process_Effectiveness_cnt":7,"Total_measure_group_cnt":7,"Outcomes_Measure_Group_cnt":3,"star":3}
];
    
    /*
    var nested = d3.nest().key(function(d){return d.star}).entries(starsData)
   	
    var customTable2 = tabulate();
    customTable2.columns = null;
    customTable2.showHeaders = true;  
    
    var containers = d3.select("body").selectAll(".containers").data(nested)
 
    containers.enter()
      .append("div")
    	.merge(containers) 
    	.html(function(d){return "<h2>" + "Category " + d.key + "</h2>"})
    	.call(customTable2)
	
    containers.exit().remove();
    */
  </script>
</body>

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