martinjc/.block

## .block
license: mit
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Simple D3 scatterplot with axes, scales and transitions

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CMT212 Lab Week 2</title>
    <link rel="stylesheet" href="../base.css">
    <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
    <input type="button" onclick="update()" value="Update"/>
    <input type="range" value="50" min="0" max="100" id="maximum">
    <div id="vis">
    </div>
    <script src="script.js"></script>
</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## script.js
var width = 700;
var height = 400;

var max = d3.select('#maximum').node().value;

var margin = {
    top: 20,
    left: 30,
    right: 60,
    bottom: 30
};

var svg = d3.select("#vis")
    .append("svg")
        .attr('width', width)
        .attr('height', height)
    .append("g")
        .attr("transform", "translate(" + margin.top + "," + margin.left + ")");

width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;

var xscale = d3.scaleLinear()
                .domain([0, max])
                .range([0, width]);

var yscale = d3.scaleLinear()
                .domain([0, max])
                .range([height, 0]);

var xaxis = d3.axisBottom(xscale);

var yaxis = d3.axisLeft(yscale);

svg.append('g')
    .attr('transform', 'translate(0, ' + (height) + ')')
    .attr('class', 'x axis');

svg.append('g')
    .attr('class', 'y axis');

function update() {

    var t = d3.transition()
        .duration(1000)
        .ease(d3.easeQuadOut);

    var max = d3.select('#maximum').node().value;

    var exampleData = createRandomData(max);

    maxX = d3.max(exampleData, function(d){ return d.x; });
    maxY = d3.max(exampleData, function(d){ return d.y });

    xscale.domain([0, maxX]);
    yscale.domain([0, maxY]);

    var dots = svg.selectAll(".dot")
       .data(exampleData);

    dots
        .enter()
            .append('circle')
            .attr('r', 3)
            .attr('fill', 'red')
            .attr('stroke', 'black')
            .attr('class','dot')
            .attr('cy', height)
            .attr('cx', 0)
        .merge(dots)
            .transition(t)
            .attr("cy", function(d, i){ return yscale(d.y); })
            .attr("cx", function(d, i){ return xscale(d.x); })

    dots
        .exit()
        .remove();

    var labels = svg.selectAll('.label')
        .data(exampleData);

    labels
        .enter()
            .append('text')
            .attr('class', 'label')
            .attr('x', 0)
            .attr('y', height)
        .merge(labels)
            .transition(t)
            .attr('x', function(d) {
                return xscale(d.x) + 2;
            })
            .attr('y', function(d){
                return yscale(d.y) - 2;
            })
            .text(function(d){
                return d.x + ", " + d.y;
            })

    labels
        .exit()
        .remove();

    svg.select('.x.axis')
        .transition(t)
        .call(xaxis);

    svg.select('.y.axis')
        .transition(t)
        .call(yaxis);

}

function createRandomData(maximum) {
    var numDataItems = Math.floor((Math.random() * 50) + 1);
    var d = [];
    for(var i = 0; i < numDataItems; i++) {
        var x = Math.floor((Math.random() * maximum) + 1);
        var y = Math.floor((Math.random() * maximum) + 1);
        d.push({"x": x, "y": y});
    }
    return d;
}

update();

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CMT212 Lab Week 2</title>
	<link rel="stylesheet" href="../base.css">
	<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
	<input type="button" onclick="update()" value="Update"/>
	<input type="range" value="50" min="0" max="100" id="maximum">
	<div id="vis">
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	var width = 700;
	var height = 400;

	var max = d3.select('#maximum').node().value;

	var margin = {
	top: 20,
	left: 30,
	right: 60,
	bottom: 30
	};

	var svg = d3.select("#vis")
	.append("svg")
	.attr('width', width)
	.attr('height', height)
	.append("g")
	.attr("transform", "translate(" + margin.top + "," + margin.left + ")");

	width = width - margin.left - margin.right;
	height = height - margin.top - margin.bottom;

	var xscale = d3.scaleLinear()
	.domain([0, max])
	.range([0, width]);

	var yscale = d3.scaleLinear()
	.domain([0, max])
	.range([height, 0]);

	var xaxis = d3.axisBottom(xscale);

	var yaxis = d3.axisLeft(yscale);

	svg.append('g')
	.attr('transform', 'translate(0, ' + (height) + ')')
	.attr('class', 'x axis');

	svg.append('g')
	.attr('class', 'y axis');

	function update() {

	var t = d3.transition()
	.duration(1000)
	.ease(d3.easeQuadOut);

	var max = d3.select('#maximum').node().value;

	var exampleData = createRandomData(max);

	maxX = d3.max(exampleData, function(d){ return d.x; });
	maxY = d3.max(exampleData, function(d){ return d.y });

	xscale.domain([0, maxX]);
	yscale.domain([0, maxY]);

	var dots = svg.selectAll(".dot")
	.data(exampleData);

	dots
	.enter()
	.append('circle')
	.attr('r', 3)
	.attr('fill', 'red')
	.attr('stroke', 'black')
	.attr('class','dot')
	.attr('cy', height)
	.attr('cx', 0)
	.merge(dots)
	.transition(t)
	.attr("cy", function(d, i){ return yscale(d.y); })
	.attr("cx", function(d, i){ return xscale(d.x); })

	dots
	.exit()
	.remove();

	var labels = svg.selectAll('.label')
	.data(exampleData);

	labels
	.enter()
	.append('text')
	.attr('class', 'label')
	.attr('x', 0)
	.attr('y', height)
	.merge(labels)
	.transition(t)
	.attr('x', function(d) {
	return xscale(d.x) + 2;
	})
	.attr('y', function(d){
	return yscale(d.y) - 2;
	})
	.text(function(d){
	return d.x + ", " + d.y;
	})

	labels
	.exit()
	.remove();

	svg.select('.x.axis')
	.transition(t)
	.call(xaxis);

	svg.select('.y.axis')
	.transition(t)
	.call(yaxis);

	}

	function createRandomData(maximum) {
	var numDataItems = Math.floor((Math.random() * 50) + 1);
	var d = [];
	for(var i = 0; i < numDataItems; i++) {
	var x = Math.floor((Math.random() * maximum) + 1);
	var y = Math.floor((Math.random() * maximum) + 1);
	d.push({"x": x, "y": y});
	}
	return d;
	}

	update();