tnightingale/README.md

## README.md

      
    Raw
  

              README.md
            
          
    D3js API
D3js slides - Read these
The update pattern:

Part 1
Part 2
Part 3

Resuable D3js components:

Towards resuable charts

Making maps:

Lets make a map
D3 + Leaflet


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

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

    <style type="text/css">
      html, body {
        margin: 0 5px;
        padding: 0;
        height: 100%;
      }

      svg {
        margin: 10px 5px;
        border: 1px solid #666;
        font: 10px sans-serif;
      }

    </style>
  </head>
  <body>
    <script type="text/javascript">
    (function () {
        var width = 240,
            height = 200,
            margin = { left: 20, top: 20 };

        ////
        // Example 1: Drawing basic shapes & adjusting point of origin.
        //

        // Create viewport.
        var view_1 = d3.select("body").append("svg")
            .attr("id", "view-1")
            .attr("width", width)
            .attr("height", height);

        // Shift origin to center. The <g> element can be used to group shapes.
        // Transformations applied to a group also effect child elements of the
        // group.
        var shapes = view_1.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // Draw a rectangle.
        shapes.append("rect")
            .attr("width", 75)
            .attr("height", 50)
            // .attr("transform", "translate(0, 0)")
            .style("fill", "steelblue")
            .style("stroke", "#090963");

        // Draw a circle.
        shapes.append("circle")
            .attr("r", 25)
            .attr("transform", "translate(125, 25)")
            .style("fill", "steelblue")
            .style("stroke", "#090963");

        // Draw a line.
        shapes.append("line")
            .attr("x1", 0).attr("y1", 0)
            .attr("x2", 25).attr("y2", 150)
            .attr("transform", "translate(175, 0)")
            .style("stroke", "steelblue")
            .style("stroke-width", 2);


        ////
        // Example 2: Data driving drawing.
        //

        // Set some data.
        var size = [25, 50, 75];

        // Create viewport.
        var view_2 = d3.select("body").append("svg").attr("id", "view-2")
                .attr("width", width)
                .attr("height", height);

        // Shift origin to center.
        data_shapes = view_2.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        // Make a selection of circles and draw one for each data item.
        data_shapes.selectAll("circle").data(size).enter()
            .append("circle")
            .style("fill", "none")
            .style("stroke", "Darkgoldenrod")
            // Width of the circle is 1/10 of the data item's value.
            .style("stroke-width", function (d) {
                return d / 10;
            })
            // Radius of the circle is set from the value of the data item.
            .attr("r", function (d) { return d; });


        ////
        // Example 3: Responding to changing data.
        //

        // Set some data.
        var pos = [25, 50, 75];

        // Create viewport.
        var view_3 = d3.select("body").append("svg").attr("id", "view-3")
                .attr("width", width)
                .attr("height", height);

        // Shift origin by margin.
        data_shapes = view_3.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // Call 'draw' when viewport is clicked.
        view_3.on("click", draw);

        // Make an initial draw.
        draw();

        // Viewport click callback.
        function draw() {
            // Make a selection and bind the data.
            var selection = data_shapes.selectAll("circle")
                    // The second parameter to data() is an option callback to
                    // provide a unique identifier for each data item. In this
                    // case it is the item's value.
                    .data(pos, function (d) { return d; });

            // Create circles for new data.
            selection.enter()
                .append("circle")
                .attr("r", 10)
                // Horizontal position is set by data item's value.
                .attr("transform", function (d) {
                  return "translate(" + d + ",20)";
                });

            // Remove circles bound to elements removed from selecion.
            selection.exit().remove();

            // Remove first item from data set.
            pos = pos.filter(function (d, i) { return i !== 0; });
            // Add a new item to the end of the data set.
            pos.push((d3.max(pos) + 25) % (width - margin.left));
        }
    }());
    </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

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

	<style type="text/css">
	html, body {
	margin: 0 5px;
	padding: 0;
	height: 100%;
	}

	svg {
	margin: 10px 5px;
	border: 1px solid #666;
	font: 10px sans-serif;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">
	(function () {
	var width = 240,
	height = 200,
	margin = { left: 20, top: 20 };

	////
	// Example 1: Drawing basic shapes & adjusting point of origin.
	//

	// Create viewport.
	var view_1 = d3.select("body").append("svg")
	.attr("id", "view-1")
	.attr("width", width)
	.attr("height", height);

	// Shift origin to center. The <g> element can be used to group shapes.
	// Transformations applied to a group also effect child elements of the
	// group.
	var shapes = view_1.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Draw a rectangle.
	shapes.append("rect")
	.attr("width", 75)
	.attr("height", 50)
	// .attr("transform", "translate(0, 0)")
	.style("fill", "steelblue")
	.style("stroke", "#090963");

	// Draw a circle.
	shapes.append("circle")
	.attr("r", 25)
	.attr("transform", "translate(125, 25)")
	.style("fill", "steelblue")
	.style("stroke", "#090963");

	// Draw a line.
	shapes.append("line")
	.attr("x1", 0).attr("y1", 0)
	.attr("x2", 25).attr("y2", 150)
	.attr("transform", "translate(175, 0)")
	.style("stroke", "steelblue")
	.style("stroke-width", 2);


	////
	// Example 2: Data driving drawing.
	//

	// Set some data.
	var size = [25, 50, 75];

	// Create viewport.
	var view_2 = d3.select("body").append("svg").attr("id", "view-2")
	.attr("width", width)
	.attr("height", height);

	// Shift origin to center.
	data_shapes = view_2.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	// Make a selection of circles and draw one for each data item.
	data_shapes.selectAll("circle").data(size).enter()
	.append("circle")
	.style("fill", "none")
	.style("stroke", "Darkgoldenrod")
	// Width of the circle is 1/10 of the data item's value.
	.style("stroke-width", function (d) {
	return d / 10;
	})
	// Radius of the circle is set from the value of the data item.
	.attr("r", function (d) { return d; });


	////
	// Example 3: Responding to changing data.
	//

	// Set some data.
	var pos = [25, 50, 75];

	// Create viewport.
	var view_3 = d3.select("body").append("svg").attr("id", "view-3")
	.attr("width", width)
	.attr("height", height);

	// Shift origin by margin.
	data_shapes = view_3.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Call 'draw' when viewport is clicked.
	view_3.on("click", draw);

	// Make an initial draw.
	draw();

	// Viewport click callback.
	function draw() {
	// Make a selection and bind the data.
	var selection = data_shapes.selectAll("circle")
	// The second parameter to data() is an option callback to
	// provide a unique identifier for each data item. In this
	// case it is the item's value.
	.data(pos, function (d) { return d; });

	// Create circles for new data.
	selection.enter()
	.append("circle")
	.attr("r", 10)
	// Horizontal position is set by data item's value.
	.attr("transform", function (d) {
	return "translate(" + d + ",20)";
	});

	// Remove circles bound to elements removed from selecion.
	selection.exit().remove();

	// Remove first item from data set.
	pos = pos.filter(function (d, i) { return i !== 0; });
	// Add a new item to the end of the data set.
	pos.push((d3.max(pos) + 25) % (width - margin.left));
	}
	}());
	</script>
	</body>
	</html>