D3 Examples - loom + strings in progress

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #chart { text-align: center; }
    .chord { fill-opacity: .7; }
  </style>
</head>
​
<body>
        
    <div id="chart"></div>
​
    <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="loom.js"></script>
    
    <script>
​
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {left:120, top:50, right:120, bottom:50},
         width = 710,
        height = 600,
        innerRadius = 244,
        outerRadius = innerRadius * 1.05;
    
    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);
​
    svg.append("text")
      .text("noun & noun")
    
    
    ////////////////////////////////////////////////////////////
    //////////////////////// Massage Data //////////////////////
    ////////////////////////////////////////////////////////////
​
    d3.json('yelp_mke.json').then(response => {
      let slimmed = response.map(d => ({ 
          name: d.name, 
          categories: d.categories, 
          coordinates: d.coordinates, 
          location: {
            city: d.location.city, 
                state: d.location.state
            },
          price: d.price, 
          rating: d.rating, 
          review_count: d.review_count, 
          url: d.url 
        })
      );
      console.log('here')
      let namesOnly = slimmed.map(d => d.name);
      let uniqueNames = namesOnly.filter(onlyUnique);
      
      console.log(uniqueNames);
      
      let adjectives=["Healthy and Simple"],
          verbs=["Brew & Grow","Fetch & Play","Thrift & Thrive"],
          pronouns=["Flo & Santos","Noah + Jade","Gerber + Scarpelli","State & Grand","Fabian & Son","Arauz & Company","Tiffany & Co","Raila & Associates","Farlap & Associates","Caramagno & Associates","Blyth & Associates","Bullock & Associates"];
      
      let remove = adjectives.concat(verbs,pronouns);
     
      
      remove.forEach( d => {
        let i = uniqueNames.indexOf(d)
        uniqueNames.splice(i,1)
      })
      
      let connectors=["and","&","N","N'","+"];
      
      let uniqueNouns = [],
          uniqueVerbs = [],
          uniqueAdjectives = [];
      
      uniqueNames.forEach(d => {
        for (var i =0; i<slimmed.length; i++) {
          if (Object.is(d,slimmed[i].name)) {
            uniqueNouns.push(slimmed[i]);
            break   // only return first match
          }
        }
      })
      console.log(uniqueNouns)
      
      verbs.forEach(d => {
        for (var i =0; i<slimmed.length; i++) {
          if (Object.is(d,slimmed[i].name)) {
            uniqueVerbs.push(slimmed[i]);
            break   // only return first match
          }
        }
      })
      console.log(uniqueVerbs)
      
      adjectives.forEach(d => {
        for (var i =0; i<slimmed.length; i++) {
          if (Object.is(d,slimmed[i].name)) {
            uniqueAdjectives.push(slimmed[i]);
            break   // only return first match
          }
        }
      })
      console.log(uniqueAdjectives)
      
      // KEPT: One noun + one pronoun where noun NOT Associates, Son(s), Company
      // SEPARATED: adjectives, verbs
      // REMOVED: Double pronouns, pronoun + Associations, Son(s), or Co(mpany)
​
    });
    
    function onlyUnique(value, index, self) {
      return self.indexOf(value) === index;
    }
​
    ////////////////////////////////////////////////////////////
    /////////////////// Set-up Loom parameters /////////////////
    ////////////////////////////////////////////////////////////
​
    //Some default parameters
    var pullOutSize = 20 + 30/135 * innerRadius;
    var numFormat = d3.format(",.0f");
​
    //Manually sorted the inner characters based on the total number of words spoken
    var characterOrder = ["Gandalf", "Sam", "Aragorn", "Frodo", "Gimli", "Pippin", "Merry", "Boromir", "Legolas"]
    function sortCharacter(a, b) { return characterOrder.indexOf(a) - characterOrder.indexOf(b); }
​
    //Initiate the loom function with all the options
    var loom = d3.loom()
      .padAngle(0.05)
      .sortSubgroups(sortCharacter)
      .heightInner(20)
      .emptyPerc(0.2)
      .widthInner(30)
      .value(function(d) { return d.words; })
      .inner(function(d) { return d.character; })
      .outer(function(d) { return d.location; })
​
    //Initiate the inner string function that belongs to the loom
    var string = d3.string()
      .radius(innerRadius)
      .pullout(pullOutSize);
​
    //Initiate an arc drawing function that is also needed
    var arc = d3.arc()
      .innerRadius(innerRadius*1.01)
      .outerRadius(outerRadius);
​
    ////////////////////////////////////////////////////////////
    ///////////////////////// Colors ///////////////////////////
    ////////////////////////////////////////////////////////////
​
    //Color for the unique locations
    var locations = ["Bree", "Emyn Muil", "Fangorn", "Gondor",  "Isengard", "Lothlorien", "Misty Mountains", "Mordor",  "Moria",   "Parth Galen", "Rivendell", "Rohan",   "The Shire"];
    var colors = ["#5a3511", "#47635f",   "#223e15", "#C6CAC9", "#0d1e25",  "#53821a",    "#4387AA",         "#770000", "#373F41", "#602317",     "#8D9413",   "#c17924", "#3C7E16"];
    var color = d3.scaleOrdinal()
    .domain(locations)
    .range(colors);
​
    ////////////////////////////////////////////////////////////
    ///////////////////// Read in data /////////////////////////
    ////////////////////////////////////////////////////////////
​
    d3.json("yelp_chicago.json", function (error, data) {
​
      //Create a group that already holds the data
      var g = svg.append("g")
      .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
      .datum(loom(data));   
​
      ////////////////////////////////////////////////////////////
      ////////////////////// Draw outer arcs /////////////////////
      ////////////////////////////////////////////////////////////
​
      var arcGroup = g.append("g").attr("class", "arc-outer-wrapper");
​
      //Create a group per outer arc, which will contain the arc path + the location name & number of words text
      var arcs = arcGroup.selectAll(".arc-wrapper")
      .data(function(s) { return s.groups; })
      .enter().append("g")
      .attr("class", "arc-wrapper")
      .each(function(d) { d.pullOutSize = (pullOutSize * ( d.startAngle > Math.PI + 1e-2 ? -1 : 1)) });
​
      //Create the actual arc paths
      var outerArcs = arcs.append("path")
      .attr("class", "arc")
      .style("fill", function(d) { return color(d.outername); })
      .attr("d", arc)
      .attr("transform", function(d, i) { 
        return "translate(" + d.pullOutSize + ',' + 0 + ")"; //Pull the two slices apart
      });
​
      ////////////////////////////////////////////////////////////
      //////////////////// Draw outer labels /////////////////////
      ////////////////////////////////////////////////////////////
​
      //The text needs to be rotated with the offset in the clockwise direction
      var outerLabels = arcs.append("g")
      .each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2); })
      .attr("class", "outer-labels")
      .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
      .attr("transform", function(d,i) { 
        var c = arc.centroid(d);
        return "translate(" + (c[0] + d.pullOutSize) + "," + c[1] + ")"
          + "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
          + "translate(" + 26 + ",0)"
          + (d.angle > Math.PI ? "rotate(180)" : "")
      })
​
      //The outer name
      outerLabels.append("text")
        .attr("class", "outer-label")
        .attr("dy", ".35em")
        .text(function(d,i){ return d.outername; });
​
      //The value below it
      outerLabels.append("text")
        .attr("class", "outer-label-value")
        .attr("dy", "1.5em")
        .text(function(d,i){ return numFormat(d.value) + " words"; });
​
      ////////////////////////////////////////////////////////////
      //////////////////// Draw inner strings ////////////////////
      ////////////////////////////////////////////////////////////
​
      var stringGroup = g.append("g").attr("class", "string-wrapper");
​
      //Draw the paths of the inner strings
      var strings = stringGroup.selectAll("path")
      .data(function(strings) { return strings; })
      .enter().append("path")
      .attr("class", "string")
      .style("fill", function(d) { return d3.rgb( color(d.outer.outername) ).brighter(0.2) ; })
      .style("opacity", 0.85)
      .attr("d", string);
​
      ////////////////////////////////////////////////////////////
      //////////////////// Draw inner labels /////////////////////
      ////////////////////////////////////////////////////////////
​
      var innerLabelGroup = g.append("g").attr("class","inner-label-wrapper");
​
      //Place the inner text labels in the middle
      var innerLabels = innerLabelGroup.selectAll("text")
      .data(function(s) { return s.innergroups; })
      .enter().append("text")
      .attr("class", "inner-label")
      .attr("x", function(d,i) { return d.x; })
      .attr("y", function(d,i) { return d.y; })
      .attr("dy", ".35em")
      .text(function(d,i) { return d.name; });
​
    });//d3.json
    
    var outerRadius = 960 / 2,
        innerRadius = outerRadius - 130;
    
    var svg = d3.select("body").append("svg")
      .attr("width", outerRadius * 2)
        .attr("height", outerRadius * 2 + 40)
        .append("g")
        .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
​
    svg.append("text")
      .text("noun & noun")
      .attr("y", 60)
      .attr("x", outerRadius)
      .attr("font-size", 18)
      .attr("font-family", "monospace")
​
    var fill = d3.scaleOrdinal(d3.schemeSet2);
​
    var chord = d3.chord()
        .padAngle(.04)
        .sortSubgroups(d3.descending)
        .sortChords(d3.descending);
​
    var arc = d3.arc()
        .innerRadius(innerRadius)
        .outerRadius(innerRadius + 20);
    
//     d3.json("origdata.json", { method: "GET", mode: "same-origin", credentials: "include" }).then(onSuccess,onError);
    
    function onSuccess(data) {
​
      var indexByName = d3.map(),
          nameByIndex = d3.map(),
          matrix = [],
          n = 0;
​
      // Returns the Flare package name for the given class name.
      function name(name) {
        return name.substring(0, name.lastIndexOf(".")).substring(6);
      }
​
      // Compute a unique index for each package name.
      data.forEach(function(d) {
​
        if (!indexByName.has(d = name(d.name))) {
          nameByIndex.set(n, d);
          indexByName.set(d, n++);
        }
      });
​
      // Construct a square matrix counting package imports.
      data.forEach(function(d) {
        var source = indexByName.get(name(d.name)),
            row = matrix[source];
        if (!row) {
         row = matrix[source] = [];
         for (var i = -1; ++i < n;) row[i] = 0;
        }
              console.log("here");
​
        d.data.forEach(function(d) { row[indexByName.get(name(d))]++; });
      });
            console.log("here");
​
      chord.matrix(matrix);
​
      var g = svg.selectAll(".group")
        .data(chord.groups)
        .enter().append("g")
          .classed("group", true);
​
      g.append("path")
        .style("fill", function(d) { return fill(d.index); })
        .style("stroke", function(d) { return fill(d.index); })
        .attr("d", arc);
​
      g.append("text")
        .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
        .attr("dy", ".35em")
        .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
          + "translate(" + (innerRadius + 26) + ")"
          + (d.angle > Math.PI ? "rotate(180)" : "");
      })
        .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
        .text(function(d) { return nameByIndex.get(d.index); });
​
      svg.selectAll(".chord")
          .data(chord.chords)
        .enter().append("path")
          .attr("class", "chord")
          .style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
          .style("fill", function(d) { return fill(d.source.index); })
          .attr("d", d3.chord().radius(innerRadius));
​
    }
    
    function onError(error) {
      console.log(error)
    }
                                                                                                  
    d3.select(self.frameElement).style("height", outerRadius * 2 + "px");
    
  </script>
</body>
    