H data viz modes

_.md

[ Launch: H data viz ] a811164131245d460057 by thepuzzlemaster
[ Launch: H data viz ] 55a015e5409b49d8fb13 by thepuzzlemaster
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

benjamin.csv

brad.csv

chung.csv

config.json

{"description":"H data viz modes","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}

inlet.js

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 bradData = tributary.brad;
var kristaData = tributary.krista;
var matthewData = tributary.matthew;
var lewisData = tributary.lewis;

var flareData = {
  name: 'flare',
  children: [
    {
      name: 'all',
      children: []
    },
    {
      name: 'comfort',
      children: []
    },
    {
      name: 'sport',
      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['all']) {
      item.selection = 'all';
    }
    
    if (item['comfort']) {
      item.selection = 'comfort';
    }
    
    if (item['sport']) {
      item.selection = 'sport';
    }
    
    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(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] = {
      'all': 0,
      'comfort': 0,
      'sport': 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)); };
      });

  transition.selectAll("text")
    .filter(function(d) { 
//      return true;	//
      return d.parent === focus || this.style.display === "inline"; 
    })
      .style("fill-opacity", function(d) {
        //return 1;
        return d.parent === focus ? 1 : 0; 
      })
      .each("start", function(d) { 
        if (d.parent === focus) this.style.display = "inline"; 
      })
      .each("end", function(d) { 
//        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");

jasonbye.csv

jasongamrath.csv

jeremy.csv

krista.csv

lewis.csv

matthew.csv

nathan.csv

roberta.csv

scott.csv

style.css

.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;
}