Skip to content

Instantly share code, notes, and snippets.

@diggetybo

diggetybo/dt.csv

Last active May 16, 2017 06:53
Download ZIP
Decision Tree Plot
Raw
dt.csv
x1 x2 y1 y2 id
0.000000000000000000e+00 7.000000000000000000e+00 0.000000000000000000e+00 8.000000119209289551e-01 0
0.000000000000000000e+00 4.949999809265136719e+00 8.000000119209289551e-01 1.650000095367431641e+00 1
0.000000000000000000e+00 4.949999809265136719e+00 1.650000095367431641e+00 1.750000000000000000e+00 2
4.949999809265136719e+00 7.000000000000000000e+00 8.000000119209289551e-01 1.549999952316284180e+00 2
4.949999809265136719e+00 5.449999809265136719e+00 1.549999952316284180e+00 1.750000000000000000e+00 1
5.449999809265136719e+00 7.000000000000000000e+00 1.549999952316284180e+00 1.750000000000000000e+00 2
0.000000000000000000e+00 4.850000381469726562e+00 1.750000000000000000e+00 3.000000000000000000e+00 2
4.850000381469726562e+00 7.000000000000000000e+00 1.750000000000000000e+00 3.000000000000000000e+00 2
Raw
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var height = 300;
var width = 300;
var margins = { left: 50, top: 50, right: 0, bottom: 300 };
var totalHeight = height+margins.top+margins.bottom;
var totalWidth = width+margins.left+margins.right;
var svg = d3.select("body")
.append("svg")
.attr("width", totalWidth)
.attr("height", totalHeight);
var colorMap = {
0: "blue",
1: "red",
2: "yellow",
};
var xScale = d3.scale.linear().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
xScale.domain([0,7]);
yScale.domain([0,3]);
var xAxis = d3.svg.axis().scale(xScale).orient('bottom').ticks(5);
var yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(5);
var yAxisNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
.call(yAxis);
styleAxisNodes(yAxisNodes);
var xAxisNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left) + ',' + (totalHeight - margins.bottom) + ')')
.call(xAxis);
styleAxisNodes(xAxisNodes);
d3.csv("dt.csv", function(raw_data) {
var data = raw_data.map(function (d) {
return { x1: +d.x1, x2:+d.x2, y1:+d.y1, y2:+d.y2, id: +d.id}
});
console.log(raw_data)
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) { return xScale(d.x1); })
.attr("width", function(d) { return Math.abs(xScale(d.x2)-xScale(d.x1)); })
.attr("y", function(d) { return yScale(d.y2); })
.attr("height", function(d) { return Math.abs(yScale(d.y2)-yScale(d.y1)); })
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.style('stroke', 'none')
.style('opacity',.5)
.style("stroke-linejoin","round")
.style('fill', function(d) {
var colorID = d.id;
console.log(colorMap[colorID])
if (colorID) {
return colorMap[colorID];
}
});
});
function styleAxisNodes(axisNodes) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
'stroke-width': 2,
stroke: 'black'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 2,
stroke: 'black'
});
axisNodes.selectAll("text")
.attr({
fill: 'black',
'font-family': 'play'
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment