ruthanium · October 13, 2015 07:34
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang='en'>
 <head>
  <meta charset='utf-8'>
  <title>
      Table with nested SVG
  </title>
  <script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
  <style type='text/css'>
    body
    {
      font-family: sans-serif;
      font-size: 11px;
      height:100%;
    }
    html
    {
      height:100%;
    }
    svg
    {
      display:block;
    }
    table
    {
      background: #FFFFFF;
      /*border: solid 1px #DDDDDD;*/
      border: 0px;
      margin-bottom: 1.25rem;
      table-layout: auto;
    }
    table thead
    {
      background-color: black;
    }
    table thead tr th,
    table thead tr td
    {
      color: #f5f5f5;
      background-color: #555;
      text-align: center;
      font-size: 0.675rem;
      font-weight: 400;
      padding: 0.5rem 0.625rem 0.625rem;
    }
    
    table tfoot
    {
      background: #F5F5F5;
    }
    table tfoot tr th,
    table tfoot tr td
    {
      color: #222222;
      font-size: 0.675rem;
      font-weight: bold;
      padding: 0.5rem 0.625rem 0.625rem;
    }
    table tr th,
    table tr td
    {
      color: #222222;
      font-size: 0.675rem;
      padding: 0.5625rem 0.625rem;
      text-align: left;
    }
    
    table tr.odd, table tr.alt, table tr:nth-of-type(odd)
    {
        background: #F9F9F9;
    }
    table tr.even, table tr.alt, table tr:nth-of-type(even)
    {
        background: white;
    }
    table thead tr th,
    table tfoot tr th,
    table tfoot tr td,
    table tbody tr th,
    table tbody tr td,
    table tr td
    {
      display: table-cell;
      line-height: 1.125rem;
    }
  </style>
 </head>
 <body>
  <table>
    <thead>
      <tr>
        <th>gene</th>
        <th>organism</th>
        <th>score</th>
        <th>processes</th>
        <th>tissues</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
 <script>
 // gene, org, score, processes, tissues
  data = [["spn-A", "DME", "1.00e-16", "0.32", "0.01"],["Rad51", "MMU", "4.71e-12", "0.25", "0.40"],
  ["rad-51", "CEL", "5.10e-11", "0.75", "0.05"],
  ["rad51", "DRE", "7.89e-09", "0.14", "0.31"],["RAD51", "SCE", "5.15e-06", "0.28", "0.10"]];

  // light blue to dark blue
  var colorScale = d3.scale.linear()
    .range(["#0fdbff", "#00798f"]).domain([0, 1]);

  var tr = d3.select("tbody").selectAll("tr")
    .data(data)
    .enter().append("tr");

  tr.selectAll("td")
    .data(function(d){ return d; })
    .enter().append("td")
      .text(function(d, i) {
        if ((i != 3) && (i != 4))
        return d;
      });

  //append svg elements to two of the columns
  tr.selectAll("td").each(function(d, i) {
    var td = d3.select(this); 
    if ((i == 3) || (i == 4))
    {
      var g = td.append("svg")
        .attr("width", 80)
        .attr("height", 14);
      g.append("rect")
        .attr("width", (Number(d) * 70))
        .attr("height", 14)
        .style("fill", function(d) { return colorScale(Number(d)); });
      g.append("text")
        .attr("x", 30)
        .attr("y", 11)
        .attr("font-size", "10px")
        .text(d);
    }
  })
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<meta charset='utf-8'>
	<title>
	Table with nested SVG
	</title>
	<script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
	<style type='text/css'>
	body
	{
	font-family: sans-serif;
	font-size: 11px;
	height:100%;
	}
	html
	{
	height:100%;
	}
	svg
	{
	display:block;
	}
	table
	{
	background: #FFFFFF;
	/border: solid 1px #DDDDDD;/
	border: 0px;
	margin-bottom: 1.25rem;
	table-layout: auto;
	}
	table thead
	{
	background-color: black;
	}
	table thead tr th,
	table thead tr td
	{
	color: #f5f5f5;
	background-color: #555;
	text-align: center;
	font-size: 0.675rem;
	font-weight: 400;
	padding: 0.5rem 0.625rem 0.625rem;
	}

	table tfoot
	{
	background: #F5F5F5;
	}
	table tfoot tr th,
	table tfoot tr td
	{
	color: #222222;
	font-size: 0.675rem;
	font-weight: bold;
	padding: 0.5rem 0.625rem 0.625rem;
	}
	table tr th,
	table tr td
	{
	color: #222222;
	font-size: 0.675rem;
	padding: 0.5625rem 0.625rem;
	text-align: left;
	}

	table tr.odd, table tr.alt, table tr:nth-of-type(odd)
	{
	background: #F9F9F9;
	}
	table tr.even, table tr.alt, table tr:nth-of-type(even)
	{
	background: white;
	}
	table thead tr th,
	table tfoot tr th,
	table tfoot tr td,
	table tbody tr th,
	table tbody tr td,
	table tr td
	{
	display: table-cell;
	line-height: 1.125rem;
	}
	</style>
	</head>
	<body>
	<table>
	<thead>
	<tr>
	<th>gene</th>
	<th>organism</th>
	<th>score</th>
	<th>processes</th>
	<th>tissues</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	<script>
	// gene, org, score, processes, tissues
	data = [["spn-A", "DME", "1.00e-16", "0.32", "0.01"],["Rad51", "MMU", "4.71e-12", "0.25", "0.40"],
	["rad-51", "CEL", "5.10e-11", "0.75", "0.05"],
	["rad51", "DRE", "7.89e-09", "0.14", "0.31"],["RAD51", "SCE", "5.15e-06", "0.28", "0.10"]];

	// light blue to dark blue
	var colorScale = d3.scale.linear()
	.range(["#0fdbff", "#00798f"]).domain([0, 1]);

	var tr = d3.select("tbody").selectAll("tr")
	.data(data)
	.enter().append("tr");

	tr.selectAll("td")
	.data(function(d){ return d; })
	.enter().append("td")
	.text(function(d, i) {
	if ((i != 3) && (i != 4))
	return d;
	});

	//append svg elements to two of the columns
	tr.selectAll("td").each(function(d, i) {
	var td = d3.select(this);
	if ((i == 3) \|\| (i == 4))
	{
	var g = td.append("svg")
	.attr("width", 80)
	.attr("height", 14);
	g.append("rect")
	.attr("width", (Number(d) * 70))
	.attr("height", 14)
	.style("fill", function(d) { return colorScale(Number(d)); });
	g.append("text")
	.attr("x", 30)
	.attr("y", 11)
	.attr("font-size", "10px")
	.text(d);
	}
	})
	</script>
	</body>
	</html>