D3 Examples - Pictogram Table

Pictogram Table
Using pictograms within a table. Click headers to sort.
Notes: Uses technique from this blog post to implement HTML tables with D3 in a nice way. Growth rates are from Q2-2012 to Q2-2015. Data from BLS. State icons from ProPublica's StateFace project. Other icons from Font Awesome.
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
​
<body>
  <div class="table-container">
​
  </div>
  <script src="d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
  <script>
​
​
    var table = d3.select(".table-container").append("table");
    table.append("thead");
    table.append("tbody");
​
    var color = d3.scale.linear()
      .domain([0, 1])
      .range(["red", "green"]);
​
    function getColorRating(rating, mn, mx) {
      var color = d3.scale.linear()
        .domain([mn, mx])
        .range(["red", "green"]);
      return color(rating);
    }
​
    queue()
      .defer(d3.json, "records.json")
      .defer(d3.json, "summary.json")
      .await(ready);
​
    rating_style_prefix='<span class="text" style="text-align: right; padding-right: 5px; color: '
​
    function ready(error, records, summary) {
​
      if (error) throw error;
​
      var columns = [
        {
          head: "Index",
          cl: "row_count",
          html: function (row) {
                      // var preview = '<a href="https://www.bing.com" target="_blank" class="livepreview">Hover over to preview, click to link!/</a>'
            var text = '<span class="text" style="text-align: center;"> ' + row.row_count + ' </span>';
            return text;
          }
        }
        ,
        {
          head: "Overall Value",
          cl: "sum_rating",
          html: function (row) {
            rrange = (summary['sum_rating_max'] - summary['sum_rating_min']);
            ratio_rating = (row.sum_rating - summary['sum_rating_min']) / rrange;
            clr = color(ratio_rating);
​
            mx = summary['sum_rating_min'];
            mn = summary['sum_rating_max'];
​
​
            var linearScale = d3.scale.linear()
                                       .domain([mn,mx])
                                       .range([-6,6]);
​
            var icon = '<span class="fa fa-check" style="color:' + clr.trim() + ';" ></span>';
            if (row.sum_rating <  0 ){
              icon = '<span class="fa fa-times" style="color:' + clr.trim() + ';" ></span>';
            }
​
            var nIcons = (Math.abs(linearScale(row.sum_rating)));
​
            var text = '<span class="text" style="color: ' + clr.trim() + ';"> ' + row.sum_rating.toFixed(2)
            // +'  ' + nIcons
            +  ' </color> </span>';
​
            return text + d3.range(nIcons)
              .map(function () { return icon; }).join("");
​
          }
        }
        ,
        {
          head: "Title",
          cl: "title",
          html: function (row) {
            var value = row.title;
            var text = '<span class="title"><a href="' + row.link + '">' + value + '</a> </span>';
            return text;
​
          }
​
        }
​
        , {
          head: "Price",
          cl: "price",
          html: function (row) {
            clr = getColorRating(row.price, summary.price_max, summary.price_min);
            value = d3.format("$,")(row.price);
            var text = '<span class="text" style="color: ' + getColorRating.toString() + ';"> ' + value + '</color> </span>';
            return text;
          }
        }
        , {
          head: "Age",
          cl: "age",
          html: function (row) {
​
​
            var text = '<span class="text">' + row.age + '</span>';
            return text;
          }
        }
        , {
          head: "Milage",
          cl: "milage",
          html: function (row) {
            var text = '<span class="text">' + d3.format(",")(row.milage) + 'km</span>';
            return text;
          }
        }
        ,
        {
          head: "Transmission",
          cl: "transmission",
          html: function (row) {
​
            var text = '<span class="text">' + row.transmission + '</span>';
            return text;
          }
        }
        ,
        {
          head: "Make",
          cl: "make",
          html: function (row) {
            var text = '<span class="text"  style="text-align: center;">' + row.make + '</span>';
            return text;
          }
        }
        , {
          head: "Model",
          cl: "model",
          html: function (row) {
            var text = '<span class="text"  style="text-align: center;">'  + row.model + '</span>';
            return text;
          }
        }
        , {
          head: "Price Rating (" + summary.price_weight.toFixed(2) + ")",
          cl: "price_rating",
          html: function (row) {
​
            ratio_rating = 1 - (row.price - summary['price_min']) / (summary['price_max'] - summary['price_min'])
            clr = color(ratio_rating);
​
            var text = rating_style_prefix + clr.trim() + ';"> ' + row.price_rating
              + '</color> </span>';
            return text;
          }
        }
​
        , {
​
          head: "Milage Rating (" + summary.milage_weight.toFixed(2) + ")",
          cl: "milage_rating",
          html: function (row) {
​
            ratio_rating = 1 - (row.milage - summary['milage_min']) / (summary['milage_max'] - summary['milage_min'])
            clr = color(ratio_rating);
            // inverseclr = color( 1 - ratio_rating );
            // clr=summary['milage_max'];
​
            var text = rating_style_prefix + clr.trim() + ';"> ' + row.milage_rating
              // + ' ' + ratio_rating
              + '</color> </span>';
            return text;
          }
        }
        , {
          head: "Age Rating (" + summary.age_weight.toFixed(2) + ")",
          cl: "age_rating",
          html: function (row) {
​
            ratio_rating = 1 - (row.age - summary['age_min']) / (summary['age_max'] - summary['age_min'])
            clr = color(ratio_rating);
​
            var text = rating_style_prefix + clr.trim() + ';"> ' + row.age_rating
              + '</color> </span>';
            return text;
          }
        }
​
​
​
​
​
​
      ];
​
      table.call(renderTable);
​
      function renderTable(table) {
​
        table.select("thead")
          .selectAll("th")
          .data(columns)
          .enter().append("th")
          .attr("class", function (d) { return d.cl; })
          .text(function (d) { return d.head; })
          .on("click", function (d) {
            var ascending = d.ascending ? false : true;
            d.ascending = ascending;
​
            records.sort(function (a, b) {
              return ascending ?
                d3.ascending(a[d.cl], b[d.cl]) :
                d3.descending(a[d.cl], b[d.cl]);
            });
            table.call(renderTable);
          });
​
        var tr = table.select("tbody").selectAll("tr").data(records);
​
        tr.enter().append("tr")
          .on("mouseenter", mouseenter)
          .on("mouseleave", mouseleave);
​
        var td = tr.selectAll("td")
          .data(function (row, i) {
            return columns.map(function (c) {
              var cell = {};
              d3.keys(c).forEach(function (k) {
                cell[k] = typeof c[k] == 'function' ? c[k](row, i) : c[k];
              });
              return cell;
            })
          })
​
        td.enter().append("td")
          .attr("class", function (d) { return d.cl; })
          .style("background-color", "#fff")
          .style("border-bottom", ".5px solid white");
​
        td.html(function (d) { return d.html; });
      }
    }
​
    function mouseenter() {
      d3.select(this).selectAll("td")
        .style("background-color", "#f0f0f0")
        .style("border-bottom", ".5px solid slategrey");
    }
​
    function mouseleave() {
      d3.select(this).selectAll("td")
        .style("background-color", "#fff")
        .style("border-bottom", ".5px solid white");
    }
  </script>
</body>
​
</html>
​
    