Skip to content

Instantly share code, notes, and snippets.

@rdbcasillas

rdbcasillas/haberman.csv

Last active October 29, 2017 07:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rdbcasillas/a1d8def6810c6319fa118aa40aea0a8a to your computer and use it in GitHub Desktop.
Save rdbcasillas/a1d8def6810c6319fa118aa40aea0a8a to your computer and use it in GitHub Desktop.
Download ZIP
d3 scatterplots for breast cancer and iris datasets
Raw
haberman.csv
Age Year Nodes Status
30 64 1 1
30 62 3 1
30 65 0 1
31 59 2 1
31 65 4 1
33 58 10 1
33 60 0 1
34 59 0 2
34 66 9 2
34 58 30 1
34 60 1 1
34 61 10 1
34 67 7 1
34 60 0 1
35 64 13 1
35 63 0 1
36 60 1 1
36 69 0 1
37 60 0 1
37 63 0 1
37 58 0 1
37 59 6 1
37 60 15 1
37 63 0 1
38 69 21 2
38 59 2 1
38 60 0 1
38 60 0 1
38 62 3 1
38 64 1 1
38 66 0 1
38 66 11 1
38 60 1 1
38 67 5 1
39 66 0 2
39 63 0 1
39 67 0 1
39 58 0 1
39 59 2 1
39 63 4 1
40 58 2 1
40 58 0 1
40 65 0 1
41 60 23 2
41 64 0 2
41 67 0 2
41 58 0 1
41 59 8 1
41 59 0 1
41 64 0 1
41 69 8 1
41 65 0 1
41 65 0 1
42 69 1 2
42 59 0 2
42 58 0 1
42 60 1 1
42 59 2 1
42 61 4 1
42 62 20 1
42 65 0 1
42 63 1 1
43 58 52 2
43 59 2 2
43 64 0 2
43 64 0 2
43 63 14 1
43 64 2 1
43 64 3 1
43 60 0 1
43 63 2 1
43 65 0 1
43 66 4 1
44 64 6 2
44 58 9 2
44 63 19 2
44 61 0 1
44 63 1 1
44 61 0 1
44 67 16 1
45 65 6 2
45 66 0 2
45 67 1 2
45 60 0 1
45 67 0 1
45 59 14 1
45 64 0 1
45 68 0 1
45 67 1 1
46 58 2 2
46 69 3 2
46 62 5 2
46 65 20 2
46 62 0 1
46 58 3 1
46 63 0 1
47 63 23 2
47 62 0 2
47 65 0 2
47 61 0 1
47 63 6 1
47 66 0 1
47 67 0 1
47 58 3 1
47 60 4 1
47 68 4 1
47 66 12 1
48 58 11 2
48 58 11 2
48 67 7 2
48 61 8 1
48 62 2 1
48 64 0 1
48 66 0 1
49 63 0 2
49 64 10 2
49 61 1 1
49 62 0 1
49 66 0 1
49 60 1 1
49 62 1 1
49 63 3 1
49 61 0 1
49 67 1 1
50 63 13 2
50 64 0 2
50 59 0 1
50 61 6 1
50 61 0 1
50 63 1 1
50 58 1 1
50 59 2 1
50 61 0 1
50 64 0 1
50 65 4 1
50 66 1 1
51 59 13 2
51 59 3 2
51 64 7 1
51 59 1 1
51 65 0 1
51 66 1 1
52 69 3 2
52 59 2 2
52 62 3 2
52 66 4 2
52 61 0 1
52 63 4 1
52 69 0 1
52 60 4 1
52 60 5 1
52 62 0 1
52 62 1 1
52 64 0 1
52 65 0 1
52 68 0 1
53 58 4 2
53 65 1 2
53 59 3 2
53 60 9 2
53 63 24 2
53 65 12 2
53 58 1 1
53 60 1 1
53 60 2 1
53 61 1 1
53 63 0 1
54 60 11 2
54 65 23 2
54 65 5 2
54 68 7 2
54 59 7 1
54 60 3 1
54 66 0 1
54 67 46 1
54 62 0 1
54 69 7 1
54 63 19 1
54 58 1 1
54 62 0 1
55 63 6 2
55 68 15 2
55 58 1 1
55 58 0 1
55 58 1 1
55 66 18 1
55 66 0 1
55 69 3 1
55 69 22 1
55 67 1 1
56 65 9 2
56 66 3 2
56 60 0 1
56 66 2 1
56 66 1 1
56 67 0 1
56 60 0 1
57 61 5 2
57 62 14 2
57 64 1 2
57 64 9 1
57 69 0 1
57 61 0 1
57 62 0 1
57 63 0 1
57 64 0 1
57 64 0 1
57 67 0 1
58 59 0 1
58 60 3 1
58 61 1 1
58 67 0 1
58 58 0 1
58 58 3 1
58 61 2 1
59 62 35 2
59 60 0 1
59 63 0 1
59 64 1 1
59 64 4 1
59 64 0 1
59 64 7 1
59 67 3 1
60 59 17 2
60 65 0 2
60 61 1 1
60 67 2 1
60 61 25 1
60 64 0 1
61 62 5 2
61 65 0 2
61 68 1 2
61 59 0 1
61 59 0 1
61 64 0 1
61 65 8 1
61 68 0 1
61 59 0 1
62 59 13 2
62 58 0 2
62 65 19 2
62 62 6 1
62 66 0 1
62 66 0 1
62 58 0 1
63 60 1 2
63 61 0 1
63 62 0 1
63 63 0 1
63 63 0 1
63 66 0 1
63 61 9 1
63 61 28 1
64 58 0 1
64 65 22 1
64 66 0 1
64 61 0 1
64 68 0 1
65 58 0 2
65 61 2 2
65 62 22 2
65 66 15 2
65 58 0 1
65 64 0 1
65 67 0 1
65 59 2 1
65 64 0 1
65 67 1 1
66 58 0 2
66 61 13 2
66 58 0 1
66 58 1 1
66 68 0 1
67 64 8 2
67 63 1 2
67 66 0 1
67 66 0 1
67 61 0 1
67 65 0 1
68 67 0 1
68 68 0 1
69 67 8 2
69 60 0 1
69 65 0 1
69 66 0 1
70 58 0 2
70 58 4 2
70 66 14 1
70 67 0 1
70 68 0 1
70 59 8 1
70 63 0 1
71 68 2 1
72 63 0 2
72 58 0 1
72 64 0 1
72 67 3 1
73 62 0 1
73 68 0 1
74 65 3 2
74 63 0 1
75 62 1 1
76 67 0 1
77 65 3 1
78 65 1 2
83 58 2 2
Raw
index.html
<!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>
<title>Basic Scatter Plot</title>
<style>
#svg2 {
float: right;
border: 1px solid black;
}
#svg1 {
border: 1px solid black;
}
</style>
</head>
<body>
<svg id="svg1" width="600" height="300"></svg>
<svg id="svg2" width="600" height="300"></svg>
<script>
const svg = d3.select('#svg1');
const svg2 = d3.select('#svg2');
// capture width and height of the svg
const width = svg.attr('width');
const height = svg.attr('height');
// create a margin object with left, right, top and bottom attributes
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
// use the margin object to create compressed width & height of g elements.
const innerWidth = width - margin.left - margin.right
const innerHeight = height - margin.top - margin.bottom
// define x-axis and y-axis values for both scatterplots
const xValue = d => d.Age;
const yValue = d => d.Nodes;
const x2Value = d => d.sepalLength;
const y2Value = d => d.petalLength;
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
// Create g elements inside svgs and shift them 20px inside from left and top.
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const g2 = svg2.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// Make sure datasets have numeric values
const row = d => {
d.Age = +d.Age;
d.Nodes = +d.Nodes;
d.Status = +d.Status
return d;
};
const row2 = d => {
d.petalLength = +d.petalLength;
d.petalWidth = +d.petalWidth;
d.sepalLength = +d.sepalLength;
d.sepalWidth = +d.sepalWidth;
console.log(d);
return d;
};
d3.csv('haberman.csv', row, data => {
// for scatterplot scales, we use g elements width and height & forget about svg element attributes
xScale
.domain(d3.extent(data, xValue))
.range([0, innerWidth]);
yScale
.domain(d3.extent(data, yValue))
.range([innerHeight, 0]);
g.selectAll('circle').data(data)
.enter().append('circle')
.attr('cx', d => xScale(xValue(d)))
.attr('cy', d => yScale(yValue(d)))
.attr('r', 5)
.attr('opacity', 0.6)
.attr('fill', function(d) {
if (d.Status == 1) {
return "green";
}
else return "red";
});
});
d3.csv('iris.csv', row2, data2 => {
xScale
.domain(d3.extent(data2, x2Value))
.range([0, innerWidth]);
yScale
.domain(d3.extent(data2, y2Value))
.range([innerHeight, 0]);
g2.selectAll('circle').data(data2)
.enter().append('circle')
.attr('cx', d => xScale(x2Value(d)))
.attr('cy', d => yScale(y2Value(d)))
.attr('fill', function(d){
if (d.species=="Iris-setosa"){
return "green";
}
else if(d.species=="Iris-versicolor"){
return "purple";
}
else { return "orange";}
})
.attr('r', 5);
});
</script>
</body>
</html>
Raw
iris.csv
sepalLength sepalWidth petalLength petalWidth species
5.1 3.5 1.4 0.2 Iris-setosa
4.9 3.0 1.4 0.2 Iris-setosa
4.7 3.2 1.3 0.2 Iris-setosa
4.6 3.1 1.5 0.2 Iris-setosa
5.0 3.6 1.4 0.2 Iris-setosa
5.4 3.9 1.7 0.4 Iris-setosa
4.6 3.4 1.4 0.3 Iris-setosa
5.0 3.4 1.5 0.2 Iris-setosa
4.4 2.9 1.4 0.2 Iris-setosa
4.9 3.1 1.5 0.1 Iris-setosa
5.4 3.7 1.5 0.2 Iris-setosa
4.8 3.4 1.6 0.2 Iris-setosa
4.8 3.0 1.4 0.1 Iris-setosa
4.3 3.0 1.1 0.1 Iris-setosa
5.8 4.0 1.2 0.2 Iris-setosa
5.7 4.4 1.5 0.4 Iris-setosa
5.4 3.9 1.3 0.4 Iris-setosa
5.1 3.5 1.4 0.3 Iris-setosa
5.7 3.8 1.7 0.3 Iris-setosa
5.1 3.8 1.5 0.3 Iris-setosa
5.4 3.4 1.7 0.2 Iris-setosa
5.1 3.7 1.5 0.4 Iris-setosa
4.6 3.6 1.0 0.2 Iris-setosa
5.1 3.3 1.7 0.5 Iris-setosa
4.8 3.4 1.9 0.2 Iris-setosa
5.0 3.0 1.6 0.2 Iris-setosa
5.0 3.4 1.6 0.4 Iris-setosa
5.2 3.5 1.5 0.2 Iris-setosa
5.2 3.4 1.4 0.2 Iris-setosa
4.7 3.2 1.6 0.2 Iris-setosa
4.8 3.1 1.6 0.2 Iris-setosa
5.4 3.4 1.5 0.4 Iris-setosa
5.2 4.1 1.5 0.1 Iris-setosa
5.5 4.2 1.4 0.2 Iris-setosa
4.9 3.1 1.5 0.1 Iris-setosa
5.0 3.2 1.2 0.2 Iris-setosa
5.5 3.5 1.3 0.2 Iris-setosa
4.9 3.1 1.5 0.1 Iris-setosa
4.4 3.0 1.3 0.2 Iris-setosa
5.1 3.4 1.5 0.2 Iris-setosa
5.0 3.5 1.3 0.3 Iris-setosa
4.5 2.3 1.3 0.3 Iris-setosa
4.4 3.2 1.3 0.2 Iris-setosa
5.0 3.5 1.6 0.6 Iris-setosa
5.1 3.8 1.9 0.4 Iris-setosa
4.8 3.0 1.4 0.3 Iris-setosa
5.1 3.8 1.6 0.2 Iris-setosa
4.6 3.2 1.4 0.2 Iris-setosa
5.3 3.7 1.5 0.2 Iris-setosa
5.0 3.3 1.4 0.2 Iris-setosa
7.0 3.2 4.7 1.4 Iris-versicolor
6.4 3.2 4.5 1.5 Iris-versicolor
6.9 3.1 4.9 1.5 Iris-versicolor
5.5 2.3 4.0 1.3 Iris-versicolor
6.5 2.8 4.6 1.5 Iris-versicolor
5.7 2.8 4.5 1.3 Iris-versicolor
6.3 3.3 4.7 1.6 Iris-versicolor
4.9 2.4 3.3 1.0 Iris-versicolor
6.6 2.9 4.6 1.3 Iris-versicolor
5.2 2.7 3.9 1.4 Iris-versicolor
5.0 2.0 3.5 1.0 Iris-versicolor
5.9 3.0 4.2 1.5 Iris-versicolor
6.0 2.2 4.0 1.0 Iris-versicolor
6.1 2.9 4.7 1.4 Iris-versicolor
5.6 2.9 3.6 1.3 Iris-versicolor
6.7 3.1 4.4 1.4 Iris-versicolor
5.6 3.0 4.5 1.5 Iris-versicolor
5.8 2.7 4.1 1.0 Iris-versicolor
6.2 2.2 4.5 1.5 Iris-versicolor
5.6 2.5 3.9 1.1 Iris-versicolor
5.9 3.2 4.8 1.8 Iris-versicolor
6.1 2.8 4.0 1.3 Iris-versicolor
6.3 2.5 4.9 1.5 Iris-versicolor
6.1 2.8 4.7 1.2 Iris-versicolor
6.4 2.9 4.3 1.3 Iris-versicolor
6.6 3.0 4.4 1.4 Iris-versicolor
6.8 2.8 4.8 1.4 Iris-versicolor
6.7 3.0 5.0 1.7 Iris-versicolor
6.0 2.9 4.5 1.5 Iris-versicolor
5.7 2.6 3.5 1.0 Iris-versicolor
5.5 2.4 3.8 1.1 Iris-versicolor
5.5 2.4 3.7 1.0 Iris-versicolor
5.8 2.7 3.9 1.2 Iris-versicolor
6.0 2.7 5.1 1.6 Iris-versicolor
5.4 3.0 4.5 1.5 Iris-versicolor
6.0 3.4 4.5 1.6 Iris-versicolor
6.7 3.1 4.7 1.5 Iris-versicolor
6.3 2.3 4.4 1.3 Iris-versicolor
5.6 3.0 4.1 1.3 Iris-versicolor
5.5 2.5 4.0 1.3 Iris-versicolor
5.5 2.6 4.4 1.2 Iris-versicolor
6.1 3.0 4.6 1.4 Iris-versicolor
5.8 2.6 4.0 1.2 Iris-versicolor
5.0 2.3 3.3 1.0 Iris-versicolor
5.6 2.7 4.2 1.3 Iris-versicolor
5.7 3.0 4.2 1.2 Iris-versicolor
5.7 2.9 4.2 1.3 Iris-versicolor
6.2 2.9 4.3 1.3 Iris-versicolor
5.1 2.5 3.0 1.1 Iris-versicolor
5.7 2.8 4.1 1.3 Iris-versicolor
6.3 3.3 6.0 2.5 Iris-virginica
5.8 2.7 5.1 1.9 Iris-virginica
7.1 3.0 5.9 2.1 Iris-virginica
6.3 2.9 5.6 1.8 Iris-virginica
6.5 3.0 5.8 2.2 Iris-virginica
7.6 3.0 6.6 2.1 Iris-virginica
4.9 2.5 4.5 1.7 Iris-virginica
7.3 2.9 6.3 1.8 Iris-virginica
6.7 2.5 5.8 1.8 Iris-virginica
7.2 3.6 6.1 2.5 Iris-virginica
6.5 3.2 5.1 2.0 Iris-virginica
6.4 2.7 5.3 1.9 Iris-virginica
6.8 3.0 5.5 2.1 Iris-virginica
5.7 2.5 5.0 2.0 Iris-virginica
5.8 2.8 5.1 2.4 Iris-virginica
6.4 3.2 5.3 2.3 Iris-virginica
6.5 3.0 5.5 1.8 Iris-virginica
7.7 3.8 6.7 2.2 Iris-virginica
7.7 2.6 6.9 2.3 Iris-virginica
6.0 2.2 5.0 1.5 Iris-virginica
6.9 3.2 5.7 2.3 Iris-virginica
5.6 2.8 4.9 2.0 Iris-virginica
7.7 2.8 6.7 2.0 Iris-virginica
6.3 2.7 4.9 1.8 Iris-virginica
6.7 3.3 5.7 2.1 Iris-virginica
7.2 3.2 6.0 1.8 Iris-virginica
6.2 2.8 4.8 1.8 Iris-virginica
6.1 3.0 4.9 1.8 Iris-virginica
6.4 2.8 5.6 2.1 Iris-virginica
7.2 3.0 5.8 1.6 Iris-virginica
7.4 2.8 6.1 1.9 Iris-virginica
7.9 3.8 6.4 2.0 Iris-virginica
6.4 2.8 5.6 2.2 Iris-virginica
6.3 2.8 5.1 1.5 Iris-virginica
6.1 2.6 5.6 1.4 Iris-virginica
7.7 3.0 6.1 2.3 Iris-virginica
6.3 3.4 5.6 2.4 Iris-virginica
6.4 3.1 5.5 1.8 Iris-virginica
6.0 3.0 4.8 1.8 Iris-virginica
6.9 3.1 5.4 2.1 Iris-virginica
6.7 3.1 5.6 2.4 Iris-virginica
6.9 3.1 5.1 2.3 Iris-virginica
5.8 2.7 5.1 1.9 Iris-virginica
6.8 3.2 5.9 2.3 Iris-virginica
6.7 3.3 5.7 2.5 Iris-virginica
6.7 3.0 5.2 2.3 Iris-virginica
6.3 2.5 5.0 1.9 Iris-virginica
6.5 3.0 5.2 2.0 Iris-virginica
6.2 3.4 5.4 2.3 Iris-virginica
5.9 3.0 5.1 1.8 Iris-virginica
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment