Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
wine category
<select onchange="loadData()" id="dataset">
<option>red_wine</option>
<option>white_wine</option>
</select>
y axis
<select onchange="loadData()" id="y_axis">
<option>fixed_acidity</option>
<option>volatile_acidity</option>
<option>citric_acid</option>
<option>residual_sugar</option>
<option>chlorides</option>
<option>free_sulfur_dioxide</option>
<option>total_sulfur_dioxide</option>
<option>density</option>
<option>pH</option>
<option>sulphates</option>
<option>alcohol</option>
</select>
<script>
var svg = d3.select('body').append('svg')
.attr('height', '1100')
.attr('width', '600');
var g1 = svg.append('g')
.attr("transform", "translate(20, 40)");
var g2 = svg.append('g')
.attr("transform", "translate(550, 40)");
var x1 = d3.scaleLinear()
.range([0,480]);
var x2 = d3.scaleBand()
.range([0,480])
.paddingInner(0.2)
.align(0.1);
var y = d3.scaleLinear()
.range([0,480]);
var loadData = function() {
var f = document.getElementById("dataset").selectedOptions[0].text;
var dataFile = f + ".csv";
d3.csv(dataFile, type, function(d){
});
}
function type(d){
d.fixed_acidity = +d.fixed_acidity;
d.volatile_acidity = +d.volatile_acidity;
d.citric_acid = +d.citric_acid;
d.residual_sugar = +d.residual_sugar;
d.chlorides = +d.chlorides;
d.free_sulfur_dioxide = +d.free_sulfur_dioxide;
d.total_sulfur_dioxide = +d.total_sulfur_dioxide;
d.density = +d.density;
d.pH = +d.pH;
d.sulphates = +d.sulphates;
d.alcohol = +d.alcohol;
d.quality = +d.quality;
return d;
};
</script>
</body>
https://d3js.org/d3.v4.min.js