Skip to content

Instantly share code, notes, and snippets.

@mforando

mforando/.block

Created June 5, 2018 19:14
Show Gist options
  • Save mforando/cd082aa475f767a0ee756555e712d6b0 to your computer and use it in GitHub Desktop.
Save mforando/cd082aa475f767a0ee756555e712d6b0 to your computer and use it in GitHub Desktop.
Download ZIP
Star Rating Likert
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
*{
font-family:tahoma;
}
body {margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
rect {stroke:white;
stroke-width:1px;}
#likert{
float:left;
display:inline-block;
}
#table{
float:left;
display:inline-block;
}
table {
border-collapse: collapse;
font-family:tahoma;
}
table, th, td {
border: 1px solid black;
}
th {
background-color: #4CAF50;
color: white;
font-size:7px;
}
td{
font-size:7px;
}
</style>
</head>
<div id="container">
<div id="likert">
</div>
<div id="table">
</div>
</div>
<body>
<script>
var likertdata = [{"State":"SD","Cnt1":0,"Cnt2":0,"Cnt3":1,"Cnt4":13,"Cnt5":3,"Total":17,"Pcnt1":0,"Pcnt2":0,"Pcnt3":5.88235294117647e-02,"Pcnt4":0.764705882352941,"Pcnt5":0.176470588235294,"avg":4.11764705882353}
,{"State":"WI","Cnt1":0,"Cnt2":5,"Cnt3":20,"Cnt4":54,"Cnt5":28,"Total":107,"Pcnt1":0,"Pcnt2":4.67289719626168e-02,"Pcnt3":0.186915887850467,"Pcnt4":0.504672897196262,"Pcnt5":0.261682242990654,"avg":3.98130841121495}
,{"State":"UT","Cnt1":0,"Cnt2":1,"Cnt3":7,"Cnt4":18,"Cnt5":5,"Total":31,"Pcnt1":0,"Pcnt2":3.2258064516129e-02,"Pcnt3":0.225806451612903,"Pcnt4":0.580645161290323,"Pcnt5":0.161290322580645,"avg":3.87096774193548}
,{"State":"ID","Cnt1":0,"Cnt2":2,"Cnt3":4,"Cnt4":12,"Cnt5":5,"Total":23,"Pcnt1":0,"Pcnt2":8.69565217391304e-02,"Pcnt3":0.173913043478261,"Pcnt4":0.521739130434783,"Pcnt5":0.217391304347826,"avg":3.8695652173913}
,{"State":"DE","Cnt1":0,"Cnt2":0,"Cnt3":2,"Cnt4":3,"Cnt5":1,"Total":6,"Pcnt1":0,"Pcnt2":0,"Pcnt3":0.333333333333333,"Pcnt4":0.5,"Pcnt5":0.166666666666667,"avg":3.83333333333333}
,{"State":"CO","Cnt1":0,"Cnt2":1,"Cnt3":17,"Cnt4":27,"Cnt5":7,"Total":52,"Pcnt1":0,"Pcnt2":1.92307692307692e-02,"Pcnt3":0.326923076923077,"Pcnt4":0.519230769230769,"Pcnt5":0.134615384615385,"avg":3.76923076923077}
,{"State":"HI","Cnt1":0,"Cnt2":0,"Cnt3":6,"Cnt4":4,"Cnt5":3,"Total":13,"Pcnt1":0,"Pcnt2":0,"Pcnt3":0.461538461538462,"Pcnt4":0.307692307692308,"Pcnt5":0.230769230769231,"avg":3.76923076923077}
,{"State":"MN","Cnt1":0,"Cnt2":3,"Cnt3":23,"Cnt4":46,"Cnt5":8,"Total":80,"Pcnt1":0,"Pcnt2":0.0375,"Pcnt3":0.2875,"Pcnt4":0.575,"Pcnt5":0.1,"avg":3.7375}
,{"State":"NH","Cnt1":0,"Cnt2":1,"Cnt3":8,"Cnt4":13,"Cnt5":3,"Total":25,"Pcnt1":0,"Pcnt2":0.04,"Pcnt3":0.32,"Pcnt4":0.52,"Pcnt5":0.12,"avg":3.72}
,{"State":"OH","Cnt1":3,"Cnt2":16,"Cnt3":42,"Cnt4":53,"Cnt5":30,"Total":144,"Pcnt1":2.08333333333333e-02,"Pcnt2":0.111111111111111,"Pcnt3":0.291666666666667,"Pcnt4":0.368055555555556,"Pcnt5":0.208333333333333,"avg":3.63194444444444}
,{"State":"IN","Cnt1":1,"Cnt2":6,"Cnt3":43,"Cnt4":49,"Cnt5":15,"Total":114,"Pcnt1":8.7719298245614e-03,"Pcnt2":5.26315789473684e-02,"Pcnt3":0.37719298245614,"Pcnt4":0.429824561403509,"Pcnt5":0.131578947368421,"avg":3.62280701754386}
,{"State":"ME","Cnt1":0,"Cnt2":4,"Cnt3":11,"Cnt4":12,"Cnt5":5,"Total":32,"Pcnt1":0,"Pcnt2":0.125,"Pcnt3":0.34375,"Pcnt4":0.375,"Pcnt5":0.15625,"avg":3.5625}
,{"State":"MT","Cnt1":0,"Cnt2":1,"Cnt3":11,"Cnt4":11,"Cnt5":2,"Total":25,"Pcnt1":0,"Pcnt2":0.04,"Pcnt3":0.44,"Pcnt4":0.44,"Pcnt5":0.08,"avg":3.56}
,{"State":"NE","Cnt1":0,"Cnt2":4,"Cnt3":17,"Cnt4":27,"Cnt5":2,"Total":50,"Pcnt1":0,"Pcnt2":0.08,"Pcnt3":0.34,"Pcnt4":0.54,"Pcnt5":0.04,"avg":3.54}
,{"State":"OR","Cnt1":0,"Cnt2":5,"Cnt3":20,"Cnt4":22,"Cnt5":5,"Total":52,"Pcnt1":0,"Pcnt2":9.61538461538462e-02,"Pcnt3":0.384615384615385,"Pcnt4":0.423076923076923,"Pcnt5":9.61538461538462e-02,"avg":3.51923076923077}
,{"State":"KS","Cnt1":0,"Cnt2":7,"Cnt3":27,"Cnt4":21,"Cnt5":9,"Total":64,"Pcnt1":0,"Pcnt2":0.109375,"Pcnt3":0.421875,"Pcnt4":0.328125,"Pcnt5":0.140625,"avg":3.5}
,{"State":"ND","Cnt1":0,"Cnt2":2,"Cnt3":5,"Cnt4":10,"Cnt5":0,"Total":17,"Pcnt1":0,"Pcnt2":0.117647058823529,"Pcnt3":0.294117647058824,"Pcnt4":0.588235294117647,"Pcnt5":0,"avg":3.47058823529412}
,{"State":"IA","Cnt1":2,"Cnt2":9,"Cnt3":25,"Cnt4":43,"Cnt5":4,"Total":83,"Pcnt1":2.40963855421687e-02,"Pcnt2":0.108433734939759,"Pcnt3":0.301204819277108,"Pcnt4":0.518072289156627,"Pcnt5":4.81927710843374e-02,"avg":3.4578313253012}
,{"State":"MI","Cnt1":6,"Cnt2":16,"Cnt3":29,"Cnt4":56,"Cnt5":10,"Total":117,"Pcnt1":5.12820512820513e-02,"Pcnt2":0.136752136752137,"Pcnt3":0.247863247863248,"Pcnt4":0.478632478632479,"Pcnt5":8.54700854700855e-02,"avg":3.41025641025641}
,{"State":"MA","Cnt1":1,"Cnt2":9,"Cnt3":23,"Cnt4":17,"Cnt5":7,"Total":57,"Pcnt1":1.75438596491228e-02,"Pcnt2":0.157894736842105,"Pcnt3":0.403508771929825,"Pcnt4":0.298245614035088,"Pcnt5":0.12280701754386,"avg":3.35087719298246}
,{"State":"VT","Cnt1":0,"Cnt2":2,"Cnt3":5,"Cnt4":4,"Cnt5":1,"Total":12,"Pcnt1":0,"Pcnt2":0.166666666666667,"Pcnt3":0.416666666666667,"Pcnt4":0.333333333333333,"Pcnt5":8.33333333333333e-02,"avg":3.33333333333333}
,{"State":"TX","Cnt1":9,"Cnt2":42,"Cnt3":104,"Cnt4":84,"Cnt5":33,"Total":272,"Pcnt1":3.30882352941176e-02,"Pcnt2":0.154411764705882,"Pcnt3":0.382352941176471,"Pcnt4":0.308823529411765,"Pcnt5":0.121323529411765,"avg":3.33088235294118}
,{"State":"WA","Cnt1":2,"Cnt2":10,"Cnt3":29,"Cnt4":20,"Cnt5":7,"Total":68,"Pcnt1":2.94117647058824e-02,"Pcnt2":0.147058823529412,"Pcnt3":0.426470588235294,"Pcnt4":0.294117647058824,"Pcnt5":0.102941176470588,"avg":3.29411764705882}
,{"State":"OK","Cnt1":4,"Cnt2":16,"Cnt3":29,"Cnt4":24,"Cnt5":10,"Total":83,"Pcnt1":4.81927710843374e-02,"Pcnt2":0.192771084337349,"Pcnt3":0.349397590361446,"Pcnt4":0.289156626506024,"Pcnt5":0.120481927710843,"avg":3.24096385542169}
,{"State":"WY","Cnt1":0,"Cnt2":2,"Cnt3":10,"Cnt4":4,"Cnt5":1,"Total":17,"Pcnt1":0,"Pcnt2":0.117647058823529,"Pcnt3":0.588235294117647,"Pcnt4":0.235294117647059,"Pcnt5":5.88235294117647e-02,"avg":3.23529411764706}
,{"State":"VA","Cnt1":3,"Cnt2":19,"Cnt3":20,"Cnt4":27,"Cnt5":8,"Total":77,"Pcnt1":3.8961038961039e-02,"Pcnt2":0.246753246753247,"Pcnt3":0.25974025974026,"Pcnt4":0.350649350649351,"Pcnt5":0.103896103896104,"avg":3.23376623376623}
,{"State":"RI","Cnt1":1,"Cnt2":2,"Cnt3":3,"Cnt4":4,"Cnt5":1,"Total":11,"Pcnt1":9.09090909090909e-02,"Pcnt2":0.181818181818182,"Pcnt3":0.272727272727273,"Pcnt4":0.363636363636364,"Pcnt5":9.09090909090909e-02,"avg":3.18181818181818}
,{"State":"IL","Cnt1":13,"Cnt2":31,"Cnt3":53,"Cnt4":44,"Cnt5":20,"Total":161,"Pcnt1":8.07453416149068e-02,"Pcnt2":0.192546583850932,"Pcnt3":0.329192546583851,"Pcnt4":0.273291925465839,"Pcnt5":0.124223602484472,"avg":3.16770186335404}
,{"State":"SC","Cnt1":2,"Cnt2":17,"Cnt3":14,"Cnt4":10,"Cnt5":9,"Total":52,"Pcnt1":3.84615384615385e-02,"Pcnt2":0.326923076923077,"Pcnt3":0.269230769230769,"Pcnt4":0.192307692307692,"Pcnt5":0.173076923076923,"avg":3.13461538461538}
,{"State":"PA","Cnt1":11,"Cnt2":29,"Cnt3":50,"Cnt4":46,"Cnt5":12,"Total":148,"Pcnt1":7.43243243243243e-02,"Pcnt2":0.195945945945946,"Pcnt3":0.337837837837838,"Pcnt4":0.310810810810811,"Pcnt5":8.10810810810811e-02,"avg":3.12837837837838}
,{"State":"NC","Cnt1":3,"Cnt2":26,"Cnt3":31,"Cnt4":23,"Cnt5":10,"Total":93,"Pcnt1":3.2258064516129e-02,"Pcnt2":0.279569892473118,"Pcnt3":0.333333333333333,"Pcnt4":0.247311827956989,"Pcnt5":0.10752688172043,"avg":3.11827956989247}
,{"State":"LA","Cnt1":4,"Cnt2":16,"Cnt3":31,"Cnt4":23,"Cnt5":5,"Total":79,"Pcnt1":5.06329113924051e-02,"Pcnt2":0.20253164556962,"Pcnt3":0.392405063291139,"Pcnt4":0.291139240506329,"Pcnt5":6.32911392405063e-02,"avg":3.11392405063291}
,{"State":"AZ","Cnt1":2,"Cnt2":18,"Cnt3":17,"Cnt4":14,"Cnt5":7,"Total":58,"Pcnt1":3.44827586206897e-02,"Pcnt2":0.310344827586207,"Pcnt3":0.293103448275862,"Pcnt4":0.241379310344828,"Pcnt5":0.120689655172414,"avg":3.10344827586207}
,{"State":"AK","Cnt1":0,"Cnt2":3,"Cnt3":3,"Cnt4":4,"Cnt5":0,"Total":10,"Pcnt1":0,"Pcnt2":0.3,"Pcnt3":0.3,"Pcnt4":0.4,"Pcnt5":0,"avg":3.1}
,{"State":"MO","Cnt1":5,"Cnt2":19,"Cnt3":36,"Cnt4":24,"Cnt5":7,"Total":91,"Pcnt1":5.49450549450549e-02,"Pcnt2":0.208791208791209,"Pcnt3":0.395604395604396,"Pcnt4":0.263736263736264,"Pcnt5":7.69230769230769e-02,"avg":3.0989010989011}
,{"State":"GA","Cnt1":7,"Cnt2":27,"Cnt3":39,"Cnt4":28,"Cnt5":6,"Total":107,"Pcnt1":6.54205607476635e-02,"Pcnt2":0.252336448598131,"Pcnt3":0.364485981308411,"Pcnt4":0.261682242990654,"Pcnt5":5.60747663551402e-02,"avg":2.99065420560748}
,{"State":"MD","Cnt1":5,"Cnt2":9,"Cnt3":17,"Cnt4":10,"Cnt5":4,"Total":45,"Pcnt1":0.111111111111111,"Pcnt2":0.2,"Pcnt3":0.377777777777778,"Pcnt4":0.222222222222222,"Pcnt5":8.88888888888889e-02,"avg":2.97777777777778}
,{"State":"AL","Cnt1":0,"Cnt2":26,"Cnt3":32,"Cnt4":22,"Cnt5":1,"Total":81,"Pcnt1":0,"Pcnt2":0.320987654320988,"Pcnt3":0.395061728395062,"Pcnt4":0.271604938271605,"Pcnt5":1.23456790123457e-02,"avg":2.97530864197531}
,{"State":"WV","Cnt1":1,"Cnt2":12,"Cnt3":13,"Cnt4":13,"Cnt5":0,"Total":39,"Pcnt1":2.56410256410256e-02,"Pcnt2":0.307692307692308,"Pcnt3":0.333333333333333,"Pcnt4":0.333333333333333,"Pcnt5":0,"avg":2.97435897435897}
,{"State":"CT","Cnt1":4,"Cnt2":6,"Cnt3":7,"Cnt4":11,"Cnt5":0,"Total":28,"Pcnt1":0.142857142857143,"Pcnt2":0.214285714285714,"Pcnt3":0.25,"Pcnt4":0.392857142857143,"Pcnt5":0,"avg":2.89285714285714}
,{"State":"CA","Cnt1":32,"Cnt2":81,"Cnt3":90,"Cnt4":65,"Cnt5":24,"Total":292,"Pcnt1":0.10958904109589,"Pcnt2":0.277397260273973,"Pcnt3":0.308219178082192,"Pcnt4":0.222602739726027,"Pcnt5":8.21917808219178e-02,"avg":2.89041095890411}
,{"State":"NM","Cnt1":2,"Cnt2":10,"Cnt3":11,"Cnt4":6,"Cnt5":2,"Total":31,"Pcnt1":6.45161290322581e-02,"Pcnt2":0.32258064516129,"Pcnt3":0.354838709677419,"Pcnt4":0.193548387096774,"Pcnt5":6.45161290322581e-02,"avg":2.87096774193548}
,{"State":"KY","Cnt1":9,"Cnt2":20,"Cnt3":33,"Cnt4":20,"Cnt5":2,"Total":84,"Pcnt1":0.107142857142857,"Pcnt2":0.238095238095238,"Pcnt3":0.392857142857143,"Pcnt4":0.238095238095238,"Pcnt5":2.38095238095238e-02,"avg":2.83333333333333}
,{"State":"TN","Cnt1":9,"Cnt2":28,"Cnt3":35,"Cnt4":22,"Cnt5":1,"Total":95,"Pcnt1":9.47368421052632e-02,"Pcnt2":0.294736842105263,"Pcnt3":0.368421052631579,"Pcnt4":0.231578947368421,"Pcnt5":1.05263157894737e-02,"avg":2.76842105263158}
,{"State":"AR","Cnt1":10,"Cnt2":13,"Cnt3":15,"Cnt4":16,"Cnt5":2,"Total":56,"Pcnt1":0.178571428571429,"Pcnt2":0.232142857142857,"Pcnt3":0.267857142857143,"Pcnt4":0.285714285714286,"Pcnt5":3.57142857142857e-02,"avg":2.76785714285714}
,{"State":"NJ","Cnt1":8,"Cnt2":23,"Cnt3":17,"Cnt4":13,"Cnt5":3,"Total":64,"Pcnt1":0.125,"Pcnt2":0.359375,"Pcnt3":0.265625,"Pcnt4":0.203125,"Pcnt5":0.046875,"avg":2.6875}
,{"State":"MS","Cnt1":9,"Cnt2":18,"Cnt3":24,"Cnt4":12,"Cnt5":1,"Total":64,"Pcnt1":0.140625,"Pcnt2":0.28125,"Pcnt3":0.375,"Pcnt4":0.1875,"Pcnt5":0.015625,"avg":2.65625}
,{"State":"FL","Cnt1":34,"Cnt2":65,"Cnt3":33,"Cnt4":32,"Cnt5":5,"Total":169,"Pcnt1":0.201183431952663,"Pcnt2":0.384615384615385,"Pcnt3":0.195266272189349,"Pcnt4":0.189349112426035,"Pcnt5":2.9585798816568e-02,"avg":2.46153846153846}
,{"State":"NY","Cnt1":42,"Cnt2":53,"Cnt3":39,"Cnt4":15,"Cnt5":2,"Total":151,"Pcnt1":0.278145695364238,"Pcnt2":0.350993377483444,"Pcnt3":0.258278145695364,"Pcnt4":9.93377483443709e-02,"Pcnt5":1.32450331125828e-02,"avg":2.21854304635762}
,{"State":"NV","Cnt1":11,"Cnt2":7,"Cnt3":4,"Cnt4":3,"Cnt5":0,"Total":25,"Pcnt1":0.44,"Pcnt2":0.28,"Pcnt3":0.16,"Pcnt4":0.12,"Pcnt5":0,"avg":1.96}
]
var margin = {top: 30, right: 20, bottom: 10, left: 50},
width = 700 - margin.left - margin.right,
height = 900 - margin.top - margin.bottom;
var y = d3.scaleBand().range([0, height]).paddingOuter(.5).paddingInner(.05);
var x = d3.scaleLinear().rangeRound([0, width]);
var color = d3.scaleOrdinal()
.range(["#c61300", "#f1af36", "#f8d59a", "#9bd37c", "#08aa5e"]);
var svg = d3.select("#likert").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("id", "d3-plot")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
color.domain(["Pcnt1", "Pcnt2", "Pcnt3", "Pcnt4", "Pcnt5"]);
var data = likertdata
data.forEach(function(d) {
var x0 = -1*(d["Pcnt3"]/2+d["Pcnt1"]+d["Pcnt2"]);
var idx = 0;
d.boxes = color.domain().map(function(name) { return {name: name, x0: x0, x1: x0 += +d[name], N: +d.N, n: +d[idx += 1]}; });
});
var min_val = d3.min(data, function(d) {return d.boxes["0"].x0;});
var max_val = d3.max(data, function(d) {return d.boxes["4"].x1;});
x.domain([min_val-.05, max_val+.05]);
y.domain(data.map(function(d) {return d.State; }));
var xAxis = d3.axisTop(x)
var yAxis = d3.axisLeft(y)
svg.append("g").attr("class", "x axis").call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var vakken = svg.selectAll(".question")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + y(d.State) + ")"; });
var bars = vakken.selectAll("rect")
.data(function(d) {return d.boxes;})
.enter()
.append("g")
.attr("class", "subbar");
bars.append("rect")
.attr("height", y.bandwidth)
.attr("x", function(d) { return x(d.x0); })
.attr("width", function(d) { return x(d.x1) - x(d.x0); })
.style("fill", function(d) { return color(d.name); });
bars.append("text")
.attr("x", function(d) { return x(d.x0); })
.attr("y", y.bandwidth/2)
.attr("dy", "0.5em")
.attr("dx", "0.5em")
.style("font" ,"10px sans-serif")
.style("text-anchor", "begin")
.text(function(d) { return d.n !== 0 && (d.x1-d.x0)>3 ? d.n : "" });
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("x1", x(0))
.attr("x2", x(0))
.attr("y2", height)
.style("stroke-dasharray",5);
var startp = svg.append("g").attr("class", "legendbox")
.attr("id", "mylegendbox");
// this is not nice, we should calculate the bounding box and use that
var legend_tabs = [-60, 70, 200, 330, 470];
var legend = startp.selectAll(".legend")
.data(color.domain().slice())
.enter()
.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + 10 + ","+(i*20+10)+")"; });
legend.append("rect")
.attr("x", 0)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 22)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "begin")
.style("font" ,"10px sans-serif")
.text(function(d) {
var lbl = d;
lbl = lbl.replace("Pcnt", "")
return lbl + " Star Rated Hospitals";});
d3.selectAll(".axis path")
.style("fill", "none")
.style("stroke", "#000")
.style("shape-rendering", "crispEdges")
d3.selectAll(".axis line")
.style("fill", "none")
.style("stroke", "#000")
.style("shape-rendering", "crispEdges")
var movesize = width/2 - startp.node().getBBox().width/2;
//d3.selectAll(".legendbox").attr("transform", "translate(" + movesize + ",0)");
function tabulate(data, columns) {
var table = d3.select('#table').append('table')
var thead = table.append('thead')
var tbody = table.append('tbody');
thead.append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.text(function (column) { return column; });
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');
var cells = rows.selectAll('td')
.data(function (row) {
return columns.map(function (column) {
console.log(row)
return {column: column, value: row[column]};
});
})
.enter()
.append('td')
.text(function (d) { return d.value; });
return table;
}
tabulate(likertdata, ['State', 'Cnt1','Cnt2','Cnt3','Cnt4','Cnt5','Total']); // 2 column table
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment