Old school D3 from simpler times

All examples By author By category About

RobertDelgado

Full window Github gist

Area (2D) Size example with tilt

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.

forked from RobertDelgado's block: Area (2D) Size example

<!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 = 350;
    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: "rgba(0,0,255,.2)"}
                ,{
                  r:Math.sqrt(circle_start_rad * 2)
                  ,x:start_x + separation
                  , y:50
                  , shape: "circle"
                	, color: "rgba(0,0,255,.4)"}  
                ,{
                  r:Math.sqrt(circle_start_rad * 4)
                  ,x:start_x + 2 * separation
                  , y:50
                  , shape: "circle"
                	, color: "rgba(0,0,255,.6)"}
                ,{
                  r:Math.sqrt(circle_start_rad * 8)
                  ,x:start_x + 3 * separation
                  , y:50
                  , shape: "circle"
                	, color: "rgba(0,0,255,.8)"}
               ];
 
    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",function(d){ return("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("transform", function(d){return "translate(" + xScale(d.x) + "," + rect_level + ") rotate(45)"})
        .attr("y", 0)
        .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>

https://d3js.org/d3.v4.min.js