jjelosua/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Intro d3js

### Example13 - Axis
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Intro d3js examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      .existing {color: blue;}
      .new {color: green;}
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }

      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <h1>Intro d3js - example13</h1>
    <!--<p> previous paragraph</p>-->
    <script type="text/javascript">
    	//Width and height
      var w = 500;
      var h = 300;
      //Once the visualization is scalable we can adjust the size of it easily
      //var h = 300;
      var padding = 40;
      var offset = 3;


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


      ///Dynamic, random dataset
      var dataset = [];          //Initialize empty array
      var numDataPoints = 15;        //Number of dummy data points to create
      var xRange = Math.random() * 1000;  //Max range of new x values
      var yRange = Math.random() * 500;  //Max range of new y values
      for (var i = 0; i < numDataPoints; i++) {          //Loop numDataPoints times
        var newNumber1 = Math.floor(Math.random() * xRange);  //New random integer
        var newNumber2 = Math.floor(Math.random() * yRange);  //New random integer
        dataset.push([newNumber1, newNumber2]);          //Add new number to array
      }


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

      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[0]; })])
                  .range([2, 5]);

      var formatAsPercentage = d3.format(".1%");

      //Define X axis
      var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(10);

      //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);

      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[0]);
         });

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

      //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);
      </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Intro d3js examples</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	.existing {color: blue;}
	.new {color: green;}
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	</head>
	<body>
	<h1>Intro d3js - example13</h1>
	<!--<p> previous paragraph</p>-->
	<script type="text/javascript">
	//Width and height
	var w = 500;
	var h = 300;
	//Once the visualization is scalable we can adjust the size of it easily
	//var h = 300;
	var padding = 40;
	var offset = 3;


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


	///Dynamic, random dataset
	var dataset = []; //Initialize empty array
	var numDataPoints = 15; //Number of dummy data points to create
	var xRange = Math.random() * 1000; //Max range of new x values
	var yRange = Math.random() * 500; //Max range of new y values
	for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times
	var newNumber1 = Math.floor(Math.random() * xRange); //New random integer
	var newNumber2 = Math.floor(Math.random() * yRange); //New random integer
	dataset.push([newNumber1, newNumber2]); //Add new number to array
	}


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

	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[0]; })])
	.range([2, 5]);

	var formatAsPercentage = d3.format(".1%");

	//Define X axis
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10);

	//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);

	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[0]);
	});

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

	//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);
	</script>
	</body>
	</html>