nkabrown · October 6, 2017 18:36
diff --git a/frequencyTable.html b/frequencyTable.html
 <figure>
  <figcaption>
  </figcaption>
  <table>
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
  <small></small>
 </figure>
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>Frequency Distribution Table</title>
    <style>
      html,
      body {
        font-family: "Stymie", "Baskerville", serif;
      }

      figure {
        width: 490px;
      }

      figcaption {
        font-weight: 700;
        text-align: center;
        white-space: pre-wrap;
      }

      table {
        margin: 15px 0;
      }

      thead tr {
        height: 30px;
      }

      td,
      th {
        padding-right: 15px;
      }

      th {
        font-size: 11px;
        font-weight: 200;
        width: 25px;
      }

      td {
        text-align: center;
        font-size: 13px;
      }

      th:nth-child(even),
      td:nth-child(even) {
        text-align: right;
        padding-right: 40px;
      }
  
      th:nth-child(odd),
      td:nth-child(odd) {
        padding-left: 40px;
      }

      td[data-symbol='N'] {
        padding-right: 0;
        text-align: right;
      }

      .total {
        height: 22px;
        line-height: 22px;
        margin-left: 35px;
        padding-right: 0;
        letter-spacing: 6px;
        text-align: right;
      }

      .lineover {
        border-top: 2px solid #444;
        padding: 0;
      }

      small {
        white-space: pre;
        font-size: 9px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="graph"></div>
    </div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="index.js"></script>
  </body>
 </html>
diff --git a/index.js b/index.js
 class FrequencyDistTable {
  constructor(el, d, m, c, a) {
    this.mount = el;
    this.data = d;
    this.measure = m;
    this.caption = c;
    this.attribution = a;
  }

  init() {
    d3.select('figcaption')
       .text(this.caption);

    d3.select('thead')
       .html(`<tr><th>${this.measure}</th><th>&#402;</th><th>${this.measure}</th><th>&#402;</th><th>${this.measure}</th><th>&#402;</th></tr>`);

    d3.select(this.mount)
       .selectAll('.row')
       .data(this.data)
     .enter().append('tr')
       .attr('class', 'row')
       .html(d => `<td>${d[0]}</td><td>${d[1]}</td><td>${d[2]}</td><td>${d[3]}</td><td>${d[4]}</td><td>${d[5]}</td>`);

    d3.select('small')
       .text(this.attribution);
  }
 }

 const randomDataset = () => {
  let dataset = []; 
  for (let i = 0; i < 100; i++) {
      dataset.push({score: Math.ceil(Math.random() * 50)}); 
  }
    
  return dataset;
 }

 const data = randomDataset();

 const maxValue = d3.max(data, d => d.score);
 const minValue = d3.min(data, d => d.score);
 // map range of scores to zero values in order from highest to lowest measure
 let scores = new Map();
 for (let i = maxValue; i >= minValue; i--) {
  scores.set(i, 0); 
 }
 // for every score in dataset increment map by one
 data.forEach(d => {
  const key = +d.score;
  if (scores.has(key)) {
    let val = scores.get(key);
    val += 1;
    scores.set(key, val);
  }
 });

 // convert map to an array of pairs
 scores = [...scores];

 // calculate column length
 const tdLength = scores.length + 1;
 const columnLength = Math.ceil(tdLength / 3);
 const lastColumnLength = scores.length % columnLength;

 let column_data = [];
 const column_one_data = scores.slice(0,columnLength);
 const column_two_data = scores.slice(columnLength,columnLength * 2);
 const column_three_data = scores.slice(columnLength * 2,columnLength * 3);

 let rows = [];
 for (let i = 0; i < columnLength; i++) {
  let row_data = [column_one_data[i][0], column_one_data[i][1], column_two_data[i][0], column_two_data[i][1], column_three_data[i] ? column_three_data[i][0] : '', column_three_data[i] ? column_three_data[i][1] : ''];
  rows.push(row_data);
 }

 d3.text('./frequencyTable.html', str => {
    d3.select('.container').append('div').attr('class', 'freq-table').html(str);

    new FrequencyDistTable('tbody', rows, 'SCORE', 'Table 2.1   /   Simple Frequency Distribution of Anxiety Scores for 100 College Students', 'Ahana, E. Y. A study on the reliability and internal consistency of a manifest anxiety scale. M.A. thesis, Northwestern Univeristy, 1952.').init();

  d3.select(`tbody tr:nth-child(${lastColumnLength + 1}) td:nth-child(5)`)
      .attr('data-symbol', 'N')
      .append('span')
      .text('N=');

  d3.select(`tbody tr:nth-child(${lastColumnLength + 1}) td:nth-child(6)`)
    .append('span')
    .attr('class', 'lineover')
    .text(`${d3.sum(scores, d => d[1])}`);
 });
diff --git a/thumbnail.png b/thumbnail.png
	<figure>
	<figcaption>
	</figcaption>
	<table>
	<thead>
	</thead>
	<tbody>
	</tbody>
	</table>
	<small></small>
	</figure>
	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<meta charset="utf-8">
	<title>Frequency Distribution Table</title>
	<style>
	html,
	body {
	font-family: "Stymie", "Baskerville", serif;
	}

	figure {
	width: 490px;
	}

	figcaption {
	font-weight: 700;
	text-align: center;
	white-space: pre-wrap;
	}

	table {
	margin: 15px 0;
	}

	thead tr {
	height: 30px;
	}

	td,
	th {
	padding-right: 15px;
	}

	th {
	font-size: 11px;
	font-weight: 200;
	width: 25px;
	}

	td {
	text-align: center;
	font-size: 13px;
	}

	th:nth-child(even),
	td:nth-child(even) {
	text-align: right;
	padding-right: 40px;
	}

	th:nth-child(odd),
	td:nth-child(odd) {
	padding-left: 40px;
	}

	td[data-symbol='N'] {
	padding-right: 0;
	text-align: right;
	}

	.total {
	height: 22px;
	line-height: 22px;
	margin-left: 35px;
	padding-right: 0;
	letter-spacing: 6px;
	text-align: right;
	}

	.lineover {
	border-top: 2px solid #444;
	padding: 0;
	}

	small {
	white-space: pre;
	font-size: 9px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="graph"></div>
	</div>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	class FrequencyDistTable {
	constructor(el, d, m, c, a) {
	this.mount = el;
	this.data = d;
	this.measure = m;
	this.caption = c;
	this.attribution = a;
	}

	init() {
	d3.select('figcaption')
	.text(this.caption);

	d3.select('thead')
	.html(`<tr><th>${this.measure}</th><th>ƒ</th><th>${this.measure}</th><th>ƒ</th><th>${this.measure}</th><th>ƒ</th></tr>`);

	d3.select(this.mount)
	.selectAll('.row')
	.data(this.data)
	.enter().append('tr')
	.attr('class', 'row')
	.html(d => `<td>${d[0]}</td><td>${d[1]}</td><td>${d[2]}</td><td>${d[3]}</td><td>${d[4]}</td><td>${d[5]}</td>`);

	d3.select('small')
	.text(this.attribution);
	}
	}

	const randomDataset = () => {
	let dataset = [];
	for (let i = 0; i < 100; i++) {
	dataset.push({score: Math.ceil(Math.random() * 50)});
	}

	return dataset;
	}

	const data = randomDataset();

	const maxValue = d3.max(data, d => d.score);
	const minValue = d3.min(data, d => d.score);
	// map range of scores to zero values in order from highest to lowest measure
	let scores = new Map();
	for (let i = maxValue; i >= minValue; i--) {
	scores.set(i, 0);
	}
	// for every score in dataset increment map by one
	data.forEach(d => {
	const key = +d.score;
	if (scores.has(key)) {
	let val = scores.get(key);
	val += 1;
	scores.set(key, val);
	}
	});

	// convert map to an array of pairs
	scores = [...scores];

	// calculate column length
	const tdLength = scores.length + 1;
	const columnLength = Math.ceil(tdLength / 3);
	const lastColumnLength = scores.length % columnLength;

	let column_data = [];
	const column_one_data = scores.slice(0,columnLength);
	const column_two_data = scores.slice(columnLength,columnLength * 2);
	const column_three_data = scores.slice(columnLength * 2,columnLength * 3);

	let rows = [];
	for (let i = 0; i < columnLength; i++) {
	let row_data = [column_one_data[i][0], column_one_data[i][1], column_two_data[i][0], column_two_data[i][1], column_three_data[i] ? column_three_data[i][0] : '', column_three_data[i] ? column_three_data[i][1] : ''];
	rows.push(row_data);
	}

	d3.text('./frequencyTable.html', str => {
	d3.select('.container').append('div').attr('class', 'freq-table').html(str);

	new FrequencyDistTable('tbody', rows, 'SCORE', 'Table 2.1 / Simple Frequency Distribution of Anxiety Scores for 100 College Students', 'Ahana, E. Y. A study on the reliability and internal consistency of a manifest anxiety scale. M.A. thesis, Northwestern Univeristy, 1952.').init();

	d3.select(`tbody tr:nth-child(${lastColumnLength + 1}) td:nth-child(5)`)
	.attr('data-symbol', 'N')
	.append('span')
	.text('N=');

	d3.select(`tbody tr:nth-child(${lastColumnLength + 1}) td:nth-child(6)`)
	.append('span')
	.attr('class', 'lineover')
	.text(`${d3.sum(scores, d => d[1])}`);
	});