Built with blockbuilder.org
forked from js418's block: wine quality
forked from js418's block: wine quality test
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("font-family", "sans-serif")
.style("font-size", "10px")
.style("z-index", "10")
.style("visibility", "hidden");
var svg = d3.select('body').append('svg')
.attr('height', '500')
.attr('width', '1000');
var g1 = svg.append('g')
.attr("transform", "translate(80, 40)");
var g2 = svg.append('g')
.attr("transform", "translate(600, 40)");
var g3 = svg.append('g')
.attr("transform", "translate(600, 300)");
var x1 = d3.scaleLinear()
.range([0,400]);
var x2 = d3.scaleBand()
.range([0,300])
.paddingInner(0.2)
.align(0.1);
var y1 = d3.scaleLinear()
.range([400,0]);
var y2 = d3.scaleLinear()
.range([200,0]);
var quality_scale = d3.scaleOrdinal(d3.schemeCategory10);
d3.csv("red_wine.csv", type, function(d){
x1.domain(d3.extent(d, function (d){ return d.pH;})).nice();
y1.domain(d3.extent(d, function (d){ return d.density;})).nice();
quality_scale.domain(d3.extent(d, function (d){ return d.quality;}));
// add scatter plot x axis
g1.append("g")
.attr("class", "axis")
.attr("transform", "translate(0,400)")
.call(d3.axisBottom(x1).ticks(10))
.append("text")
.attr("x", 380)
.attr("y", -10)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("pH");
// add scatter plot y axis
g1.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y1).ticks(10))
.append("text")
.attr("x", 5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("density");
// add scatter points in scatter plot
g1.selectAll("circle")
.data(d)
.enter().append("circle")
.attr("opacity", 0.6)
.attr("cx", function(d) { return x1(d.pH); })
.attr("cy", function(d) { return y1(d.density);})
.attr("r", 4)
.style("fill", function(d) { return quality_scale(d.quality);})
.on("mouseover", function(d){
return tooltip.style("visibility", "visible")
.html("quality: " + d.quality + "<br/> " +
"pH: " + d.pH + "<br/> " +
"density: " + d.density);
})
.on("mousemove", function(d){
return tooltip.style("top", (event.pageY-10)+"px")
.style("left",(event.pageX+10)+"px")
.html("quality: " + d.quality + "<br/> " +
"pH: " + d.pH + "<br/> " +
"density: " + d.density);
})
.on("mouseout", function(d){
return tooltip.style("visibility", "hidden");
});
// add scatter plot title
g1.append("text")
.attr("x", 200)
.style("text-anchor", "middle")
.attr("y", 15)
.attr("font-size", 15)
.text("sample size: " + d.length);
// set up legend
var legend = g1.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(quality_scale.domain().sort())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 15 + ")"; });
legend.append("rect")
.attr("x", 400)
.attr("width", 10)
.attr("height", 10)
.attr("fill", quality_scale);
legend.append("text")
.attr("x", 390)
.attr("y", 9)
.attr("dy", "0.32em")
.text(function(d) { return "quality: "+ d; });
// calculate the mean value of y axis for bar chart
x2.domain(quality_scale.domain().sort());
var avg = [];
var pH_mean = d3.nest()
.key(function(d) { return d.quality; })
.rollup(function(v){
var t = d3.mean(v, function(d) { return d.pH; });
var f = d3.format(".3f");
avg.push(f(t));
return t;
})
.entries(d);
var barData = [];
for(k=0; k<avg.length;++k){
barData.push({quality:pH_mean[k].key, mean:avg[k]})
};
y2.domain(d3.extent(avg)).nice();
// add bar chart x axis
g2.append("g")
.attr("class", "axis")
.attr("transform", "translate(0,200)")
.call(d3.axisBottom(x2))
.append("text")
.attr("x", 305)
.attr("y", -10)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("quality");
// add bar chart y axis
g2.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y2).ticks(6))
.append("text")
.attr("x", 5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("pH");
// add bar in the bar chart
g2.selectAll("rect")
.data(barData)
.enter().append("rect")
.attr("x", function(d) { return x2(d.quality); })
.attr("y", function(d) { return 200-y2(d.mean); })
.attr("width", x2.bandwidth())
.attr("height", function(d) { return y2(d.mean); })
.attr("fill", function(d) { return quality_scale(d.quality); })
.on("mouseover", function(d){
return tooltip.style("visibility", "visible")
.html("average pH: " + d.mean);
})
.on("mousemove", function(d){
return tooltip.style("top", (event.pageY-10)+"px")
.style("left",(event.pageX+10)+"px")
.html("average pH: " + d.mean);
})
.on("mouseout", function(d){
return tooltip.style("visibility", "hidden");
});
//add title for bar chart
g2.append("text")
.attr("x", 150)
.style("text-anchor", "middle")
.attr("y", 15)
.attr("font-size", 15)
.text("average pH by quality");
//calculate the percentage for pie chart
var p = [];
var nest = d3.nest()
.key(function(d) { return d.quality; })
.rollup(function(v) {
p.push(v.length);
return v.length; })
.entries(d);
var pieData = [];
var pf = d3.format('.1%');
for(k=0; k<p.length;++k){
pieData.push({quality:nest[k].key, number:p[k]});
};
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.number; })
(pieData);
var arc = d3.arc()
.outerRadius(100)
.innerRadius(20)
.padAngle(0.03);
g3.selectAll("path")
.data(pie)
.enter()
.append("path")
.attr("transform", "translate(150,80)")
.attr("d", arc)
.attr("fill",function(d) { return quality_scale(d.data.quality);})
.on("mouseover", function(d){
return tooltip.style("visibility", "visible")
.html("quality: " + d.data.quality+"<br/>" +
"percentage: " + pf(d.value/d3.sum(p)));})
.on("mousemove", function(d){
return tooltip.style("top", (event.pageY-10)+"px")
.style("left",(event.pageX+10)+"px")
.html("quality: " + d.data.quality+"<br/>" +
"percentage: " + pf(d.value/d3.sum(p)));})
.on("mouseout", function(d){
return tooltip.style("visibility", "hidden")});
});
function type(d){
d.density = +d.density;
d.pH = +d.pH;
d.quality = +d.quality;
return d;
};
</script>
</body>
https://d3js.org/d3.v4.min.js