Old school D3 from simpler times

All examples By author By category About

dstinchcomb

Full window Github gist

DataVis with D3 - Module 2 Exercise

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 2 Exercise</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			body {
				font-family: Helvetica, Arial, sans-serif;
				color: #000099;
				background-color: #80FFCC;
				padding: 5px;
			}
			h1 {
				border-bottom: solid 5px #000099;
			}
			p {}
			svg {background-color: white;}
		</style>
	</head>
	<body>

<h1>DataVis with D3 - Module 2 Exercise</h1>
		<p>An SVG built by hand:</p>

<svg width="700" height="250">
			<rect x="60" y="30" width="580" height="190" fill="#FFCCB2" />
			<ellipse cx="350" cy="125" rx="280" ry="80" fill="#E6F0F5" />
			<text x="110" y="120" fill="#000099" font-size="24" font-weight="bold" font-family="Helvetica">
				County Health Ranking data for Maryland</text>
			<text x="170" y="150" fill="#000099" font-size="20" font-weight="bold" font-family="Helvetica">
				The "Additional Measures" for 2014</text>
		</svg>

<script type="text/javascript">		
			//Load in contents of CSV file
			d3.csv("2014 County Health Rankings Maryland - additional_measures.csv", function(data) {
				//Now CSV contents have been transformed into
				//an array of JSON objects.
				//Log 'data' to the console, for verification.
				console.log(data);
			var reccount = data.length;  // Get the number of records loaded
			d3.select("body").append("p").text(function(msg) {
				return "The County Health Rankings CSV data file has been loaded as an array of JSON objects using the D3 CSV method.  There are " + reccount + " records.";});
			d3.select("body").append("p").text("Note: we haved logged the data to the console to confirm that it has been loaded.");
			// Turn on emphasis for the last/third paragraph.
			var thirdpara = d3.selectAll("p")[0][2];
			d3.select(thirdpara).style("font-style","italic");
			// d3.select("p:last-child").style("font-style","italic");  // Works in Firefox but not other browsers
			// d3.select("p:nth-child(3)").style("font-style","italic");  // Doesn't work in Firefox
			});
		</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js