Skip to content

Instantly share code, notes, and snippets.

@adamfknapp

adamfknapp/.block

Last active September 23, 2017 02:23
Show Gist options
  • Save adamfknapp/7e78932767a8281a7e5f9624aa3bcb6c to your computer and use it in GitHub Desktop.
Save adamfknapp/7e78932767a8281a7e5f9624aa3bcb6c to your computer and use it in GitHub Desktop.
Download ZIP
Position on common scale
Raw
.block
license: mit
Raw
README.md

Built with blockbuilder.org

This is a reproduction of a chart in chapter 5 of Visualization Analysis & Design by Tamara Munzner (2014) (Links to an external site.)Links to an external site. (ISBN 9781466508910)

Raw
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>
//set up Canvas
const svg = d3.select('body').append('svg').attr('width', 300).attr('height', 300);
//---------------------------------------------------------------------
// Circle
svg.append('circle').attr('cx', 200).attr('cy', 50).attr('r', 5).attr('fill', 'black');
//Line
svg.append("line")
.attr("x1", 50)
.attr("y1", 50)
.attr("x2", 275)
.attr("y2", 50)
.attr("stroke-width", 2)
.attr("stroke", "black");
//Left endcap
svg.append("line")
.attr("x1", 50)
.attr("y1", 40)
.attr("x2", 50)
.attr("y2", 60)
.attr("stroke-width", 2)
.attr("stroke", "black");
//right endcap
svg.append("line")
.attr("x1", 275)
.attr("y1", 40)
.attr("x2", 275)
.attr("y2", 60)
.attr("stroke-width", 2)
.attr("stroke", "black");
//---------------------------------------------------------------------
// Circle 2
svg.append('circle').attr('cx', 100).attr('cy', 75).attr('r', 5).attr('fill', 'black');
//Line
svg.append("line")
.attr("x1", 50)
.attr("y1", 75)
.attr("x2", 275)
.attr("y2", 75)
.attr("stroke-width", 2)
.attr("stroke", "black");
//Left endcap
svg.append("line")
.attr("x1", 50)
.attr("y1", 65)
.attr("x2", 50)
.attr("y2", 85)
.attr("stroke-width", 2)
.attr("stroke", "black");
//right endcap
svg.append("line")
.attr("x1", 275)
.attr("y1", 65)
.attr("x2", 275)
.attr("y2", 85)
.attr("stroke-width", 2)
.attr("stroke", "black");
//---------------------------------------------------------------------
// Circle 3
svg.append('circle').attr('cx', 100).attr('cy', 125).attr('r', 5).attr('fill', 'black');
//Line
svg.append("line")
.attr("x1", 50)
.attr("y1", 125)
.attr("x2", 125)
.attr("y2", 125)
.attr("stroke-width", 2)
.attr("stroke", "black");
//Left endcap
svg.append("line")
.attr("x1", 50)
.attr("y1", 115)
.attr("x2", 50)
.attr("y2", 135)
.attr("stroke-width", 2)
.attr("stroke", "black");
//right endcap
svg.append("line")
.attr("x1", 125)
.attr("y1", 115)
.attr("x2", 125)
.attr("y2", 135)
.attr("stroke-width", 2)
.attr("stroke", "black");
//---------------------------------------------------------------------
// Circle 4
svg.append('circle').attr('cx', 200).attr('cy', 150).attr('r', 5).attr('fill', 'black');
//Line
svg.append("line")
.attr("x1", 100)
.attr("y1", 150)
.attr("x2", 275)
.attr("y2", 150)
.attr("stroke-width", 2)
.attr("stroke", "black");
//Left endcap
svg.append("line")
.attr("x1", 100)
.attr("y1", 140)
.attr("x2", 100)
.attr("y2", 160)
.attr("stroke-width", 2)
.attr("stroke", "black");
//right endcap
svg.append("line")
.attr("x1", 275)
.attr("y1", 140)
.attr("x2", 275)
.attr("y2", 160)
.attr("stroke-width", 2)
.attr("stroke", "black");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment