Skip to content

Instantly share code, notes, and snippets.

@mkajava
Forked from kerryrodden/.block
Last active December 28, 2015 14:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mkajava/7515402 to your computer and use it in GitHub Desktop.

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data from Kaggle's See Click Predict Fix competion. The diagram shows sum of comments by city, tag type and source.

This diagram is covered by the Apache license:

Copyright 2013 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

paths counts
City: Chicago-Tag: animal_problem-Source: iphone 2
City: Chicago-Tag: graffiti-Source: android 29
City: Chicago-Tag: graffiti-Source: iphone 6
City: Chicago-Tag: graffiti-Source: web 7
City: Chicago-Tag: hydrant-Source: web 2
City: Chicago-Tag: pothole-Source: android 2
City: Chicago-Tag: pothole-Source: iphone 1
City: Chicago-Tag: road_safety-Source: iphone 1
City: Chicago-Tag: sidewalk-Source: iphone 3
City: Chicago-Tag: signs-Source: android 5
City: Chicago-Tag: signs-Source: iphone 1
City: Chicago-Tag: street_light-Source: android 8
City: Chicago-Tag: traffic-Source: iphone 1
City: Chicago-Tag: trash-Source: iphone 1
City: Chicago-Tag: trash-Source: web 1
City: Chicago-Tag: unknown-Source: android 4
City: Chicago-Tag: unknown-Source: iphone 1
City: Chicago-Tag: unknown-Source: remote_api_created 1
City: Chicago-Tag: unknown-Source: web 1
City: New Haven-Tag: abandoned_vehicle-Source: iphone 1
City: New Haven-Tag: abandoned_vehicle-Source: web 4
City: New Haven-Tag: animal_problem-Source: New Map Widget 3
City: New Haven-Tag: bench-Source: web 2
City: New Haven-Tag: bike_concern-Source: iphone 3
City: New Haven-Tag: bike_concern-Source: web 11
City: New Haven-Tag: blighted_property-Source: web 11
City: New Haven-Tag: crosswalk-Source: web 9
City: New Haven-Tag: drain_problem-Source: city_initiated 2
City: New Haven-Tag: drain_problem-Source: iphone 5
City: New Haven-Tag: drain_problem-Source: web 1
City: New Haven-Tag: drug_dealing-Source: web 1
City: New Haven-Tag: graffiti-Source: iphone 16
City: New Haven-Tag: graffiti-Source: web 1
City: New Haven-Tag: noise_complaint-Source: iphone 5
City: New Haven-Tag: odor-Source: iphone 2
City: New Haven-Tag: pothole-Source: city_initiated 1
City: New Haven-Tag: pothole-Source: web 13
City: New Haven-Tag: road_safety-Source: iphone 4
City: New Haven-Tag: road_safety-Source: web 3
City: New Haven-Tag: robbery-Source: web 6
City: New Haven-Tag: sidewalk-Source: city_initiated 3
City: New Haven-Tag: sidewalk-Source: iphone 1
City: New Haven-Tag: sidewalk-Source: Mobile Site 1
City: New Haven-Tag: sidewalk-Source: web 23
City: New Haven-Tag: signs-Source: iphone 5
City: New Haven-Tag: signs-Source: web 26
City: New Haven-Tag: street_light-Source: web 3
City: New Haven-Tag: traffic-Source: web 1
City: New Haven-Tag: trash-Source: city_initiated 2
City: New Haven-Tag: trash-Source: iphone 8
City: New Haven-Tag: trash-Source: web 40
City: New Haven-Tag: tree-Source: city_initiated 1
City: New Haven-Tag: tree-Source: iphone 1
City: New Haven-Tag: tree-Source: web 2
City: New Haven-Tag: unknown-Source: android 8
City: New Haven-Tag: unknown-Source: city_initiated 3
City: New Haven-Tag: unknown-Source: iphone 3
City: New Haven-Tag: unknown-Source: New Map Widget 4
City: New Haven-Tag: unknown-Source: web 14
City: New Haven-Tag: combined-Source: iphone 3
City: New Haven-Tag: combined-Source: Mobile Site 1
City: New Haven-Tag: combined-Source: web 8
City: Oakland-Tag: bike_concern-Source: New Map Widget 5
City: Oakland-Tag: bike_concern-Source: web 5
City: Oakland-Tag: blighted_property-Source: iphone 9
City: Oakland-Tag: blighted_property-Source: web 15
City: Oakland-Tag: drain_problem-Source: android 1
City: Oakland-Tag: drain_problem-Source: iphone 2
City: Oakland-Tag: graffiti-Source: android 1
City: Oakland-Tag: graffiti-Source: iphone 35
City: Oakland-Tag: graffiti-Source: web 18
City: Oakland-Tag: odor-Source: Map Widget 1
City: Oakland-Tag: odor-Source: web 5
City: Oakland-Tag: overgrowth-Source: iphone 1
City: Oakland-Tag: pothole-Source: android 2
City: Oakland-Tag: pothole-Source: iphone 10
City: Oakland-Tag: pothole-Source: Mobile Site 1
City: Oakland-Tag: pothole-Source: web 7
City: Oakland-Tag: road_safety-Source: iphone 4
City: Oakland-Tag: robbery-Source: web 3
City: Oakland-Tag: sidewalk-Source: android 4
City: Oakland-Tag: sidewalk-Source: iphone 10
City: Oakland-Tag: sidewalk-Source: web 3
City: Oakland-Tag: signs-Source: web 5
City: Oakland-Tag: street_light-Source: android 3
City: Oakland-Tag: street_light-Source: web 3
City: Oakland-Tag: traffic-Source: web 1
City: Oakland-Tag: trash-Source: android 13
City: Oakland-Tag: trash-Source: iphone 29
City: Oakland-Tag: trash-Source: New Map Widget 1
City: Oakland-Tag: trash-Source: web 18
City: Oakland-Tag: tree-Source: android 2
City: Oakland-Tag: tree-Source: iphone 2
City: Oakland-Tag: tree-Source: web 4
City: Oakland-Tag: unknown-Source: android 1
City: Oakland-Tag: unknown-Source: iphone 4
City: Oakland-Tag: unknown-Source: Mobile Site 2
City: Oakland-Tag: unknown-Source: remote_api_created 4
City: Oakland-Tag: unknown-Source: web 8
City: Oakland-Tag: combined-Source: iphone 4
City: Oakland-Tag: combined-Source: Map Widget 1
City: Oakland-Tag: combined-Source: web 2
City: Richmond-Tag: abandoned_vehicle-Source: Mobile Site 1
City: Richmond-Tag: animal_problem-Source: iphone 2
City: Richmond-Tag: blighted_property-Source: android 4
City: Richmond-Tag: blighted_property-Source: Mobile Site 2
City: Richmond-Tag: blighted_property-Source: web 50
City: Richmond-Tag: bridge-Source: android 2
City: Richmond-Tag: drain_problem-Source: android 2
City: Richmond-Tag: drain_problem-Source: iphone 2
City: Richmond-Tag: drain_problem-Source: New Map Widget 2
City: Richmond-Tag: drain_problem-Source: web 7
City: Richmond-Tag: graffiti-Source: New Map Widget 2
City: Richmond-Tag: graffiti-Source: web 1
City: Richmond-Tag: hydrant-Source: web 1
City: Richmond-Tag: odor-Source: web 6
City: Richmond-Tag: overgrowth-Source: iphone 1
City: Richmond-Tag: overgrowth-Source: New Map Widget 6
City: Richmond-Tag: pothole-Source: android 14
City: Richmond-Tag: pothole-Source: city_initiated 7
City: Richmond-Tag: pothole-Source: iphone 4
City: Richmond-Tag: pothole-Source: Mobile Site 1
City: Richmond-Tag: pothole-Source: New Map Widget 10
City: Richmond-Tag: pothole-Source: web 31
City: Richmond-Tag: road_safety-Source: web 13
City: Richmond-Tag: sidewalk-Source: iphone 1
City: Richmond-Tag: sidewalk-Source: New Map Widget 4
City: Richmond-Tag: sidewalk-Source: web 2
City: Richmond-Tag: signs-Source: iphone 1
City: Richmond-Tag: signs-Source: web 16
City: Richmond-Tag: street_light-Source: android 1
City: Richmond-Tag: street_light-Source: city_initiated 1
City: Richmond-Tag: street_light-Source: iphone 1
City: Richmond-Tag: street_light-Source: web 8
City: Richmond-Tag: traffic-Source: web 5
City: Richmond-Tag: trash-Source: city_initiated 53
City: Richmond-Tag: trash-Source: iphone 10
City: Richmond-Tag: trash-Source: New Map Widget 14
City: Richmond-Tag: trash-Source: web 247
City: Richmond-Tag: tree-Source: iphone 2
City: Richmond-Tag: tree-Source: New Map Widget 9
City: Richmond-Tag: tree-Source: web 49
City: Richmond-Tag: unknown-Source: android 3
City: Richmond-Tag: unknown-Source: city_initiated 32
City: Richmond-Tag: unknown-Source: iphone 4
City: Richmond-Tag: unknown-Source: Mobile Site 1
City: Richmond-Tag: unknown-Source: New Map Widget 14
City: Richmond-Tag: unknown-Source: web 101
City: Richmond-Tag: combined-Source: android 1
City: Richmond-Tag: combined-Source: web 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sequences sunburst for SeeClickFix</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" type="text/css" href="sequences.css"/>
</head>
<body>
<div id="main">
<div id="sequence"></div>
<div id="chart">
<div id="explanation" style="visibility: hidden;">
<span id="percentage"></span><br/>
of comments have this set of features
</div>
</div>
</div>
<div id="sidebar">
<!-- <input type="checkbox" id="togglelegend"> Legend<br/> -->
Legend
<div id="legend" style="visibility: hidden;"></div>
</div>
<script type="text/javascript" src="sequences.js"></script>
<script type="text/javascript">
// Hack to make this example display correctly in an iframe on bl.ocks.org
d3.select(self.frameElement).style("height", "700px");
</script>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 400;
background-color: #fff;
width: 960px;
height: 700px;
margin-top: 10px;
}
#main {
float: left;
width: 750px;
}
#sidebar {
float: right;
width: 100px;
}
#sequence {
width: 600px;
height: 70px;
}
#legend {
padding: 10px 0 0 3px;
}
#sequence text, #legend text {
font-weight: 600;
fill: #fff;
}
#chart {
position: relative;
}
#chart path {
stroke: #fff;
}
#explanation {
position: absolute;
top: 260px;
left: 305px;
width: 140px;
text-align: center;
color: #666;
z-index: -1;
}
#percentage {
font-size: 2.5em;
}
// Dimensions of sunburst.
var width = 750;
var height = 600;
var radius = Math.min(width, height) / 2;
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
w: 165, h: 30, s: 3, t: 10
};
// Mapping of step names to colors.
var colors = {
"City: Chicago": "#0000FF",
"City: New Haven": "#44BBCC",
"City: Oakland": "#88DDDD",
"City: Richmond": "#0066CC",
"Tag: street_light": "#67001F",
"Tag: graffiti": "#B2182B",
"Tag: pothole": "#D6604D",
"Tag: tree": "#F4A582",
"Tag: trash": "#92C5DE",
"Tag: unknown": "#4393C3",
"Source: web": "#4575B4",
"Source: city_initiated": "#74ADD1",
"Source: remote_api_created": "#9970AB",
"Source: android": "#5AAE61",
"Source: iphone": "#1B7837",
"Source: New Map Widget": "#00441B"
};
// Total size of all segments; we set this later, after loading the data.
var totalSize = 0;
var vis = d3.select("#chart").append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("id", "container")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var partition = d3.layout.partition()
.size([2 * Math.PI, radius * radius])
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
// Use d3.text and d3.csv.parseRows so that we do not need to have a header
// row, and can receive the csv as an array of arrays.
d3.text("comment-sequences.csv", function(text) {
var csv = d3.csv.parseRows(text);
var json = buildHierarchy(csv);
createVisualization(json);
});
// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) {
// Basic setup of page elements.
initializeBreadcrumbTrail();
drawLegend();
d3.select("#togglelegend").on("click", toggleLegend);
toggleLegend();
// Bounding circle underneath the sunburst, to make it easier to detect
// when the mouse leaves the parent g.
vis.append("svg:circle")
.attr("r", radius)
.style("opacity", 0);
// For efficiency, filter nodes to keep only those large enough to see.
var nodes = partition.nodes(json)
.filter(function(d) {
return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
});
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter().append("svg:path")
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", function(d) { return colors[d.name]; })
.style("opacity", 1)
.on("mouseover", mouseover);
// Add the mouseleave handler to the bounding circle.
d3.select("#container").on("mouseleave", mouseleave);
// Get total size of the tree = value of root node from partition.
totalSize = path.node().__data__.value;
};
// Fade all but the current sequence, and show it in the breadcrumb trail.
function mouseover(d) {
var percentage = (100 * d.value / totalSize).toPrecision(3);
var percentageString = percentage + "% (" + d.value + "/" + totalSize + ")";
if (percentage < 0.1) {
percentageString = "< 0.1% (" + d.value + "/" + totalSize + ")";
}
d3.select("#percentage")
.text(percentageString);
d3.select("#explanation")
.style("visibility", "");
var sequenceArray = getAncestors(d);
updateBreadcrumbs(sequenceArray, percentageString);
// Fade all the segments.
d3.selectAll("path")
.style("opacity", 0.3);
// Then highlight only those that are an ancestor of the current segment.
vis.selectAll("path")
.filter(function(node) {
return (sequenceArray.indexOf(node) >= 0);
})
.style("opacity", 1);
}
// Restore everything to full opacity when moving off the visualization.
function mouseleave(d) {
// Hide the breadcrumb trail
d3.select("#trail")
.style("visibility", "hidden");
// Deactivate all segments during transition.
d3.selectAll("path").on("mouseover", null);
// Transition each segment to full opacity and then reactivate it.
d3.selectAll("path")
.transition()
.duration(1000)
.style("opacity", 1)
.each("end", function() {
d3.select(this).on("mouseover", mouseover);
});
d3.select("#explanation")
.transition()
.duration(1000)
.style("visibility", "hidden");
}
// Given a node in a partition layout, return an array of all of its ancestor
// nodes, highest first, but excluding the root.
function getAncestors(node) {
var path = [];
var current = node;
while (current.parent) {
path.unshift(current);
current = current.parent;
}
return path;
}
function initializeBreadcrumbTrail() {
// Add the svg area.
var trail = d3.select("#sequence").append("svg:svg")
.attr("width", width)
.attr("height", 50)
.attr("id", "trail");
// Add the label at the end, for the percentage.
trail.append("svg:text")
.attr("id", "endlabel")
.style("fill", "#000");
}
// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) {
var points = [];
points.push("0,0");
points.push(b.w + ",0");
points.push(b.w + b.t + "," + (b.h / 2));
points.push(b.w + "," + b.h);
points.push("0," + b.h);
if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
points.push(b.t + "," + (b.h / 2));
}
return points.join(" ");
}
// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) {
// Data join; key function combines name and depth (= position in sequence).
var g = d3.select("#trail")
.selectAll("g")
.data(nodeArray, function(d) { return d.name + d.depth; });
// Add breadcrumb and label for entering nodes.
var entering = g.enter().append("svg:g");
entering.append("svg:polygon")
.attr("points", breadcrumbPoints)
.style("fill", function(d) { return colors[d.name]; });
entering.append("svg:text")
.attr("x", (b.w + b.t) / 2)
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; });
// Set position for entering and updating nodes.
g.attr("transform", function(d, i) {
return "translate(" + i * (b.w + b.s) + ", 0)";
});
// Remove exiting nodes.
g.exit().remove();
// Now move and update the percentage at the end.
d3.select("#trail").select("#endlabel")
.attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(percentageString);
// Make the breadcrumb trail visible, if it's hidden.
d3.select("#trail")
.style("visibility", "");
}
function drawLegend() {
// Dimensions of legend item: width, height, spacing, radius of rounded rect.
var li = {
w: 130, h: 30, s: 3, r: 3
};
var legend = d3.select("#legend").append("svg:svg")
.attr("width", li.w)
.attr("height", d3.keys(colors).length * (li.h + li.s));
var g = legend.selectAll("g")
.data(d3.entries(colors))
.enter().append("svg:g")
.attr("transform", function(d, i) {
return "translate(0," + i * (li.h + li.s) + ")";
});
g.append("svg:rect")
.attr("rx", li.r)
.attr("ry", li.r)
.attr("width", li.w)
.attr("height", li.h)
.style("fill", function(d) { return d.value; });
g.append("svg:text")
.attr("x", li.w / 2)
.attr("y", li.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.key; });
}
function toggleLegend() {
var legend = d3.select("#legend");
if (legend.style("visibility") == "hidden") {
legend.style("visibility", "");
} else {
legend.style("visibility", "hidden");
}
}
// Take a 2-column CSV and transform it into a hierarchical structure suitable
// for a partition layout. The first column is a sequence of step names, from
// root to leaf, separated by hyphens. The second column is a count of how
// often that sequence occurred.
function buildHierarchy(csv) {
var root = {"name": "root", "children": []};
for (var i = 0; i < csv.length; i++) {
var sequence = csv[i][0];
var size = +csv[i][1];
if (isNaN(size)) { // e.g. if this is a header row
continue;
}
var parts = sequence.split("-");
var currentNode = root;
for (var j = 0; j < parts.length; j++) {
var children = currentNode["children"];
var nodeName = parts[j];
var childNode;
if (j + 1 < parts.length) {
// Not yet at the end of the sequence; move down the tree.
var foundChild = false;
for (var k = 0; k < children.length; k++) {
if (children[k]["name"] == nodeName) {
childNode = children[k];
foundChild = true;
break;
}
}
// If we don't already have a child node for this branch, create it.
if (!foundChild) {
childNode = {"name": nodeName, "children": []};
children.push(childNode);
}
currentNode = childNode;
} else {
// Reached the end of the sequence; create a leaf node.
childNode = {"name": nodeName, "size": size};
children.push(childNode);
}
}
}
return root;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment