apoorvpatne10/biostats.csv Secret

## biostats.csv

          
            Name
            Sex
            Age
            Height
            Weight

            
              Alex
                     "M"
              41
              74
              170

            
              Bert
                     "M"
              42
              68
              166

            
              Carl
                     "M"
              32
              70
              155

            
              Dave
                     "M"
              39
              72
              167

            
              Elly
                     "F"
              30
              66
              124

            
              Fran
                     "F"
              33
              66
              115

            
              Gwen
                     "F"
              26
              64
              121

            
              Hank
                     "M"
              30
              71
              158

            
              Ivan
                     "M"
              53
              72
              175

            
              Jake
                     "M"
              32
              69
              143

            
              Kate
                     "F"
              47
              69
              139

            
              Luke
                     "M"
              34
              72
              163

            
              Myra
                     "F"
              23
              62
              98

            
              Neil
                     "M"
              36
              75
              160

            
              Omar
                     "M"
              38
              70
              145

            
              Page
                     "F"
              31
              67
              135

            
              Quin
                     "M"
              29
              71
              176

            
              Ruth
                     "F"
              28
              65
              131

## bubble.js
var width = 1200;
var height = 800;
var RADIUS = 250;
var THRESHOLD = 31;

var svg = d3.select("#chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(0,0)");

var ageScale = d3.scaleSqrt().domain([1, 60]).range([5, 60]);
var redScale = d3.scaleSqrt().domain([10, 60]).range([0, 255]);
var greenScale = d3.scaleSqrt().domain([0, 60]).range([255, 0]);

var angle = Math.random() * Math.PI * 2;

var forceX = d3.forceX(d => {
    x = Math.cos(angle) * (RADIUS + 100);
    let age = parseInt(d.Age);
    let threshold = parseInt(THRESHOLD);

    if (age <= threshold) {
        return x + width / 2;
    }
    else {
        return width / 2;
    }
}).strength(0.05);

var forceY = d3.forceY(d => {
    y = Math.sin(angle) * (RADIUS + 100);
    let age = parseInt(d.Age);
    let threshold = parseInt(THRESHOLD);

    if (age <= threshold) {
        return y + height / 2;
    }
    else {
        return height / 2;
    }
}).strength(0.05);

var forceCollide = d3.forceCollide(d => {
    return ageScale(d.Age) + 2;
});


var simulation = d3.forceSimulation()
    .force("x", forceX)
    .force("y", forceY)
    .force("collide", forceCollide);

function compare(a, b) {
    if (a.Age > b.Age) {
        return -1;
    }
    if (a.Age < b.Age) {
        return 1;
    }
    return 0;
}

d3.csv("biostats.csv", function (datapoints) {
    svg.append('circle')
        .attr('cx', width / 2)
        .attr('cy', height / 2)
        .attr('r', RADIUS)
        .attr('stroke', 'black')
        .attr('opacity', 0.2);

    var circles = svg.selectAll(".artist")
        .data(datapoints)
        .enter().append("circle")
        .attr("class", "artist")
        .attr("r", d => {
            return ageScale(d.Age)
        })
        .attr("fill", d => {
            return `rgb(${redScale(d.Age)}, 0, ${greenScale(d.Age)})`;
            // return 'black';
        })
        .on('click', d => {
            console.log(d);
        });

    datapoints.sort(compare);
    console.log(datapoints);

    simulation.nodes(datapoints).on('tick', ticked);

    function ticked() {
        circles.attr("cx", d => d.x).attr("cy", d => d.y);
    }
});


## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <style>
        svg {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div id="chart">
    </div>

    <script src="main.js"></script>
</body>

</html>
Name	Sex	Age	Height	Weight
Alex	"M"	41	74	170
Bert	"M"	42	68	166
Carl	"M"	32	70	155
Dave	"M"	39	72	167
Elly	"F"	30	66	124
Fran	"F"	33	66	115
Gwen	"F"	26	64	121
Hank	"M"	30	71	158
Ivan	"M"	53	72	175
Jake	"M"	32	69	143
Kate	"F"	47	69	139
Luke	"M"	34	72	163
Myra	"F"	23	62	98
Neil	"M"	36	75	160
Omar	"M"	38	70	145
Page	"F"	31	67	135
Quin	"M"	29	71	176
Ruth	"F"	28	65	131
	var width = 1200;
	var height = 800;
	var RADIUS = 250;
	var THRESHOLD = 31;

	var svg = d3.select("#chart")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(0,0)");

	var ageScale = d3.scaleSqrt().domain([1, 60]).range([5, 60]);
	var redScale = d3.scaleSqrt().domain([10, 60]).range([0, 255]);
	var greenScale = d3.scaleSqrt().domain([0, 60]).range([255, 0]);

	var angle = Math.random() * Math.PI * 2;

	var forceX = d3.forceX(d => {
	x = Math.cos(angle) * (RADIUS + 100);
	let age = parseInt(d.Age);
	let threshold = parseInt(THRESHOLD);

	if (age <= threshold) {
	return x + width / 2;
	}
	else {
	return width / 2;
	}
	}).strength(0.05);

	var forceY = d3.forceY(d => {
	y = Math.sin(angle) * (RADIUS + 100);
	let age = parseInt(d.Age);
	let threshold = parseInt(THRESHOLD);

	if (age <= threshold) {
	return y + height / 2;
	}
	else {
	return height / 2;
	}
	}).strength(0.05);

	var forceCollide = d3.forceCollide(d => {
	return ageScale(d.Age) + 2;
	});


	var simulation = d3.forceSimulation()
	.force("x", forceX)
	.force("y", forceY)
	.force("collide", forceCollide);

	function compare(a, b) {
	if (a.Age > b.Age) {
	return -1;
	}
	if (a.Age < b.Age) {
	return 1;
	}
	return 0;
	}

	d3.csv("biostats.csv", function (datapoints) {
	svg.append('circle')
	.attr('cx', width / 2)
	.attr('cy', height / 2)
	.attr('r', RADIUS)
	.attr('stroke', 'black')
	.attr('opacity', 0.2);

	var circles = svg.selectAll(".artist")
	.data(datapoints)
	.enter().append("circle")
	.attr("class", "artist")
	.attr("r", d => {
	return ageScale(d.Age)
	})
	.attr("fill", d => {
	return `rgb(${redScale(d.Age)}, 0, ${greenScale(d.Age)})`;
	// return 'black';
	})
	.on('click', d => {
	console.log(d);
	});

	datapoints.sort(compare);
	console.log(datapoints);

	simulation.nodes(datapoints).on('tick', ticked);

	function ticked() {
	circles.attr("cx", d => d.x).attr("cy", d => d.y);
	}
	});
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bubble</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>

	<style>
	svg {
	background-color: lightgray;
	}
	</style>
	</head>

	<body>
	<div id="chart">
	</div>

	<script src="main.js"></script>
	</body>

	</html>