Skip to content

Instantly share code, notes, and snippets.

@tgk

tgk/README.md

Last active October 6, 2015 19:28
Show Gist options
  • Save tgk/3042216 to your computer and use it in GitHub Desktop.
Save tgk/3042216 to your computer and use it in GitHub Desktop.
Download ZIP
Dots in tables
Raw
README.md

Experiments with very small pie charts and tables with dots whose size represents a quantity.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Pie Chart</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<!--script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script-->
<style type="text/css">
.slice text {
font-size: 16pt;
font-family: Arial;
}
</style>
</head>
<body>
<table>
<tr><td>Type</td><td>Count</td><td></td></tr>
<tr><td>A</td><td align="right">30</td><td width="10" height="10"><div class="dot"></div></td></tr>
<tr><td>B</td><td align="right">400</td><td width="10" height="10"><div class="dot"></div></td></tr>
<tr><td>C</td><td align="right">30</td><td width="10" height="10"><div class="dot"></div></td></tr>
<tr><td></td><td><div id="pie"></div></td></tr>
</table>
<table>
<tr><td>Type</td><td>Count</td><td></td></tr>
<tr><td>A</td><td align="right">30</td><td width="10" height="10"><div class="dot2"></div></td></tr>
<tr><td>B</td><td align="right">400</td><td width="10" height="10"><div class="dot2"></div></td></tr>
<tr><td>C</td><td align="right">30</td><td width="10" height="10"><div class="dot2"></div></td></tr>
<tr><td></td><td><div id="pie"></div></td></tr>
</table>
<script type="text/javascript">
var w = 60, //width
h = 60, //height
r = 30, //radius
color = d3.scale.category20c(); //builtin range of colors
data = [{"label":"one", "value":30},
{"label":"two", "value":400},
{"label":"three", "value":30}];
data2 = [{"label":"one", "value":400},
{"label":"two", "value":30},
{"label":"three", "value":30}];
var vis = d3.select("#pie")
.append("svg:svg") //create the SVG element inside the <body>
.data([data]) //associate our data with the document
.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", h)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(r);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("class", "slice"); //allow us to style things in the slices (like text)
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
var dots = d3.selectAll(".dot").data(data);
var dots2 = d3.selectAll(".dot2").data(data2);
var allDots = d3.selectAll(".dot");
allDots.append("svg:svg")
.append("circle")
.attr("transform", "translate(5, 5)")
.attr("r", function(d, i) {return 2.5*Math.sqrt( (d.value / 100.0));} )
.attr("fill", function(d, i) { return color(i); });
console.log(dots);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment