Stack Overflow: 19639779
HTML
<table>
<tbody>
</tbody>
</table>
CSS
body {
font: 10px sans-serif;
margin: 0;
}
path.line {
fill: none;
stroke: #53aee2;
stroke-width: 3;
}
path.area {
fill: #cfddf0;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.y.axis path, .y.axis line {
fill: none;
stroke: #000000;
stroke-width: 1px;
stroke-opacity: 0.06;
}
text {
stroke: none;
fill: #bbbbbb;
font-family:"HelveticaNeue", Helvetica, Arial, sans-serif;
font-size:10px;
}
text.data-label {
text-align: center;
}
JavaScript
var element_id = '#chart';
var em = 16;
var dataset = [{val:44},{val:98},{val:75},{val:33},{val:5}];
var body = d3.select('table tbody');
body.selectAll('tr')
.data(dataset)
.enter()
.append('tr')
.append('td')
.text(function(d){ return d.val; })
.style('color',function(d) {
if(d.val = 33) {
return "black";
} else {
return "red";
}
});