jrodgz/LICENSE

## README.md

      
    Raw
  

              README.md
            
          
    Joel D. Rodriguez-Ortiz

3 New Things Learned


During this week's tutorials I learned how to make scatterplots.
During this week's tutorials I learned how to label and position data points.
During this week's tutorials I learned how to use scales in D3.
During this week's tutorials I learned how to create axes in D3.
During this week's tutorials I learned how to manipulate page elements
using transitions in D3.

This week in general, helped me realize how D3 iterates internally over the
elements it creates. This was a doubt I needed to clarify last week. It
also helped me realize general D3 semantics and selection patterns. I think
I'm starting to "get the flow" of D3.
Important Note

I'm having a hard time getting the bl.ocks.org preview to render the page
correctly. The page renders correctly when observed outside the preview
using the raw address.
I think this might be related to separating the tutorials into separate
JavaScript files for organization, but I haven't confirmed this.

  
## index.html
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <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>
</head>
<body style="text-align: center;">
    <div style="padding: 10px;">
        <h3>Initial Scatterplot Example</h3>
        <script type="text/javascript" src="scatterplot.js"></script>
    </div>
    <div style="padding: 10px;">
        <h3>Final Scatterplot Example</h3>
        <script type="text/javascript" src="scatterplot_final.js"></script>
    </div>
    <div style="padding: 10px;">
        <h3>Fun Transitions!</h3>
        <script type="text/javascript" src="transitions.js"></script>
    </div>
</body>

## LICENSE
Just want to get rid of LICENSE warning in `bl.ocks.org`.

## scatterplot.js
// width and height
var w = 500;
var h = 300;
var padding = 20;

var dataset = [
    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
    [600, 150]
];

// scale functions
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([h - padding, padding]);

var rScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([2, 5]);

// SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d[0]);
    })
    .attr("cy", function(d) {
        return yScale(d[1]);
    })
    .attr("r", function(d) {
        return rScale(d[1]);
    });

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d[0] + "," + d[1];
    })
    .attr("x", function(d) {
        return xScale(d[0]);
    })
    .attr("y", function(d) {
        return yScale(d[1]);
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "red");

## scatterplot_final.js
// width and height
var w = 500;
var h = 300;
var padding = 30;

// dynamic random dataset
var dataset = [];
var numDataPoints = 50;
var xRange = Math.random() * 1000;
var yRange = Math.random() * 1000;
for (var i = 0; i < numDataPoints; i++)
{
    var newNumber1 = Math.round(Math.random() * xRange);
    var newNumber2 = Math.round(Math.random() * yRange);
    dataset.push([newNumber1, newNumber2]);
}

// create scales
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([h - padding, padding]);

var rScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([2, 5]);

// define x axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5);

// define y axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

// create svg element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

// create circles
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d[0]);
    })
    .attr("cy", function(d) {
        return yScale(d[1]);
    })
    .attr("r", function(d) {
        return rScale(d[1]);
    });

// create x axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

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

## transitions.js
// width and height
var w = 500;
var h = 300;

var container1 = d3.select("body").append("div");

var translateButton = container1.append("input")
    .attr("type", "submit")
    .attr("value", "Translate!")
    .attr("margin", "5px");

var growButton = container1.append("input")
    .attr("type", "submit")
    .attr("value", "Grow!")
    .attr("margin", "5px");

var colorButton = container1.append("input")
    .attr("type", "submit")
    .attr("value", "Color!")
    .attr("margin", "5px");

var combinedButton = container1.append("input")
    .attr("type", "submit")
    .attr("value", "Combined!")
    .attr("margin", "5px");

var container2 = d3.select("body").append("div");

var svg = container2.append("svg")
    .attr("width", w)
    .attr("height", h);

var mySquare = svg.append("rect")
    .attr("x", 60)
    .attr("y", 60)
    .attr("width", 60)
    .attr("height", 60)
    .style("fill", "blue");

var aCircle = svg.append("circle")
    .attr("cx", 60)
    .attr("cy", 60)
    .attr("r", 80)
    .attr("fill", "yellow")
    .attr("fill-opacity", 0);


var x = 60;
translateButton.on("click", function() {
    x = (x == 60) ? 320 : 60;
    mySquare.transition()
        .attr("x", x)
        .duration(1000)
        .delay(100);

    // clamp circle to square
    aCircle.transition()
        .attr("x", x)
        .duration(1000)
        .delay(100);
});

var squareWidth = 60;
growButton.on("click", function() {
    squareWidth = (squareWidth == 60) ? 120 : 60;
    mySquare.transition().attr("width", squareWidth); // makes it bigger
});

var color = "blue";
colorButton.on("click", function() {
    color = (color == "blue") ? "green" : "blue";
    mySquare.transition().style("fill", color);
});

var y = 60;
combinedButton.on("click", function() {
    x = (x == 60) ? 320 : 60;
    y = (y == 60) ? h - 60 : 60;
    color = (color == "blue") ? "green" : "blue";
    mySquare.transition()
        .attr("x", x)
        .style("fill", color)
        .ease("linear")
        .duration(250)
        .each("end", function() {
            d3.select(this).transition()
                .attr("y", y)
                .duration(350)
                .ease("elastic");
        });

    aCircle.transition()
        .ease("linear")
        .duration(500)
        .attr("cx", x)
        .attr("fill", "red")
        .attr("fill-opacity", 0.75)
        .attr("r", 200)
        .each("end", function() {
            d3.select(this)
                // restore circle to pre-blown up state
                .attr("cy", y)
                .attr("fill", "yellow")
                .attr("fill-opacity", 0)
                .attr("r", 80);
        });
});
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<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>
	</head>
	<body style="text-align: center;">
	<div style="padding: 10px;">
	<h3>Initial Scatterplot Example</h3>
	<script type="text/javascript" src="scatterplot.js"></script>
	</div>
	<div style="padding: 10px;">
	<h3>Final Scatterplot Example</h3>
	<script type="text/javascript" src="scatterplot_final.js"></script>
	</div>
	<div style="padding: 10px;">
	<h3>Fun Transitions!</h3>
	<script type="text/javascript" src="transitions.js"></script>
	</div>
	</body>
	// width and height
	var w = 500;
	var h = 300;
	var padding = 20;

	var dataset = [
	[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
	[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
	[600, 150]
	];

	// scale functions
	var xScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d[0]; })])
	.range([padding, w - padding * 2]);

	var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d[1]; })])
	.range([h - padding, padding]);

	var rScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d[1]; })])
	.range([2, 5]);

	// SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return xScale(d[0]);
	})
	.attr("cy", function(d) {
	return yScale(d[1]);
	})
	.attr("r", function(d) {
	return rScale(d[1]);
	});

	svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) {
	return d[0] + "," + d[1];
	})
	.attr("x", function(d) {
	return xScale(d[0]);
	})
	.attr("y", function(d) {
	return yScale(d[1]);
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "red");