Built with blockbuilder.org
forked from AlexMutiso's block: Group E - Data Visualization Assignment 3
forked from AlexMutiso's block: Group E - Data Visualization Assignment 3
xxxxxxxxxx
<html>
<meta charset="utf-8">
<style type="text/css" media="screen">
circle {
stroke: white;
}
text {
font-size: 0.9em;
font-family: 'Helvetica';
}
.label {
font-size: 1em;
}
.title {
font-size: 2em;
}
line, path {
stroke: #000;
fill: none;
shape-rendering: crispEdges;
}
circle {//fill: none; stroke-width: 2px;}
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
<script type="text/javascript" charset="utf-8">
var outerWidth = 800,
outerHeight = 600;
var margin = {"left": 70, "right": 70, "top": 100, "bottom": 90};
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var xColumn = "sepal_length",
yColumn = "petal_width",
rColumn = "sepal_length",
colorColumn = "species";
var minRadius = 1,
maxRadius = 13;
var xScale = d3.scale.linear().range([0, innerWidth]);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var rScale = d3.scale.linear().range([minRadius, maxRadius]);
var colorScale = d3.scale.category10();
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Axes group
var xAxisG = g.append("g")
.attr("transform", "translate(0," + innerHeight + ")");
var title = g.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(" + (innerWidth / 2) + "," + (-0.5*margin.top) + ")")
.attr("class", "title")
.text("Iris Dataset: A Plot of Petal Width Vs Sepal Length");
var xAxisLabel = xAxisG.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(" + (innerWidth / 2) + "," + (0.5*margin.bottom) + ")")
.attr("class", "label")
.text(xColumn + " (cm)");
var yAxisG = g.append("g");
var yAxisLabel = yAxisG.append("text")
.style("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("dy", "-3em")
.attr("dx", "-8em")
.attr("class", "label")
.text(yColumn + " (cm)");
// Axes
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
function render(data) {
xScale.domain(d3.extent(data, function(d) { return d[xColumn]; }));
yScale.domain([0, d3.max(data, function(d) { return d[yColumn]; })]);
rScale.domain(d3.extent(data, function(d) { return d[rColumn]; }));
xAxisG.call(xAxis);
console.log("HELLO");
yAxisG.call(yAxis);
// Bind
var circles = g.selectAll("circle").data(data);
// Enter
circles.enter().append("circle");
// Update
circles
.attr("r", function(d) { return rScale(d[rColumn]); })
.attr("cx", function(d) { return xScale(d[xColumn]); })
.attr("cy", function(d) { return yScale(d[yColumn]); })
.attr("fill", function(d) { return colorScale(d[colorColumn]); });
// Exit
circles.exit().remove();
}
function type(d) {
d.sepal_width = +d.sepal_width;
d.sepal_length = +d.sepal_length;
d.petal_width = +d.petal_width;
d.petal_length = +d.petal_length;
return d;
}
d3.csv("https://raw.githubusercontent.com/kamalnroy/ie/master/iris.csv", type, render);
</script>
</body>
</html>
https://d3js.org/d3.v3.min.js