Built with blockbuilder.org
forked from tomshanley‘s block: Makeover Monday - YouTube ratings - strip plot
<!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; font-family: sans-serif; }
.domain { display: none; }
.tick text, .axis-label { fill: #808080 }
.tick line { stroke: #808080; shape-rendering: crispEdges; }
</style>
</head>
<body>
<select id="user"></select>
<div class="A-plus"></div>
<div class="A"></div>
<div class="A-minus"></div>
<div class="B-plus"></div>
<div class="B"></div>
<div class="B-minus"></div>
<div class="C-plus"></div>
<div class="D-plus"></div>
<div class="D"></div>
<script>
var maxVideoViews;
var maxSubscribers;
function formatBillions(d) {
var roundedNumber = Math.round(d/1000000000);
return roundedNumber + "bn";
};
function formatMillions(d) {
var roundedNumber = Math.round(d/1000000);
return roundedNumber + "m";
};
d3.csv("data.csv", convertTextToNumbers, function(error, data) {
if(error) { throw error; };
var dropDown = d3.select("#user").on("change", highlightUser);
dropDown.selectAll("option")
.data(data)
.enter()
.append("option")
.attr("value", function(d) { return d.User; })
.text(function(d) { return d.User; });
maxVideoViews = d3.max(data, function(d){ return d.VideoViews; });
maxSubscribers = d3.max(data, function(d){ return d.Subscribers; });
var nestedData = d3.nest()
.key(function(d){ return d.Rating; })
.entries(data);
nestedData.forEach(function(d) {
drawChart(d.key, d.values);
});
});
function highlightUser() {
var sel = document.getElementById('user');
var selectedUser = sel.options[sel.selectedIndex].value;
var lines = d3.selectAll(".barcode-line")
.style("opacity", function(d) { return d.User==selectedUser ? 1 : 0.05; });
lines.filter(function(d){ return d.User==selectedUser; })
.raise();
};
function drawChart(key, data) {
var className = "." + key;
var width = 800;
var height = 40;
var margin;
if (className == ".A-plus") {
margin = {"top": 50, "left": 150, "right": 100, "bottom": 0,}
} else {
margin = {"top": 20, "left": 150, "right": 100, "bottom": 0,}
};
var strokeWidth = 3;
var n = data.length;
var div = d3.select(className).append("div")
var svg = div.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
if (className == ".A-plus") {
svg.append("text")
.text("Rating")
.attr("class", "axis-label")
.attr("x", 0)
.attr("y", 20)
.style("text-anchor", "start");
svg.append("text")
.text("Views (billions)")
.attr("class", "axis-label")
.attr("x", (margin.left/2) + width/4)
.attr("y", 20)
.style("text-anchor", "middle");
svg.append("text")
.text("Subscribers (millions)")
.attr("class", "axis-label")
.attr("x", (margin.left + width/2) + width/4)
.attr("y", 20)
.style("text-anchor", "middle");;
};
svg.append("text")
.text(key)
.attr("x", 0)
.attr("y", margin.top + height/2)
.style("fill", "black")
svg.append("text")
.text("(n="+n+")")
.attr("x", 0)
.attr("y", margin.top + height/2 + 16)
.style("fill", "black")
var scaleVideoViews = d3.scaleLinear()
.range([0,width/2])
.domain([0,maxVideoViews]);
var xAxisVideoViews = d3.axisTop(scaleVideoViews).tickFormat(formatBillions);
var gXAxisVideoViews = svg.append("g")
.attr("transform", "translate(" + (margin.left/2) + "," + margin.top + ")")
.call(xAxisVideoViews);
var gVideoViews = svg.append("g")
.attr("transform", "translate(" + (margin.left/2) + "," + margin.top + ")");
gVideoViews.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("class", "barcode-line")
.attr("x1", function(d){ return scaleVideoViews(d.VideoViews); })
.attr("y1", 0)
.attr("x2", function(d){ return scaleVideoViews(d.VideoViews); })
.attr("y2", height)
.style("opacity", 0.2)
.style("stroke-width", strokeWidth)
.style("stroke", "PaleVioletRed");
var scaleSubscribers = d3.scaleLinear()
.range([0,width/2])
.domain([0,maxSubscribers]);
var xAxisSubscribers = d3.axisTop(scaleSubscribers).tickFormat(formatMillions);
var gXAxisSubscribers = svg.append("g")
.attr("transform", "translate(" + (margin.left + (width/2)) + "," + margin.top + ")")
.call(xAxisSubscribers);
var gSubscribers = svg.append("g")
.attr("transform", "translate(" + (margin.left + (width/2)) + "," + margin.top + ")");
gSubscribers.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("class", "barcode-line")
.attr("x1", function(d){ return scaleSubscribers(d.Subscribers); })
.attr("y1", 0)
.attr("x2", function(d){ return scaleSubscribers(d.Subscribers); })
.attr("y2", height)
.style("opacity", 0.2)
.style("stroke-width", strokeWidth)
.style("stroke", "OliveDrab");
d3.selectAll(".barcode-line")
.on("mouseover", function(d){
d3.select("#user").property('value', d.User);
highlightUser();
})
.on("mouseout", function(d){
d3.selectAll(".barcode-line").style("opacity", 0.2);
})
}
function convertTextToNumbers(d) {
d.Rank = +d.Rank;
d.Subscribers = +d.Subscribers;
d.VideoViews = +d.VideoViews;
return d;
};
</script>
</body>