Part of the video course: D3.js in Motion.
An example scatter plot with color legend using D3 and d3-legend.
This shows the “Iris” dataset. Originally published at UCI Machine Learning Repository: Iris Data Set, this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations. Each row of the table represents an iris flower, including its species and dimensions of its botanical parts, sepal and petal, in centimeters.
forked from curran‘s block: Stylized Scatter Plot with Color Legend
forked from anonymous‘s block: Stylized Scatter Plot with Color Legend
forked from SSabu‘s block: Global Cities Scatterplot
<!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: 28pt;
font-family: sans-serif;
}
.axis-label, .legend-label {
fill: #635F5D;
font-size: 50pt;
font-family: sans-serif;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
const xValue = d => d.lng;
const xLabel = 'Longitude';
const yValue = d => d.lat;
const yLabel = 'Latitude';
// const colorValue = d => d.species;
// const colorLabel = 'Species';
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);
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.lat = +d.lat;
d.lng = +d.lng;
return d;
};
d3.csv('citiesSample.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.3)
.attr('r', 1);
xAxisG.call(xAxis);
yAxisG.call(yAxis);
colorLegendG.call(colorLegend)
.selectAll('.cell text')
.attr('dy', '0.1em');
});
</script>
</body>
</html>
sepalLength,sepalWidth,petalLength,petalWidth,species
5.1,3.5,1.4,0.2,setosa
4.9,3.0,1.4,0.2,setosa
4.7,3.2,1.3,0.2,setosa
4.6,3.1,1.5,0.2,setosa
5.0,3.6,1.4,0.2,setosa
5.4,3.9,1.7,0.4,setosa
4.6,3.4,1.4,0.3,setosa
5.0,3.4,1.5,0.2,setosa
4.4,2.9,1.4,0.2,setosa
4.9,3.1,1.5,0.1,setosa
5.4,3.7,1.5,0.2,setosa
4.8,3.4,1.6,0.2,setosa
4.8,3.0,1.4,0.1,setosa
4.3,3.0,1.1,0.1,setosa
5.8,4.0,1.2,0.2,setosa
5.7,4.4,1.5,0.4,setosa
5.4,3.9,1.3,0.4,setosa
5.1,3.5,1.4,0.3,setosa
5.7,3.8,1.7,0.3,setosa
5.1,3.8,1.5,0.3,setosa
5.4,3.4,1.7,0.2,setosa
5.1,3.7,1.5,0.4,setosa
4.6,3.6,1.0,0.2,setosa
5.1,3.3,1.7,0.5,setosa
4.8,3.4,1.9,0.2,setosa
5.0,3.0,1.6,0.2,setosa
5.0,3.4,1.6,0.4,setosa
5.2,3.5,1.5,0.2,setosa
5.2,3.4,1.4,0.2,setosa
4.7,3.2,1.6,0.2,setosa
4.8,3.1,1.6,0.2,setosa
5.4,3.4,1.5,0.4,setosa
5.2,4.1,1.5,0.1,setosa
5.5,4.2,1.4,0.2,setosa
4.9,3.1,1.5,0.1,setosa
5.0,3.2,1.2,0.2,setosa
5.5,3.5,1.3,0.2,setosa
4.9,3.1,1.5,0.1,setosa
4.4,3.0,1.3,0.2,setosa
5.1,3.4,1.5,0.2,setosa
5.0,3.5,1.3,0.3,setosa
4.5,2.3,1.3,0.3,setosa
4.4,3.2,1.3,0.2,setosa
5.0,3.5,1.6,0.6,setosa
5.1,3.8,1.9,0.4,setosa
4.8,3.0,1.4,0.3,setosa
5.1,3.8,1.6,0.2,setosa
4.6,3.2,1.4,0.2,setosa
5.3,3.7,1.5,0.2,setosa
5.0,3.3,1.4,0.2,setosa
7.0,3.2,4.7,1.4,versicolor
6.4,3.2,4.5,1.5,versicolor
6.9,3.1,4.9,1.5,versicolor
5.5,2.3,4.0,1.3,versicolor
6.5,2.8,4.6,1.5,versicolor
5.7,2.8,4.5,1.3,versicolor
6.3,3.3,4.7,1.6,versicolor
4.9,2.4,3.3,1.0,versicolor
6.6,2.9,4.6,1.3,versicolor
5.2,2.7,3.9,1.4,versicolor
5.0,2.0,3.5,1.0,versicolor
5.9,3.0,4.2,1.5,versicolor
6.0,2.2,4.0,1.0,versicolor
6.1,2.9,4.7,1.4,versicolor
5.6,2.9,3.6,1.3,versicolor
6.7,3.1,4.4,1.4,versicolor
5.6,3.0,4.5,1.5,versicolor
5.8,2.7,4.1,1.0,versicolor
6.2,2.2,4.5,1.5,versicolor
5.6,2.5,3.9,1.1,versicolor
5.9,3.2,4.8,1.8,versicolor
6.1,2.8,4.0,1.3,versicolor
6.3,2.5,4.9,1.5,versicolor
6.1,2.8,4.7,1.2,versicolor
6.4,2.9,4.3,1.3,versicolor
6.6,3.0,4.4,1.4,versicolor
6.8,2.8,4.8,1.4,versicolor
6.7,3.0,5.0,1.7,versicolor
6.0,2.9,4.5,1.5,versicolor
5.7,2.6,3.5,1.0,versicolor
5.5,2.4,3.8,1.1,versicolor
5.5,2.4,3.7,1.0,versicolor
5.8,2.7,3.9,1.2,versicolor
6.0,2.7,5.1,1.6,versicolor
5.4,3.0,4.5,1.5,versicolor
6.0,3.4,4.5,1.6,versicolor
6.7,3.1,4.7,1.5,versicolor
6.3,2.3,4.4,1.3,versicolor
5.6,3.0,4.1,1.3,versicolor
5.5,2.5,4.0,1.3,versicolor
5.5,2.6,4.4,1.2,versicolor
6.1,3.0,4.6,1.4,versicolor
5.8,2.6,4.0,1.2,versicolor
5.0,2.3,3.3,1.0,versicolor
5.6,2.7,4.2,1.3,versicolor
5.7,3.0,4.2,1.2,versicolor
5.7,2.9,4.2,1.3,versicolor
6.2,2.9,4.3,1.3,versicolor
5.1,2.5,3.0,1.1,versicolor
5.7,2.8,4.1,1.3,versicolor
6.3,3.3,6.0,2.5,virginica
5.8,2.7,5.1,1.9,virginica
7.1,3.0,5.9,2.1,virginica
6.3,2.9,5.6,1.8,virginica
6.5,3.0,5.8,2.2,virginica
7.6,3.0,6.6,2.1,virginica
4.9,2.5,4.5,1.7,virginica
7.3,2.9,6.3,1.8,virginica
6.7,2.5,5.8,1.8,virginica
7.2,3.6,6.1,2.5,virginica
6.5,3.2,5.1,2.0,virginica
6.4,2.7,5.3,1.9,virginica
6.8,3.0,5.5,2.1,virginica
5.7,2.5,5.0,2.0,virginica
5.8,2.8,5.1,2.4,virginica
6.4,3.2,5.3,2.3,virginica
6.5,3.0,5.5,1.8,virginica
7.7,3.8,6.7,2.2,virginica
7.7,2.6,6.9,2.3,virginica
6.0,2.2,5.0,1.5,virginica
6.9,3.2,5.7,2.3,virginica
5.6,2.8,4.9,2.0,virginica
7.7,2.8,6.7,2.0,virginica
6.3,2.7,4.9,1.8,virginica
6.7,3.3,5.7,2.1,virginica
7.2,3.2,6.0,1.8,virginica
6.2,2.8,4.8,1.8,virginica
6.1,3.0,4.9,1.8,virginica
6.4,2.8,5.6,2.1,virginica
7.2,3.0,5.8,1.6,virginica
7.4,2.8,6.1,1.9,virginica
7.9,3.8,6.4,2.0,virginica
6.4,2.8,5.6,2.2,virginica
6.3,2.8,5.1,1.5,virginica
6.1,2.6,5.6,1.4,virginica
7.7,3.0,6.1,2.3,virginica
6.3,3.4,5.6,2.4,virginica
6.4,3.1,5.5,1.8,virginica
6.0,3.0,4.8,1.8,virginica
6.9,3.1,5.4,2.1,virginica
6.7,3.1,5.6,2.4,virginica
6.9,3.1,5.1,2.3,virginica
5.8,2.7,5.1,1.9,virginica
6.8,3.2,5.9,2.3,virginica
6.7,3.3,5.7,2.5,virginica
6.7,3.0,5.2,2.3,virginica
6.3,2.5,5.0,1.9,virginica
6.5,3.0,5.2,2.0,virginica
6.2,3.4,5.4,2.3,virginica
5.9,3.0,5.1,1.8,virginica
Country Name,2016
Aruba,41.304
Afghanistan,27.132
Angola,44.819
Albania,58.376
Andorra,84.612
United Arab Emirates,85.804
Argentina,91.893
Armenia,62.558
American Samoa,87.148
Antigua and Barbuda,23.393
Australia,89.554
Austria,66.032
Azerbaijan,54.895
Burundi,12.359
Belgium,97.897
Benin,44.395
Burkina Faso,30.688
Bangladesh,35.035
Bulgaria,74.266
Bahrain,88.835
"Bahamas, The",82.951
Bosnia and Herzegovina,39.94
Belarus,77.046
Belize,43.845
Bermuda,100
Bolivia,68.911
Brazil,85.933
Barbados,31.415
Brunei Darussalam,77.505
Bhutan,39.377
Botswana,57.71
Central African Republic,40.332
Canada,82.006
Switzerland,73.99
Chile,89.697
China,56.778
Cote d'Ivoire,54.869
Cameroon,54.938
"Congo, Dem. Rep.",43.015
"Congo, Rep.",65.798
Colombia,76.708
Comoros,28.412
Cabo Verde,66.187
Costa Rica,77.675
Caribbean small states,42.57049657
Cuba,77.184
Curacao,89.241
Cayman Islands,100
Cyprus,66.84
Czech Republic,72.98
Germany,75.51
Djibouti,77.43
Dominica,69.82
Denmark,87.847
Dominican Republic,79.841
Algeria,71.304
Ecuador,63.976
"Egypt, Arab Rep.",43.222
Eritrea,23.094
Spain,79.802
Estonia,67.468
Ethiopia,19.922
Finland,84.358
Fiji,54.099
France,79.75
Faroe Islands,42.187
"Micronesia, Fed. Sts.",22.481
Gabon,87.366
United Kingdom,82.835
Georgia,53.826
Ghana,54.682
Gibraltar,100
Guinea,37.651
"Gambia, The",60.224
Guinea-Bissau,50.094
Equatorial Guinea,40.103
Greece,78.329
Grenada,35.616
Greenland,86.808
Guatemala,52.03
Guam,94.593
Guyana,28.661
"Hong Kong SAR, China",100
Honduras,55.315
Croatia,59.284
Haiti,59.794
Hungary,71.672
India,33.136
Ireland,63.535
"Iran, Islamic Rep.",73.879
Iraq,69.592
Iceland,94.23
Israel,92.205
Italy,69.116
Jamaica,55.03
Jordan,83.905
Japan,93.928
Kazakhstan,53.229
Kenya,26.055
Kyrgyz Republic,35.85
Cambodia,20.945
Kiribati,44.447
St. Kitts and Nevis,32.153
"Korea, Rep.",82.592
Kuwait,98.358
Lao PDR,39.654
Lebanon,87.914
Liberia,50.1
Libya,78.754
St. Lucia,18.54
Latin America & Caribbean,80.08037347
Liechtenstein,14.283
Sri Lanka,18.407
Lesotho,27.84
Lithuania,66.512
Luxembourg,90.432
Latvia,67.361
"Macao SAR, China",100
St. Martin (French part),
Morocco,60.685
Monaco,100
Moldova,45.089
Madagascar,35.741
Maldives,46.54
Middle East & North Africa,64.50663811
Mexico,79.517
Marshall Islands,72.94
"Macedonia, FYR",57.204
Mali,40.683
Malta,95.529
Myanmar,34.65
Montenegro,64.223
Mongolia,72.823
Northern Mariana Islands,89.209
Mozambique,32.508
Mauritania,60.446
Mauritius,39.548
Malawi,16.454
Malaysia,75.37
Namibia,47.625
New Caledonia,70.738
Niger,19.01
Nigeria,48.597
Nicaragua,59.107
Netherlands,91.032
Norway,80.734
Nepal,18.995
Nauru,100
New Zealand,86.322
Oman,78.088
Pakistan,39.224
Panama,66.895
Peru,78.924
Philippines,44.289
Palau,87.636
Papua New Guinea,13.039
Poland,60.531
Puerto Rico,93.569
"Korea, Dem. People’s Rep.",61.048
Portugal,64.017
Paraguay,59.924
West Bank and Gaza,75.481
French Polynesia,55.802
Qatar,99.317
Romania,54.749
Russian Federation,74.101
Rwanda,29.775
South Asia,33.45644204
Saudi Arabia,83.331
Sudan,34.007
Senegal,44.065
Singapore,100
Solomon Islands,22.779
Sierra Leone,40.318
El Salvador,67.189
San Marino,94.216
Somalia,40.03
Serbia,55.668
South Sudan,19.03
Sub-Saharan Africa,38.26772557
Sao Tome and Principe,65.647
Suriname,66.015
Slovak Republic,53.468
Slovenia,49.627
Sweden,85.964
Swaziland,21.315
Sint Maarten (Dutch part),100
Seychelles,54.214
Syrian Arab Republic,58.061
Turks and Caicos Islands,92.502
Chad,22.618
Togo,40.463
Thailand,51.54
Tajikistan,26.891
Turkmenistan,50.396
Timor-Leste,33.401
Tonga,23.801
Trinidad and Tobago,8.352
Tunisia,67.047
Turkey,73.887
Tuvalu,60.62
Tanzania,32.316
Uganda,16.444
Ukraine,69.915
Uruguay,95.46
United States,81.788
Uzbekistan,36.479
St. Vincent and the Grenadines,50.899
"Venezuela, RB",89.043
British Virgin Islands,46.502
Virgin Islands (U.S.),95.459
Vietnam,34.236
Vanuatu,26.441
Samoa,18.955
Kosovo,
"Yemen, Rep.",35.187
South Africa,65.295
Zambia,41.379
Zimbabwe,32.277