DavidChouinard/demo.js

## demo.js
// You'll generally need a local server for requests to work. Run:
//     python -m SimpleHTTPServer

var width = 700,
    height = 500;

var svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

// The code aboves sets up the basic SVG element required for
// drawing vector graphics in the browser. Real code starts below.

var data = [10, 45, 105, 69, 80, 55, 200];

var scale = d3.scale.linear()
    .domain([1,200])   // could be dynamically computed: see d3.max/d3.extent
    .range([20,width-40]);

var color = d3.scale.linear()
    .domain([1,200])
    .range(["green","red"]);

var circles = svg.selectAll("circle")
     .data(data)
   .enter().append("circle");

circles
    .attr("cx", function(d,i) {
      return scale(d);
    })
    .attr("cy", 200)
    .attr("r", 40)
    .style("fill", function(d,i) {
      return color(d);
    })
    .style("fill-opacity", 0.5);

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Data Visualization and D3</title>
        <meta content="David Chouinard" name="author" />

        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <svg></svg>
    </body>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="demo.js"></script>
</html>
	// You'll generally need a local server for requests to work. Run:
	// python -m SimpleHTTPServer

	var width = 700,
	height = 500;

	var svg = d3.select("svg")
	.attr("width", width)
	.attr("height", height);

	// The code aboves sets up the basic SVG element required for
	// drawing vector graphics in the browser. Real code starts below.

	var data = [10, 45, 105, 69, 80, 55, 200];

	var scale = d3.scale.linear()
	.domain([1,200]) // could be dynamically computed: see d3.max/d3.extent
	.range([20,width-40]);

	var color = d3.scale.linear()
	.domain([1,200])
	.range(["green","red"]);

	var circles = svg.selectAll("circle")
	.data(data)
	.enter().append("circle");

	circles
	.attr("cx", function(d,i) {
	return scale(d);
	})
	.attr("cy", 200)
	.attr("r", 40)
	.style("fill", function(d,i) {
	return color(d);
	})
	.style("fill-opacity", 0.5);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Data Visualization and D3</title>
	<meta content="David Chouinard" name="author" />

	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<svg></svg>
	</body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="demo.js"></script>
	</html>