luluwuluying/diabetes.csv

## diabetes.csv

          
            Year
            Crude
            AgeAdjusted

            
              1980
              2.5
              2.8

            
              1981
              2.5
              2.8

            
              1982
              2.5
              2.8

            
              1983
              2.4
              2.7

            
              1984
              2.6
              2.8

            
              1985
              2.6
              2.9

            
              1986
              2.8
              3.1

            
              1987
              2.8
              3

            
              1988
              2.6
              2.8

            
              1989
              2.7
              2.9

            
              1990
              2.5
              2.7

            
              1991
              2.9
              3.1

            
              1992
              2.9
              3.1

            
              1993
              3.1
              3.2

            
              1994
              3
              3.2

            
              1995
              3.3
              3.5

            
              1996
              2.9
              3

            
              1997
              3.8
              4

            
              1998
              3.9
              4.1

            
              1999
              4
              4.1

            
              2000
              4.4
              4.5

            
              2001
              4.7
              4.8

            
              2002
              4.8
              4.9

            
              2003
              4.9
              4.9

            
              2004
              5.3
              5.2

            
              2005
              5.6
              5.5

            
              2006
              5.9
              5.7

            
              2007
              5.9
              5.6

            
              2008
              6.3
              5.9

            
              2009
              6.9
              6.4

            
              2010
              7
              6.5

            
              2011
              6.8
              6.3

            
              2012
              7
              6.3

            
              2013
              7.2
              6.5

            
              2014
              7
              6.2


## index.html
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Formatting Ticks</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 24px;
				margin-right: 600px;
			}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
                margin-right: 600px;
			}

			svg {

				background-color: white;
			}

			circle.dots {
				fill: steelblue;
			}

			circle:hover {
				fill: orange;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

		</style>
	</head>
	<body>

		<h1>Crude and Age-Adjusted Rates of Diagnosed Diabetes per 100 Civilian, Non-Institutionalized Population, United States</h1>

		<p>From 1990 through 2009, the crude and age-adjusted rates of diagnosed diabetes per 100 civilian, non-institutionalized population in the United States increased. The crude rate increased by 176% (from 2.5 to 6.9 per 100), and the age-adjusted rate increased by 137% (from 2.7 to 6.4 per 100). From 1980 to 1990 and from 2009 to 2014, the rates changed little. Source: <a href="http://www.cdc.gov/diabetes/statistics/prev/national/figage.htm">CDC.GOV</a>,1980–2014</p>

		<script type="text/javascript">


		// Scott is "cheating" and not using the full pattern for margins.
		// It is better to use the object style with margin.top, margin.right, etc.

			var fullWidth = 700;
			var fullHeight = 600;

			var margin = {top:30, left:60, right:50, bottom: 50};  //Top, right, bottom, left

			// what do you need to do to make the width and height for the chart?
			var height = fullHeight - margin.top - margin.bottom; // minus what?
			var width = fullWidth - margin.left - margin.right; // minus what?

			var dotRadius = 5; // fix this to a nice value.

			// fill in the margin values here.
			var xScale = d3.scale.linear()
								.range([0,width ]);


			// top to bottom:
			var yScale = d3.scale.linear()
								.range([ height ,0 ]);

			//  Custom tick count if you want it.
			// Create your axes here.
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(10);  // fix this to a good number of ticks for your scale later.

			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");

			var svg = d3.select("body")
						.append("svg")
						.attr("width", fullWidth)
						.attr("height", fullHeight)
						.append("g")
						.append("g")
                        .attr("transform","translate(" + margin.left + "," + margin.top + ")");


			d3.csv("diabetes.csv", function(data) {

				// look at the data file and pick 2 columns to contrast with each other.

				xScale.domain(
					d3.extent(data, function(d) {
						return + d.Crude;// pick a data value to plot on x axis
					}));
                xScale.domain([2, 8]);

				yScale.domain(
					d3.extent(data, function(d) {
						return +d.AgeAdjusted;// pick a data value to plot for y axis
					}));

				var circles = svg.selectAll("circle")
				.data(data)
				.enter()
				.append("circle")
                .classed("dots",true);

                // fill in the rest of the data, enter, append here.
                // add a class to the circles - ".dots".
                // Circles in SVG have cx, cy, and r attributes. x location, y location, radius.

				circles.attr("cx", function(d) {
						return xScale(+d.Crude);// return the value to use for your x scale here
					})
					.attr("cy", function(d) {
						return yScale(+d.AgeAdjusted);// return the value to use for your y scale here
					})
					.attr("r", dotRadius)  // you might want to increase your dotRadius
					.style("fill" ,function(d){

                            if (d.Year ==="1996"){
                                return "red";

                            }
                            else{
                                return "bule";
                            }
                        })// add a fill rule with a special case for one of the countries
					.append("title")
					.text(function(d) {
						return d.Year;// fill in a text string here for your cheap tooltip
					});

				// fix these translates so they use your margin and height width as needed
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call( xAxis);// fill in the name of your xaxis function here .

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(0,0)")
					.call( yAxis);// fill in the name of your yaxis function here


			});


          svg.append("text")
            .attr("class", "xlabel")
        	.attr("transform", "translate(" + width/2 + " ," +
        				height + ")")
        	.style("text-anchor", "middle")
        	.attr("dy", "40")
        	.text("Rate");


            svg.append("text")
            .attr("class", "y label")
            .attr("x", -width/2)
        	.attr("transform", "rotate(-90)")
        	.style("text-anchor", "middle")
        	.attr("dy", "-40")
        	.text("Rate");


		</script>

	</body>
</html>
Year	Crude	AgeAdjusted
1980	2.5	2.8
1981	2.5	2.8
1982	2.5	2.8
1983	2.4	2.7
1984	2.6	2.8
1985	2.6	2.9
1986	2.8	3.1
1987	2.8	3
1988	2.6	2.8
1989	2.7	2.9
1990	2.5	2.7
1991	2.9	3.1
1992	2.9	3.1
1993	3.1	3.2
1994	3	3.2
1995	3.3	3.5
1996	2.9	3
1997	3.8	4
1998	3.9	4.1
1999	4	4.1
2000	4.4	4.5
2001	4.7	4.8
2002	4.8	4.9
2003	4.9	4.9
2004	5.3	5.2
2005	5.6	5.5
2006	5.9	5.7
2007	5.9	5.6
2008	6.3	5.9
2009	6.9	6.4
2010	7	6.5
2011	6.8	6.3
2012	7	6.3
2013	7.2	6.5
2014	7	6.2
	<!DOCTYPE html>
	<!-- A modified example from Scott Murray's Knight d3 course. -->

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Formatting Ticks</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin-right: 600px;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	margin-right: 600px;
	}

	svg {

	background-color: white;
	}

	circle.dots {
	fill: steelblue;
	}

	circle:hover {
	fill: orange;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<h1>Crude and Age-Adjusted Rates of Diagnosed Diabetes per 100 Civilian, Non-Institutionalized Population, United States</h1>

	<p>From 1990 through 2009, the crude and age-adjusted rates of diagnosed diabetes per 100 civilian, non-institutionalized population in the United States increased. The crude rate increased by 176% (from 2.5 to 6.9 per 100), and the age-adjusted rate increased by 137% (from 2.7 to 6.4 per 100). From 1980 to 1990 and from 2009 to 2014, the rates changed little. Source: <a href="http://www.cdc.gov/diabetes/statistics/prev/national/figage.htm">CDC.GOV</a>,1980–2014</p>

	<script type="text/javascript">


	// Scott is "cheating" and not using the full pattern for margins.
	// It is better to use the object style with margin.top, margin.right, etc.

	var fullWidth = 700;
	var fullHeight = 600;

	var margin = {top:30, left:60, right:50, bottom: 50}; //Top, right, bottom, left

	// what do you need to do to make the width and height for the chart?
	var height = fullHeight - margin.top - margin.bottom; // minus what?
	var width = fullWidth - margin.left - margin.right; // minus what?

	var dotRadius = 5; // fix this to a nice value.

	// fill in the margin values here.
	var xScale = d3.scale.linear()
	.range([0,width ]);



	// top to bottom:
	var yScale = d3.scale.linear()
	.range([ height ,0 ]);

	// Custom tick count if you want it.
	// Create your axes here.
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10); // fix this to a good number of ticks for your scale later.

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

	var svg = d3.select("body")
	.append("svg")
	.attr("width", fullWidth)
	.attr("height", fullHeight)
	.append("g")
	.append("g")
	.attr("transform","translate(" + margin.left + "," + margin.top + ")");


	d3.csv("diabetes.csv", function(data) {

	// look at the data file and pick 2 columns to contrast with each other.

	xScale.domain(
	d3.extent(data, function(d) {
	return + d.Crude;// pick a data value to plot on x axis
	}));
	xScale.domain([2, 8]);

	yScale.domain(
	d3.extent(data, function(d) {
	return +d.AgeAdjusted;// pick a data value to plot for y axis
	}));

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.classed("dots",true);

	// fill in the rest of the data, enter, append here.
	// add a class to the circles - ".dots".
	// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.

	circles.attr("cx", function(d) {
	return xScale(+d.Crude);// return the value to use for your x scale here
	})
	.attr("cy", function(d) {
	return yScale(+d.AgeAdjusted);// return the value to use for your y scale here
	})
	.attr("r", dotRadius) // you might want to increase your dotRadius
	.style("fill" ,function(d){

	if (d.Year ==="1996"){
	return "red";

	}
	else{
	return "bule";
	}
	})// add a fill rule with a special case for one of the countries
	.append("title")
	.text(function(d) {
	return d.Year;// fill in a text string here for your cheap tooltip
	});

	// fix these translates so they use your margin and height width as needed
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call( xAxis);// fill in the name of your xaxis function here .

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(0,0)")
	.call( yAxis);// fill in the name of your yaxis function here



	});


	svg.append("text")
	.attr("class", "xlabel")
	.attr("transform", "translate(" + width/2 + " ," +
	height + ")")
	.style("text-anchor", "middle")
	.attr("dy", "40")
	.text("Rate");


	svg.append("text")
	.attr("class", "y label")
	.attr("x", -width/2)
	.attr("transform", "rotate(-90)")
	.style("text-anchor", "middle")
	.attr("dy", "-40")
	.text("Rate");



	</script>

	</body>
	</html>