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.

forked from armollica's block: Pictogram Table

<!DOCTYPE html>
<html>

</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) {

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);

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>

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js