RobertDelgado/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
This example examines the 2D size channel for ordered attributes (page 102 Munzner).
For the most part, this example was built from scratch.

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>


    var start_x = 0;
    var separation = 30;

		var rect_level = 100;
    var rect_start_length = 3;
    var rect_increment_length = 10;

    var circle_level = 200;
    var circle_start_rad = 5;


    var data = [{sideLength : rect_start_length
                , x: 0
                , y: rect_level
                , shape: "rect"
                , color: "green"}
               , {sideLength : rect_start_length * 2
                 , x: start_x + separation
                 , y: rect_level
                 , shape: "rect"
                 , color: "green"}
               , {sideLength :rect_start_length * 3
                 , x: start_x + 2 * separation
                 , y: rect_level
                 , shape: "rect"
                 , color: "green"}
               , {sideLength: rect_start_length * 4
                 , x: start_x + 3 * separation
                 , y: rect_level
                 , shape: "rect"
                 , color: "green"}
                ,{
                  r:Math.sqrt(circle_start_rad)
                  ,x:start_x
                  , y:50
                  , shape: "circle"
                	, color: "blue"}
                ,{
                  r:Math.sqrt(circle_start_rad * 2)
                  ,x:start_x + separation
                  , y:50
                  , shape: "circle"
                	, color: "blue"}
                ,{
                  r:Math.sqrt(circle_start_rad * 4)
                  ,x:start_x + 2 * separation
                  , y:50
                  , shape: "circle"
                	, color: "blue"}
                ,{
                  r:Math.sqrt(circle_start_rad * 8)
                  ,x:start_x + 3 * separation
                  , y:50
                  , shape: "circle"
                	, color: "blue"}
               ];

    var xScale = d3.scaleLinear().domain([0,200]).range([0,700]);
    var yScale = d3.scaleLinear().domain([0,200]).range([0,700]);


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

    var textBox = svg.append("text")
      .text("2D Area Marker Examples")
      	.attr("y", 30)
      	.attr("x", 160)
      	.attr("font-size", 36)
    		.attr("font","Helvetica-Nueue")
      	.attr("font-family", "sans-sarif");


		var g = svg.append("g")
  		.attr("transform", "translate(200, 0)");

 		var rect_label_box = g.append("text")
  		.text("Rectangle Markers")
  			.attr("y", 300)
  			.attr("x", 100)


    var enter_rect = g.selectAll("rect")
    	.data(data.filter(function(d){return(d["shape"] == "rect");}))
    	.enter()

    var update = enter_rect
    	.append("rect")
        .attr("x", function(d){return(xScale(d.x));})
        .attr("y", function(d){return(yScale(d.y - .5 * d.sideLength));})
        .attr("height", function(d){return(xScale(d.sideLength));})
        .attr("width", function(d){return(yScale(d.sideLength));})
        .attr("fill", function(d){return(d.color);});


 		var circle_label_box = g.append("text")
  		.text("Circle Markers")
  			.attr("y", 140)
  			.attr("x", 100)


    var enter_circ = g.selectAll("circle")
    		.data(data.filter(function(d){return(d["shape"] == "circle");}))
    		.enter()

    var update = enter_circ
    	.append("circle")
        .attr("cx", function(d){return(xScale(d.x));})
        .attr("cy", function(d){return(yScale(d.y));})
        .attr("r", function(d){return(xScale(d.r));})
        .attr("fill", function(d){return(d.color);});


  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>


	var start_x = 0;
	var separation = 30;

	var rect_level = 100;
	var rect_start_length = 3;
	var rect_increment_length = 10;

	var circle_level = 200;
	var circle_start_rad = 5;


	var data = [{sideLength : rect_start_length
	, x: 0
	, y: rect_level
	, shape: "rect"
	, color: "green"}
	, {sideLength : rect_start_length * 2
	, x: start_x + separation
	, y: rect_level
	, shape: "rect"
	, color: "green"}
	, {sideLength :rect_start_length * 3
	, x: start_x + 2 * separation
	, y: rect_level
	, shape: "rect"
	, color: "green"}
	, {sideLength: rect_start_length * 4
	, x: start_x + 3 * separation
	, y: rect_level
	, shape: "rect"
	, color: "green"}
	,{
	r:Math.sqrt(circle_start_rad)
	,x:start_x
	, y:50
	, shape: "circle"
	, color: "blue"}
	,{
	r:Math.sqrt(circle_start_rad * 2)
	,x:start_x + separation
	, y:50
	, shape: "circle"
	, color: "blue"}
	,{
	r:Math.sqrt(circle_start_rad * 4)
	,x:start_x + 2 * separation
	, y:50
	, shape: "circle"
	, color: "blue"}
	,{
	r:Math.sqrt(circle_start_rad * 8)
	,x:start_x + 3 * separation
	, y:50
	, shape: "circle"
	, color: "blue"}
	];

	var xScale = d3.scaleLinear().domain([0,200]).range([0,700]);
	var yScale = d3.scaleLinear().domain([0,200]).range([0,700]);


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

	var textBox = svg.append("text")
	.text("2D Area Marker Examples")
	.attr("y", 30)
	.attr("x", 160)
	.attr("font-size", 36)
	.attr("font","Helvetica-Nueue")
	.attr("font-family", "sans-sarif");



	var g = svg.append("g")
	.attr("transform", "translate(200, 0)");

	var rect_label_box = g.append("text")
	.text("Rectangle Markers")
	.attr("y", 300)
	.attr("x", 100)


	var enter_rect = g.selectAll("rect")
	.data(data.filter(function(d){return(d["shape"] == "rect");}))
	.enter()

	var update = enter_rect
	.append("rect")
	.attr("x", function(d){return(xScale(d.x));})
	.attr("y", function(d){return(yScale(d.y - .5 * d.sideLength));})
	.attr("height", function(d){return(xScale(d.sideLength));})
	.attr("width", function(d){return(yScale(d.sideLength));})
	.attr("fill", function(d){return(d.color);});


	var circle_label_box = g.append("text")
	.text("Circle Markers")
	.attr("y", 140)
	.attr("x", 100)


	var enter_circ = g.selectAll("circle")
	.data(data.filter(function(d){return(d["shape"] == "circle");}))
	.enter()

	var update = enter_circ
	.append("circle")
	.attr("cx", function(d){return(xScale(d.x));})
	.attr("cy", function(d){return(yScale(d.y));})
	.attr("r", function(d){return(xScale(d.r));})
	.attr("fill", function(d){return(d.color);});



	</script>
	</body>