Skip to content

Instantly share code, notes, and snippets.

@thepuzzlemaster
Last active August 29, 2015 14:19
Show Gist options
  • Save thepuzzlemaster/4c4e3abb20e2d7944371 to your computer and use it in GitHub Desktop.
Save thepuzzlemaster/4c4e3abb20e2d7944371 to your computer and use it in GitHub Desktop.
H data viz label-hide
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Benjamin 2
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Brad 1
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Chung 3
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
{"description":"H data viz label-hide","endpoint":"","display":"svg","public":true,"require":[{"name":"lodash","url":"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.1.0/lodash.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"roberta.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"jasonbye.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chung.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"testdata.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"jasongamrath":{"default":true,"vim":false,"emacs":false,"fontSize":12},"scott.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"nathan.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"matthew.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"lewis.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"krista.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"jeremy.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"brad.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"benjamin.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"george.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"jasongamrath.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X George 2
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
console.clear();
var performanceFeatures = [
'Shift Indicator',
'Oil Temp',
'0-60 Timer',
'Oil Pressure',
'Air/Fuel Ratio',
'Torque',
'Coolant Temp',
'Transmission Temp',
'Tire Temp',
'G-Meter',
'Horse Power',
'Tire Pressure',
'Boost Pressure',
'Launch Control',
'Intake Air Temp',
'Lap Timer'
];
var svg = d3.select("svg")
var fullData = tributary.roberta;
var robertaData = tributary.roberta;
var chungData = tributary.chung;
var jasonbyeData = tributary.jasonbye;
var jasongamrathData = tributary.jasongamrath;
var jeremyData = tributary.jeremy;
var benjaminData = tributary.benjamin;
var scottData = tributary.scott;
var nathanData = tributary.nathan;
var georgeData = tributary.george;
var bradData = tributary.brad;
var kristaData = tributary.krista;
var matthewData = tributary.matthew;
var lewisData = tributary.lewis;
var flareData = {
name: 'flare',
children: [
{
name: 'M-CS',
children: []
},
{
name: 'M-IC',
children: []
},
{
name: 'N-CS',
children: []
},
{
name: 'N-IC',
children: []
},
{
name: 'X',
children: []
},
{
name: 'NA',
children: []
}
]
};
var allData = [];
var parseData = function(data) {
var name = '';
var priority = 0;
var returnData = _.map(data, function(item) {
name = item.Name || name;
priority = item.Priority || priority;
if (item['M-CS']) {
item.selection = 'M-CS';
}
if (item['M-IC']) {
item.selection = 'M-IC';
}
if (item['N-CS']) {
item.selection = 'N-CS';
}
if (item['N-IC']) {
item.selection = 'N-IC';
}
if (item['X']) {
item.selection = 'X';
}
if (item['NA']) {
item.selection = 'NA';
}
item.name = name;
item.priority = priority;
return item;
});
return returnData;
return _.groupBy(returnData, 'selection');
};
allData = allData.concat(parseData(robertaData));
allData = allData.concat(parseData(chungData));
allData = allData.concat(parseData(jasonbyeData));
allData = allData.concat(parseData(jasongamrathData));
allData = allData.concat(parseData(jeremyData));
allData = allData.concat(parseData(benjaminData));
allData = allData.concat(parseData(scottData));
allData = allData.concat(parseData(nathanData));
allData = allData.concat(parseData(georgeData));
allData = allData.concat(parseData(bradData));
allData = allData.concat(parseData(kristaData));
allData = allData.concat(parseData(matthewData));
allData = allData.concat(parseData(lewisData));
console.log(jasongamrathData, 'jasonData');
//allData = _.groupBy(allData, 'selection');
console.log('allData', allData);
allData = _.filter(allData, function(item) {
// return item.priority != 1;
return true
});
allData = _.filter(allData, function(item) {
// return item.priority != 2;
return true;
});
allData = _.filter(allData, function(item) {
// return item.priority != 3;
return true;
});
var peopleCount = _.filter(allData, {Feature: 'Lap Timer'}).length;
console.log(peopleCount, 'peopleCount');
var featureData = {};
_.forEach(allData, function(item) {
var currentFeature;
if (!featureData[item.Feature]) {
featureData[item.Feature] = {
'M-IC': 0,
'M-CS': 0,
'N-IC': 0,
'N-CS': 0,
'X': 0,
'NA': 0
};
}
currentFeature = featureData[item.Feature];
currentFeature[item.selection] ++;
});
console.log(featureData, 'featureData');
console.log(allData, 'allData after filter');
_.forEach(allData, function(item) {
var selectedFlare = _.findWhere(flareData.children, {name: item.selection});
var selectedFeature;
if (selectedFlare) {
selectedFeature = _.findWhere(selectedFlare.children, {name: item.Feature});
if (selectedFeature) {
selectedFeature.size ++;
} else {
selectedFlare.children.push({
name: item.Feature,
size: 1
});
}
}
});
console.log(flareData,'flareData');
var margin = 20;
var diameter = 1250;
var moveX = 0;
var moveY = 0;
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; })
var svg = d3.select("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + (diameter / 2 + moveX * 100) + "," + (diameter / 2 + moveY * 100) + ")");
var focus = flareData;
var nodes = pack.nodes(flareData);
var view;
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) {
if (performanceFeatures.indexOf(d.name) !== -1) {
return '#ffdbe3'
}
return d.children ? color(d.depth) : null;
})
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) {
// return 1;
return d.parent === flareData ? 1 : 0;
})
.style("display", function(d) {
return null;
return d.parent === flareData ? null : "none";
})
.text(function(d) {
var size = d.size || 0;
size = size + '/' + peopleCount;
size = ' (' + size + ')';
if (!d.size) {
size = '';
}
return d.name + size;
});
var node = svg.selectAll("circle,text");
d3.select("body")
.style("background", color(-1))
.on("click", function() { zoom(flareData); });
zoomTo([flareData.x, flareData.y, flareData.r * 2 + margin]);
function zoom(d) {
console.log('zoom');
var focus0 = focus;
focus = d;
zoomTo([d.x, d.y, d.r * 2 + margin]);
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
console.log('tweening');
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function(t) { zoomTo(i(t)); };
});
d3.selectAll("text")
.filter(function(d) {
return d.parent === focus || this.style.display === "inline";
})
.style("fill-opacity", function(d) {
return d.parent === focus ? 1 : 0;
})
.style('fill-opacity', function(d) {
console.log(this, 'this');
})
.each(function(d) {
if (d.parent === focus) this.style.display = "inline";
if (d.parent !== focus) this.style.display = "none";
});
}
function zoomTo(v) {
console.log('zoomTo', v);
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) {
return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
});
circle.attr("r", function(d) { return d.r * k; });
}
//d3.select(self.frameElement).style("height", diameter + "px");
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Jason 1 1
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Jason 2 2
Shift Indicator
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Jeremy 1
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Krista 3
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Lewis 2
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Matthew 2
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Nathan 2
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Roberta 3
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
Feature M-IC M-CS N-IC N-CS X NA Name Priority
Current Gear X Scott 2
Shift Indicator X
Oil Temp X
Speedometer X
Tachometer X
Engine Temp X
Fuel Gauge X
Odometer X
Service Alerts X
Climate Control (HVAC) X
Outside Temp X
Time X
Current Location X
Current Song X
Incoming Call Alert X
Range X
Current MPG X
0-60 Timer X
Oil Pressure X
Air/Fuel Ratio X
Torque X
Compass X
Upcoming Turn X
Coolant Temp X
Transmission Temp X
Call Status X
Tire Temp X
G-Meter X
Horse Power X
Tire Pressure X
Boost Pressure X
Launch Control X
Intake Air Temp X
Lap Timer X
Digital MPH X
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.label {
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment