Skip to content

Instantly share code, notes, and snippets.

@silently
Last active September 9, 2019 15:00
Show Gist options
  • Save silently/1df306b31e50457369cda9fdafdf1ed0 to your computer and use it in GitHub Desktop.
Save silently/1df306b31e50457369cda9fdafdf1ed0 to your computer and use it in GitHub Desktop.
iris
license: mit
<!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; }
</style>
</head>
<body>
<script>
let svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
d3.csv("https://raw.githubusercontent.com/LyonDataViz/ECL-CDL-Dataviz/master/data/iris.csv", (err, dataset) => {
console.log(dataset);
// accessors
let sepalLength = d => d.sepal_length;
let sepalWidth = d => d.sepal_width;
let petalWidth = d => d.petal_width;
let species = d => d.species;
// scales
let xScale = d3.scaleLinear()
.domain([d3.min(dataset, sepalLength),
d3.max(dataset, sepalLength)])
.range([0, 400]);
let yScale = d3.scaleLinear()
.domain([d3.min(dataset, sepalWidth),
d3.max(dataset, sepalWidth)])
.range([0, 400]);
let rScale = d3.scaleLinear()
.domain([d3.min(dataset, petalWidth),
d3.max(dataset, petalWidth)])
.range([0, 10]);
let colorScale = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica"])
.range(d3.schemeCategory10);
// entry
let entry = svg.selectAll("circle").data(dataset).enter();
entry.append("circle")
.attr("cx", d => 50 + xScale(sepalLength(d)))
.attr("cy", d => 50 + yScale(sepalWidth(d)))
.attr("r", d => rScale(petalWidth(d)))
.attr("fill", d => colorScale(species(d)))
;
let xAxis = d3.axisLeft().scale(xScale);
let yAxis = d3.axisBottom().scale(yScale);
svg.append('g')
.attr('transform', 'translate(50, 50)')
.attr('class', 'x axis')
.call(xAxis);
svg.append('g')
.attr('transform', 'translate(50, 450)')
.attr('class', 'y axis')
.call(yAxis);
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment