An example scatter plot with color legend using D3 and d3-legend.
forked from curran's block: Stylized Scatter Plot with Color Legend
license: mit |
An example scatter plot with color legend using D3 and d3-legend.
forked from curran's block: Stylized Scatter Plot with Color Legend
x | y | color | |
---|---|---|---|
1 | 2 | group1 | |
2 | 3 | group2 | |
2.5 | 4 | group2 | |
0.5 | 4.5 | group1 | |
6 | 3 | group1 | |
6.5 | 4 | group1 | |
7 | 2 | group1 | |
8 | 3 | group2 | |
8 | 3.5 | group2 |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> | |
<title>Basic Scatter Plot</title> | |
<style> | |
body { | |
margin: 0px; | |
} | |
.domain { | |
display: none; | |
} | |
.tick line { | |
stroke: #C0C0BB; | |
} | |
.tick text, .legendCells text { | |
fill: #8E8883; | |
font-size: 18pt; | |
font-family: sans-serif; | |
} | |
.axis-label, .legend-label { | |
fill: #635F5D; | |
font-size: 20pt; | |
font-family: sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<svg width="960" height="500"></svg> | |
<script> | |
const xValue = d => d.x; | |
//const xLabel = 'Sepal Length'; | |
const yValue = d => d.y; | |
//const yLabel = 'Petal Length'; | |
const colorValue = d => d.color; | |
const colorLabel = 'Group'; | |
const margin = { left: 120, right: 300, top: 20, bottom: 120 }; | |
const svg = d3.select('svg'); | |
const width = svg.attr('width'); | |
const height = svg.attr('height'); | |
const innerWidth = width - margin.left - margin.right; | |
const innerHeight = height - margin.top - margin.bottom; | |
const g = svg.append('g') | |
.attr('transform', `translate(${margin.left},${margin.top})`); | |
const xAxisG = g.append('g') | |
.attr('transform', `translate(0, ${innerHeight})`); | |
const yAxisG = g.append('g'); | |
const colorLegendG = g.append('g') | |
.attr('transform', `translate(${innerWidth + 60}, 150)`); | |
xAxisG.append('text') | |
.attr('class', 'axis-label') | |
.attr('x', innerWidth / 2) | |
.attr('y', 100) | |
//.text(xLabel); | |
yAxisG.append('text') | |
.attr('class', 'axis-label') | |
.attr('x', -innerHeight / 2) | |
.attr('y', -60) | |
.attr('transform', `rotate(-90)`) | |
.style('text-anchor', 'middle') | |
//.text(yLabel); | |
colorLegendG.append('text') | |
.attr('class', 'legend-label') | |
.attr('x', -30) | |
.attr('y', -40) | |
.text(colorLabel); | |
const xScale = d3.scaleLinear(); | |
const yScale = d3.scaleLinear(); | |
const colorScale = d3.scaleOrdinal() | |
.range(d3.schemeCategory10); | |
const xAxis = d3.axisBottom() | |
.scale(xScale) | |
.tickPadding(15) | |
.tickSize(-innerHeight); | |
const yAxis = d3.axisLeft() | |
.scale(yScale) | |
.ticks(5) | |
.tickPadding(15) | |
.tickSize(-innerWidth); | |
const colorLegend = d3.legendColor() | |
.scale(colorScale) | |
.shape('circle'); | |
const row = d => { | |
d.petalLength = +d.X; | |
//d.petalWidth = +d.petalWidth; | |
d.sepalLength = +d.y; | |
//d.sepalWidth = +d.sepalWidth; | |
return d; | |
}; | |
d3.csv('data.csv', row, data => { | |
xScale | |
.domain(d3.extent(data, xValue)) | |
.range([0, innerWidth]) | |
.nice(); | |
yScale | |
.domain(d3.extent(data, yValue)) | |
.range([innerHeight, 0]) | |
.nice(); | |
g.selectAll('circle').data(data) | |
.enter().append('circle') | |
.attr('cx', d => xScale(xValue(d))) | |
.attr('cy', d => yScale(yValue(d))) | |
.attr('fill', d => colorScale(colorValue(d))) | |
.attr('fill-opacity', 0.6) | |
.attr('r', 8); | |
//xAxisG.call(xAxis); | |
//yAxisG.call(yAxis); | |
colorLegendG.call(colorLegend) | |
.selectAll('.cell text') | |
.attr('dy', '0.1em'); | |
}); | |
</script> | |
</body> | |
</html> |