Metadata Fingerprints: Average Count

README.md

Metadata Fingerprints -- Star Plots in D3, based on: https://github.com/kevinschaul/d3-star-plot

d3-starPlot.js

d3.starPlot = function() {
  var width = 200,
      margin = {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      },
      labelMargin = 20,
      includeGuidelines = true,
      includeLabels = true,
      properties = [],
      scales = [],
      labels = nop,
      title = nop,

      g,
      datum,
      radius = width / 2,
      origin = [radius, radius],
      radii = properties.length,
      radians = 2 * Math.PI / radii,
      scale = d3.scale.linear()
        .domain([0, 100])
        .range([0, radius])

  function chart(selection) {
    datum = selection.datum();
    g = selection
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

    if (includeGuidelines) {
      drawGuidelines();
    }

    drawChart();

    if (includeLabels) {
      drawLabels();
    }
  }

  function drawGuidelines() {
    var r = 0;
    properties.forEach(function(d, i) {
      var l, x, y;

      l = radius;
      x = l * Math.cos(r);
      y = l * Math.sin(r);
      g.append('line')
        .attr('class', 'star-axis')
        .attr('x1', origin[0])
        .attr('y1', origin[1])
        .attr('x2', origin[0] + x)
        .attr('y2', origin[1] + y)

      r += radians;
    })
  }

  function drawLabels() {
    var r = 0;
    properties.forEach(function(d, i) {
      var l, x, y;

      l = radius;
      x = (l + labelMargin) * Math.cos(r);
      y = (l + labelMargin) * Math.sin(r);
      g.append('text')
        .attr('class', 'star-label')
        .attr('x', origin[0] + x)
        .attr('y', origin[1] + y)
        .text(typeof labels == "function" ? labels(datum, i) : labels[i])
        .style('text-anchor', 'middle')
        .style('dominant-baseline', 'central')

      r += radians;
    })
  }

  function drawChart() {
    g.append('circle')
      .attr('class', 'star-origin')
      .attr('cx', origin[0])
      .attr('cy', origin[1])
      .attr('r', 2)

    var path = d3.svg.line.radial()

    var pathData = [];
    var r = Math.PI / 2;
    properties.forEach(function(d, i) {
      var userScale = scales[i] || scales[0];
      pathData.push([
        scale(userScale(datum[d])),
        r
      ])
      r += radians;
    });

    g.append('path')
      .attr('class', 'star-path')
      .attr('transform', 'translate(' + origin[0] + ',' + origin[1] + ')')
      .attr('d', path(pathData) + 'Z');

    g.append('text')
      .attr('class', 'star-title')
      .attr('x', origin[0])
      .attr('y', -(margin.top / 2))
      .text(title(datum))
      .style('text-anchor', 'middle')
  }

  function drawInteraction() {
    var path = d3.svg.line.radial();

    // `*Interaction` variables are used to build the interaction layer.
    // `*Extent` variables are used to compute (and return) the x,y
    // positioning of the attribute extents. `*Value` variables are used
    // for the attribute values.
    var rInteraction = Math.PI / 2;
    var rExtent = 0;
    properties.forEach(function(d, i) {
      var lInteraction, xInteraction, yInteraction;
      var lExtent, xExtent, yExtent;

      lInteraction = radius;
      xInteraction = lInteraction * Math.cos(rInteraction);
      yInteraction = lInteraction * Math.sin(rInteraction);

      lExtent = radius + labelMargin;
      xExtent = lExtent * Math.cos(rExtent) + origin[0] + margin.left;
      yExtent = lExtent * Math.sin(rExtent) + origin[1] + margin.top;

      var userScale = scales[i] || scales[0];
      lValue = scale(userScale(datum[d]));
      x = lValue * Math.cos(rExtent) + origin[0] + margin.left;
      y = lValue * Math.sin(rExtent) + origin[1] + margin.top;

      var halfRadians = radians / 2;
      var pathData = [
        [0, rInteraction - halfRadians],
        [lInteraction, rInteraction - halfRadians],
        [lInteraction, rInteraction + halfRadians]
      ];

      var datumToBind = {
        xExtent: xExtent,
        yExtent: yExtent,
        x: x,
        y: y,
        key: properties[i],
        datum: datum
      };

      g.append('path')
        .datum(datumToBind)
        .attr('class', 'star-interaction')
        .attr('transform', 'translate(' + origin[0] + ',' + origin[1] + ')')
        .attr('d', path(pathData) + 'Z');

      rInteraction += radians;
      rExtent += radians;
    })
  }

  function nop() {
    return;
  }

  chart.interaction = function() {
    drawInteraction();
  };

  chart.properties = function(_) {
    if (!arguments.length) return properties;
    properties = _;
    radii = properties.length;
    radians = 2 * Math.PI / radii;
    return chart;
  };

  chart.scales = function(_) {
    if (!arguments.length) return scales;
    if (Array.isArray(_)) {
      scales = _;
    } else {
      scales = [_];
    }
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    radius = width / 2;
    origin = [radius, radius];
    scale.range([0, radius])
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    origin = [radius, radius];
    return chart;
  };

  chart.labelMargin = function(_) {
    if (!arguments.length) return labelMargin;
    labelMargin = _;
    return chart;
  };

  chart.title = function(_) {
    if (!arguments.length) return title;
    title = _;
    return chart;
  };

  chart.labels = function(_) {
    if (!arguments.length) return labels;
    labels = _;
    return chart;
  };

  chart.includeGuidelines = function(_) {
    if (!arguments.length) return includeGuidelines;
    includeGuidelines = _;
    return chart;
  };

  chart.includeLabels = function(_) {
    if (!arguments.length) return includeLabels;
    includeLabels = _;
    return chart;
  };

  return chart;
}

index.html

<!DOCTYPE>
<meta charset="utf-8">
<style>

body {
  width: 960px;
  margin: auto;
  font-family: Arial;
  background-color: rgb(224,216,201);
}
#target {
  margin: 40px 0;
}
.wrapper {
  position: relative;
  display: inline-block;
}
.chart {
  margin-bottom: 40px;
}
.star-title {
  font-size: 14px;
}
.star-label {
  font-size: 11px;
  pointer-events: none;
}
.star-origin {
  fill: #333;
}
.star-axis {
  stroke: #ccc;
  stroke-width: 2px;
  stroke-dasharray: 4 5;
}
.star-path {
  stroke: #444;
  stroke-width: 2px;
  fill: #709CB1;
  fill-opacity: 0.6;
}
.star-interaction {
  opacity: 0;
}

.interaction {
  pointer-events: none;
}
.interaction.label {
  position: absolute;
  font-size: 11px;
  text-shadow: 0 1px 0 #FFF, 0 -1px 0 #FFF, 1px 0 #FFF, -1px 0 #FFF;
}
.interaction.circle {
  fill: #444;
  fill-opacity: 0.6;
  stroke: #444;
}

</style>

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3-starPlot.js"></script>
<script>

var margin = {
  top: 32,
  right: 50,
  bottom: 20,
  left: 50
};
var width = 240 - margin.left - margin.right;
var height = 240 - margin.top - margin.bottom;
var labelMargin = 8;

var scale = d3.scale.linear()
  .domain([0, 5])
  .range([0, 100])

d3.csv('new.fingers.avg.csv')
  .row(function(d) {
      d.contributor = +d.contributor;
      d.creator = +d.creator;
      d.date = +d.date;
      d.description = +d.description;
      d.extent = +d.extent;
      d.format = +d.format;
      d.relation = +d.relation;
      d.spatial = +d.spatial;
      d.subject = +d.subject;
      d.temporal = +d.temporal;
      return d;
  })
  .get(function(error, rows) {
    var star = d3.starPlot()
      .width(width)
      .properties([
        'contributor',
        'creator',
        'date',
        'description',
        'extent',
        'format',
        'relation',
        'spatial',
        'subject',
        'temporal'
      ])
      .scales(scale)
      .labels([
        'contributor',
        'creator',
        'date',
        'description',
        'extent',
        'format',
        'relation',
        'spatial',
        'subject',
        'temporal'
      ])
      .title(function(d) { return d.Provider; })
      .margin(margin)
      .labelMargin(labelMargin)

    rows.forEach(function(d, i) {
      star.includeLabels(i % 4 === 0 ? true : false);

      var wrapper = d3.select('#target').append('div')
        .attr('class', 'wrapper')

      var svg = wrapper.append('svg')
        .attr('class', 'chart')
        .attr('width', width + margin.left + margin.right)
        .attr('height', width + margin.top + margin.bottom)

      var starG = svg.append('g')
        .datum(d)
        .call(star)
        .call(star.interaction)

      var interactionLabel = wrapper.append('div')
        .attr('class', 'interaction label')

      var circle = svg.append('circle')
        .attr('class', 'interaction circle')
        .attr('r', 5)

      var interaction = wrapper.selectAll('.interaction')
        .style('display', 'none');

      svg.selectAll('.star-interaction')
        .on('mouseover', function(d) {
          svg.selectAll('.star-label')
            .style('display', 'none')

          interaction
            .style('display', 'block')

          circle
            .attr('cx', d.x)
            .attr('cy', d.y)

          $interactionLabel = $(interactionLabel.node());
          interactionLabel
            .text(d.key + ': ' + d.datum[d.key])
            .style('left', d.xExtent - ($interactionLabel.width() / 2))
            .style('top', d.yExtent - ($interactionLabel.height() / 2))
        })
        .on('mouseout', function(d) {
          interaction
            .style('display', 'none')

          svg.selectAll('.star-label')
            .style('display', 'block')
        })
    });
  });

</script>
<div id='target'></div>
</body>

new.fingers.avg.csv