WilliamQLiu/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <!-- Load D3 from site -->
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>

    <!-- CSS (Styling) -->
    <style type="text/css">
      .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
    <!-- End CSS (Styling) -->

  <body>
    <h2>Bar Chart</h2>
    <p>This is a data visualization using bar charts </p>
    <h3></h3>

  <!-- Begin D3 Javascript -->
  <script type="text/javascript">

            // ===== Start Scatterplot =====
            // Setup settings for graphic
            var canvas_width = 500;
            var canvas_height = 200;
            var padding = 25;  // Padding around canvas, i.e. replaces the 0 of scale

            // Create SVG element
            var svg = d3.select("h3")  // This is where we put our vis
                .append("svg")
                .attr("width", canvas_width)
                .attr("height", canvas_height)

            // scatterplot data is an array of arrays
            var data_scatter = [[5, 20], [480, 90], [250, 50], [100, 50], [330, 30], [475, 33],
                [77, 10], [150, 150]];  // Can add additional values and will scale

            // Define Scales - scales map an input domain with an output range
            var xScale = d3.scale.linear()
                .domain([0, d3.max(data_scatter, function(d) {
                    return d[0];  // get the input domain as first column of array
                })])
                .range([padding, canvas_width - padding * 2])  // set the output range
                .nice();  // Make decimals round up nicely

            var yScale = d3.scale.linear()
                .domain([0, d3.max(data_scatter, function(d) {
                    return d[1];  // gets the input domain as the second column of array
                })])
                .range([canvas_height - padding, padding])  // set the output range
                .nice();  // Make decimals round up nicely

            // Add circles from data
            svg.selectAll("circle")
                .data(data_scatter)
                .enter()
                .append("circle")
                .attr("x", function(d) {
                    return xScale(d[0]);  // Location of x
                })
                .attr("y", function(d) {
                    return yScale(d[1]);  // Location of y
                })
                .attr("r", 4)  // Radius
                .attr("cx", function(d) {
                    return xScale(d[0]);  // Returns scaled circle x
                })
                .attr("cy", function(d) {
                    return yScale(d[1]);  // Returns scaled circle y
                });

            // Add Text Labels
            svg.selectAll("text")
                .data(data_scatter)
                .enter()
                .append("text")
                .text(function(d) {
                    return d[0] + "," + d[1];
                })
                .attr("x", function(d) {
                    return xScale(d[0]);  // Returns scaled location of x
                })
                .attr("y", function(d) {
                    return yScale(d[1]);  // Returns scaled circle y
                })
                .attr("font_family", "sans-serif")  // Font type
                .attr("font-size", "11px")  // Font size
                .attr("fill", "darkgreen");   // Font color

            // Define X axis and attach to graph
            var xAxis = d3.svg.axis()  // Create an x axis
                .scale(xScale)      // Scale x axis
                .orient("bottom")  // Put text on bottom of axis line
                .ticks(10);  // Set rough # of ticks (optional)

            svg.append("g")     // Append a group element (itself invisible, but helps 'group' elements)
                .attr("class", "axis")  // Assign the 'axis' CSS
                .attr("transform", "translate(0," + (canvas_height - padding) + ")")  // Place axis at bottom
                .call(xAxis);  // Call function to create axis

            // Define Y axis and attach to graph
            var yAxis = d3.svg.axis()  // Create a y axis
                .scale(yScale)  // Scale y axis
                .orient("left")
                .ticks(5);  // Set rough # of ticks (optional)

            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding + ",0)")
                .call(yAxis);

  </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- Load D3 from site -->
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>

	<!-- CSS (Styling) -->
	<style type="text/css">
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	<!-- End CSS (Styling) -->

	<body>
	<h2>Bar Chart</h2>
	<p>This is a data visualization using bar charts </p>
	<h3></h3>

	<!-- Begin D3 Javascript -->
	<script type="text/javascript">

	// ===== Start Scatterplot =====
	// Setup settings for graphic
	var canvas_width = 500;
	var canvas_height = 200;
	var padding = 25; // Padding around canvas, i.e. replaces the 0 of scale

	// Create SVG element
	var svg = d3.select("h3") // This is where we put our vis
	.append("svg")
	.attr("width", canvas_width)
	.attr("height", canvas_height)

	// scatterplot data is an array of arrays
	var data_scatter = [[5, 20], [480, 90], [250, 50], [100, 50], [330, 30], [475, 33],
	[77, 10], [150, 150]]; // Can add additional values and will scale

	// Define Scales - scales map an input domain with an output range
	var xScale = d3.scale.linear()
	.domain([0, d3.max(data_scatter, function(d) {
	return d[0]; // get the input domain as first column of array
	})])
	.range([padding, canvas_width - padding * 2]) // set the output range
	.nice(); // Make decimals round up nicely

	var yScale = d3.scale.linear()
	.domain([0, d3.max(data_scatter, function(d) {
	return d[1]; // gets the input domain as the second column of array
	})])
	.range([canvas_height - padding, padding]) // set the output range
	.nice(); // Make decimals round up nicely

	// Add circles from data
	svg.selectAll("circle")
	.data(data_scatter)
	.enter()
	.append("circle")
	.attr("x", function(d) {
	return xScale(d[0]); // Location of x
	})
	.attr("y", function(d) {
	return yScale(d[1]); // Location of y
	})
	.attr("r", 4) // Radius
	.attr("cx", function(d) {
	return xScale(d[0]); // Returns scaled circle x
	})
	.attr("cy", function(d) {
	return yScale(d[1]); // Returns scaled circle y
	});

	// Add Text Labels
	svg.selectAll("text")
	.data(data_scatter)
	.enter()
	.append("text")
	.text(function(d) {
	return d[0] + "," + d[1];
	})
	.attr("x", function(d) {
	return xScale(d[0]); // Returns scaled location of x
	})
	.attr("y", function(d) {
	return yScale(d[1]); // Returns scaled circle y
	})
	.attr("font_family", "sans-serif") // Font type
	.attr("font-size", "11px") // Font size
	.attr("fill", "darkgreen"); // Font color

	// Define X axis and attach to graph
	var xAxis = d3.svg.axis() // Create an x axis
	.scale(xScale) // Scale x axis
	.orient("bottom") // Put text on bottom of axis line
	.ticks(10); // Set rough # of ticks (optional)

	svg.append("g") // Append a group element (itself invisible, but helps 'group' elements)
	.attr("class", "axis") // Assign the 'axis' CSS
	.attr("transform", "translate(0," + (canvas_height - padding) + ")") // Place axis at bottom
	.call(xAxis); // Call function to create axis

	// Define Y axis and attach to graph
	var yAxis = d3.svg.axis() // Create a y axis
	.scale(yScale) // Scale y axis
	.orient("left")
	.ticks(5); // Set rough # of ticks (optional)

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);

	</script>

	</body>
	</html>