All examples By author By category About

larsvers

Full window Github gist

Step 2: geometric zoom with SVG

This is the first step of the zoom-tutorial D3 Zoom: The Missing Manual.

Here's a list of all code steps:

Step 1: static visual Step 2: geometric SVG zoom Step 3: semantic SVG zoom Step 4: geometric Canvas zoom Step 5: semantic Canvas zoom Step 6: programmatic zoom (bonus) Step 7: design (bonus)

Go here for all the code in one repo.

_{Built with blockbuilder.org}

<!DOCTYPE html>

<head>

<title>Planets</title>
<meta charset="utf-8">

/* HTML elements */
	/* ============= */

/* Base elements */

body {
		font-family: Avenir, sans-serif;
		font-size: 0.75rem;
		margin: 0;
	}

#headline {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
		text-align: center;
		color: #555;
	}

#pink {
		border-bottom: 2px solid deeppink;
		padding-bottom: 0.25rem;
	}
	
	/* Links */

a {
	  color: #555;
	  transition: color 200ms;
	}

a:link {
		text-decoration: none;
	}
	a:visited {
		color: #555;
	}
	a:hover {
		color: deeppink;
	}
	a:active {
		color: #555;	
	}

/* SVG elements */
	/* ============ */

svg {
	  border: 1px solid #ccc;
	}

/* Axes */

.tick text {
	  font-family: Avenir, sans-serif;
	  fill: #555;
	  font-size: 0.75rem;
	}

.tick line, .lines {
	  stroke: #555;
	  stroke-width: 0.5;
	  shape-rendering: crispEdges;
	}

path.domain {
	  display: none;
	}

/* Chart */

circle {
		fill: white;
		stroke: deeppink;
		stroke-width: 4px;
	}

.label {
	  fill: #777;
	}

</style>

</head>

<body>

<h1 id="headline">Measuring our planets' 
	<span id="pink">
		<a href="https://en.wikipedia.org/wiki/Solar_System#Distances_and_scales" target="_blank">distances</a>
	</span>
</h1>

function make(data) {

/* Set up */
  /* ====== */

/* Dimensions and base */
  /* ------------------- */

var margin = { 
    top: window.innerHeight * 0.3, 
    left: 50, 
    bottom: window.innerHeight * 0.4, 
    right: 50 
  }; 
  
  // The chart *and* screen height.
  var height = window.innerHeight - margin.top - margin.bottom;

// Calculate width 
  var mapScale = 1/10e4; 
  var maxDist = d3.max(data, function(d) { return d.distance; });

// The full width of all planets
  var chartWidth = maxDist * mapScale;

// SVG width will only be as large as screen
  var screenWidth = window.innerWidth - margin.left - margin.right;

/* SVG */

var svg = d3.select('#vis')
    .append('svg')
      .attr('width', screenWidth + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
    .append('g')
      .attr('class', 'chart')
      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
  
  var listenerRect = svg
    .append('rect')
      .attr('class', 'listener-rect')
      .attr('x', 0)
      .attr('y', -margin.top)
      .attr('width', screenWidth)
      .attr('height', height + margin.top + margin.bottom)
      .style('opacity', 0);

/* Scales */
  /* ====== */

var rExtent = d3.extent(data, function(d) { return d.radius; });
  
  // Make the sun fit into the height 
  // with a little bit of breathing space.
  var rScale = d3.scaleLinear()
    .domain([0, rExtent[1]])
    .range([3, height/2 * 0.9]);

var xScale = d3.scaleLinear()
    .domain([0, maxDist])
    .range([0, chartWidth]);

/* Axes components */
  /* --------------- */

var xAxis = d3.axisBottom(xScale)
      .tickSizeOuter(0)
      .tickPadding(10)
      .tickValues(data.map(function(el) { return el.distance; }))
      .tickFormat(function(d, i) { 
        return data[i].planet + ' ' + d3.format(',')(d) + ' km'; 
      });

/* Axes draw */
  /* --------- */

// Drawing the axis
  var xAxisDraw = svg.insert('g', ':first-child')
      .attr('class', 'x axis')
      .call(xAxis);

// Move the axis-labels and -lines down
  var labelHeight = xAxisDraw.select('text').node().getBBox().height;
  xAxisDraw.attr('transform', 'translate(0, ' + (height + labelHeight * data.length) + ')'); 
  
  // Position the axis text
  xAxisDraw.selectAll('text')
    .attr('y', function(d, i) { return -(i * labelHeight + labelHeight); })
    .attr('dx', '-0.15em')
    .attr('dy', '1.15em')
    .style('text-anchor', 'start');

// Draw the axis lines
  xAxisDraw.selectAll('line')
    .attr('y1', function(d, i) { return -(i * labelHeight + labelHeight); })
    .attr('y2', function(d, i) { 
      return -(i * labelHeight + labelHeight + // the start position from axis-y 0
        (data.length-1-i) * labelHeight + // label start to the chart bottom
        height); // the height
    });

/* Build vis */
  /* ========= */

/* Sun and planets */
  /* --------------- */

var gPlanets = svg.insert('g', '.listener-rect').attr('class', 'planet-group');

/* Zoom */
  /* ==== */

// Cross-multiplication to get the minimum zoom so that the furthest away planet 
  // (Pluto) just fits on the screen. 0.75 gives some leeway for the label.
  var minZoom = 1 / (chartWidth / window.innerWidth) * 0.75;

// Define the zoom behaviour
  var zoom = d3.zoom()
    .scaleExtent([minZoom, 20])
    .on('zoom', zoomed);

// Listen for zoom events
  listenerRect.call(zoom);

// Zoom function
  function zoomed() {

// Get the transform
    var transform = d3.event.transform;

// Lock at the Sun
    transform.x = Math.min(0, transform.x);
    transform.y = 0;

// Move the planets (geometric)
    gPlanets.attr('transform', transform.toString());

// Re-scale the x scale
    var xScaleNew = transform.rescaleX(xScale);

// Semantically zoom and pan the axis
    xAxis.scale(xScaleNew);
    xAxisDraw.call(xAxis);

// Stagger the axis-labels 
    xAxisDraw.selectAll('text')
      .attr('y', function(d, i) { return -(i * labelHeight + labelHeight); })

// Stagger the axis-lines
    xAxisDraw.selectAll('line')
      .attr('y1', function(d, i) { return -(i * labelHeight + labelHeight); })
      .attr('y2', function(d, i) { 
        return -(i * labelHeight + labelHeight + (data.length-1-i) * labelHeight + height); 
      });

} // zoomed()

} // make()

/* Data load and visual */
/* ==================== */

function row(d) {

return {
    planet: d.planet,
    distance: +d.distance,
    radius: +d.radius,
    text: d.text
  };

}

d3.csv('planets.csv', row, function(error, data) {
  if (error) throw error;
  console.log(data);

make(data);

});

</script>

</body>

</html>

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