Flask by Example – Custom Angular Directive with D3

Step 1: Functional Logic

Add the following to the watch function within the Angular Directive:

scope.$watch('wordcounts', function() {
  var data = scope.wordcounts;
  for (var word in data) {
    d3.select('#chart')
      .append('div')
      .selectAll('div')
      .data(word[0])
      .enter()
      .append('div');
  }
}, true);

Now, whenever scope.wordcounts changes, this function is fired, which updates the DOM. Since an object is returned from the AJAX request, we iterate through it to add the specific data to the chart. Essentially, every word is appended to a new div via a data join.

Try running the code.

What happens? Nothing shows up, right? Check out the DOM in Chrome’s Developer Tools, after you submit a new site. You should see a number of nested divs. We just need to add styles…

Step 2: Styling the Bar Chart

Start with some simple CSS:

#chart {
  overflow-y: scroll;
}

#chart {
  background: #eee;
  padding: 3px;
}

#chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

#chart div {
  height: 30px;
  font: 15px;
  background-color: #006dcc;
  text-align: right;
  padding: 3px;
  color: white;
  box-shadow: 2px 2px 2px gray;
}

Make sure to include this at the top of HTML page, after the Bootstrap stylesheet:

<link rel="stylesheet" type="text/css" href="../static/main.css">

Fire up the app in our browser. What’s happening now?

When you search for a website, you should now see a grey area with some thin blue bars on the left hand side. So you can see that we are generating a bar for each data element we’re getting back - 10 in total. However, we need to modify our D3 code in order to increase the width of each bar so they are readable.

Step 3: Making the Bar Chart More Interactive

We can chain this on to our existing code and use the D3 style function:

scope.$watch('wordcounts', function() {
  var data = scope.wordcounts;
  for (var word in data) {
    var key = data[word][0];
    var value = data[word][1];
    d3.select('#chart')
      .append('div')
      .selectAll('div')
      .data(word)
      .enter()
      .append('div')
      .style('width', function() {
        return (value * 3) + 'px';
      })
      .text(function(d){
        return key;
      });
  }
}, true);

Now we are dynamically creating a width based on the numeric value of how often a word shows up on a webpage:

.style('width', function() {
  return (value * 3) + 'px';
})
.text(function(d){
  return key;
});

The style is calculated by returning the value associated with each word, multiplying that number by 3, and then converting it into pixels. We can also add text to each bar element by inserting the string value of the word along with how often it shows up on the page.

Try this out. You should see something like:

There’s still one thing missing though. What happens when you search for a new website? Try it. The new chart is appended beneath the previous one. We need to clear out our chart div before a new one is created.

Step 4: Clean Up for the Next URL Search

Update the link function in the Directive:

link: function (scope) {
  scope.$watch('wordcounts', function() {
    d3.select('#chart').selectAll('*').remove();
    var data = scope.wordcounts;
    for (var word in data) {
      var key = data[word][0];
      var value = data[word][1];
      d3.select('#chart')
        .append('div')
        .selectAll('div')
        .data(word)
        .enter()
        .append('div')
        .style('width', function() {
          return (value * 3) + 'px';
        })
        .text(function(d){
          return key;
        });
    }
  }, true);
}

d3.select('#chart').selectAll('*').remove(); simply clears out the chart each time the $scope.watch function is fired. Now we have a chart that is cleared before each new use, and we have a fully functional word count application!!

Test it out!