Inspired by Figure 5.10(d) from Visualization Analysis and Design by Tamara Munzner
Built with blockbuilder.org
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
const svgObj = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 500)
const xValue=d=>d.x
const yValue=d=>d.y
const xScale = d3.scaleLinear()
const yScale = d3.scaleLinear()
const colorValue=d=>d.color
const type=d=>{
d.x=+d.x;
d.y=+d.y;
return d;
};
d3.csv('example.csv', type, data=>{
/*
xScale
.domain(d3.extent(data,xValue))
.range([0,svgObj.width])
.nice()
yScale
.domain(d3.extent(data,yValue))
.range([svgObj.Height,0])
.nice()*/
svgObj.selectAll('circle')
.data(data)
.enter().append('circle')
.attr('cx', d => xScale(xValue(d)))
.attr('cy', d => 500-yScale(yValue(d)))
.attr('fill', d => (colorValue(d)))
.attr('fill-opacity', 1)
.attr('r', 10);
})
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js