Built with blockbuilder.org
xxxxxxxxxx<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> //a funciton is a javascript object. var myfunction = function(){ }; console.log(myfunction) //because of this fact, we can attach properties and or functions to an overarching function. var myfunction_withoptions = function(){ }; myfunction_withoptions.options = 'foo' myfunction_withoptions.xScale = d3.scaleLinear().range([0,100]).domain([0,1000]) console.log(myfunction_withoptions.options) console.log(myfunction_withoptions.xScale) console.log(myfunction_withoptions.xScale(500)) // 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 scaleLinear(){ scale.range(){ if not provided [0,1] use provided } } */ var xScale = d3.axisBottom().tickValues() function tabulate() { var columns = "All"; var showHeader = true; //this is the configurable charting function function table(selection){ var cols = []; if(columns == "All"){ cols = Object.keys(selection.data()[0].values[0]) } else{ cols = columns; } var tablecont = selection.append('table') if(showHeader){ var thead = tablecont.append('thead') } var tbody = tablecont.append('tbody'); var data = selection.data(); selection.select("thead") .append('tr') .selectAll('th') .data(cols) .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 cols.map(function (column,i) { return {column: column, value: row[column]}; }); }) .enter() .append('td') .text(function (d) { return d.value; }); } //configure the table function for desired columns. table.columns = function(value) { //default in case a specification is not provided. if (!arguments.length) return columns; 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 showHeader; showHeader = value; //return the charting function with the new specifications. return table; } //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(["PROVIDER_ID","star"]) 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