Report

Use only Javascript and SVG to produce a data analysis / visualization report.

Authors

This report is prepared by

What is the distribution of known eruptions? The chart shows eruptions every 1000 years from the current year through 9540 BCE. (by Karen)[top]

Viz

<rect x="0"
      y="0"
      height="52.534562211981566"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="55"
      y="0"
      height="400"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="110"
      y="0"
      height="190.78341013824885"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="165"
      y="0"
      height="13.824884792626728"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="220"
      y="0"
      height="14.746543778801843"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="275"
      y="0"
      height="39.63133640552996"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="330"
      y="0"
      height="6.451612903225806"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="385"
      y="0"
      height="25.806451612903224"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="440"
      y="0"
      height="19.35483870967742"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="495"
      y="0"
      height="11.981566820276498"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="550"
      y="0"
      height="20.276497695852534"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="605"
      y="0"
      height="5.529953917050691"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />
<rect x="660"
      y="0"
      height="0.9216589861751152"
      width="50"
      style="fill:red;
             stroke-width:3;
             stroke:rgb(0,0,0)" />

Solution: SVG Template

<rect x="${d.x}"
      y="${d.y}"
      height="${d.height}"
      width="${d.width}"
      style="fill:${d.color};
             stroke-width:3;
             stroke:rgb(0,0,0)" />

Solution: Javascript

// Filter out eruptions with unknown dates
var knownEruptions = _.reject(data, {'Last Known Eruption': 'Unknown'})

// Group by eruption millennium
var groups = _.groupBy(knownEruptions, function(d) {
	var date = d['Last Known Eruption'].split(' ')
	year = _.parseInt(date[0])
	return Math.floor((date[1] == 'BCE' ? -year : year)/1000)
})

// Map to millennium and number of eruptions in that millennium
var counts = _.map(groups, function(value, key) {
	return {'name': key, 'count': value.length}
})

// Sort by millennium
var sortedCounts = _.sortByOrder(counts, function(d) {
	return _.parseInt(d.name)
})

function computeX(d, i) {
	return 55*i
}

function computeHeight(d, i) {
	return d.count * (400/434)
}

function computeWidth(d, i) {
	return 50
}

function computeY(d, i) {
    return 0
}

function computeColor(d, i) {
	return 'red'
}

var viz = _.map(counts, function(d, i){
            return {
                x: computeX(d, i),
                y: computeY(d, i),
                height: computeHeight(d, i),
                width: computeWidth(d, i),
                color: computeColor(d, i)
            }
         })

var result = _.map(viz, function(d){
         // invoke the compiled template function on each viz data
         return template({d: d})
     })
return result.join('\n')