SevenChan07/.block

## .block
license: gpl-3.0
height: 830

## README.md

      
    Raw
  

              README.md
            
          
    Fork from http://bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e, and do some changes.

  
## formatting.js
// define variables
var formatlist = ["10s", "e", ".1e", "4g", ".9g", ".6f", "d", "2d", "3r", ".5r", "%", "3%", ".3%", "p", "3p", ".3p", "b", "o", "x", "c", "5s", ",", "08,.5d","=$10s", "哈^8"]

var userNum = document.getElementById("userNum");
var colorLow = 'blue'
var colorHigh = 'red'

// add listener to call formatter function when user changes the number
userNum.addEventListener("input",
  function(e) {
    myFormats.changeNumber(userNum.value);
  },
  false
);

// need way to update list
formatSpecifier.addEventListener("change",
  function(e) {
    myFormats.addToList(formatSpecifier.value);
  },
  false
);

// create a little color scale function to make the output look pretty
function setColorScale(max) {
  return d3.scaleLinear()
    .domain([0, max])
    .interpolate(d3.interpolateRgb)
    .range([colorLow, colorHigh])
}

// construct code/text pairs from list of formats I could use
var constructFormatObject = function(mylist) {
  var types = [];
  mylist.forEach(function(d) {
    types.push({
      code: d3.format(d),
      text: 'd3.format("' + d + '")'
    })
  })
  return types
}


var myFormats = new ShowFormats(
  formatlist,
  0);

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    margin: 20px 0px 0px 50px
  }
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
  Enter a number:<br>
  <input id="userNum" type="string"><br><br>
  Add your own format specifier (ex: .4n):<br>
  <input id="formatSpecifier" type="string"><br>
  <table style="padding-top: 20px;"><thead>
    <tr>
      <th class="formattext">format specifier</th>
      <th class="formatresult">resulting formatted number</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
   </table>
<script src="showFormatsConstructor.js"></script>
<script src="formatting.js"></script>
</body>
</html>

## showFormatsConstructor.js
// set up showformats constructor

ShowFormats = function(formatList, number) {
  // list of format specifiers to show
  this.formatList = formatList;
  this.formatObject = constructFormatObject(formatList);
  this.dataset = Array.apply(0,
    Array(this.formatObject.length)).map(function(x, y) {
    return y;
  });;
  // number to format
  this.number = number;
  this.colorScale = setColorScale(this.dataset.length)

  var self = this;

  // set up defaults
  this.selection = d3.select("tbody").selectAll("tr")
    .data(this.dataset)
    .enter()
    .append("tr");

  this.selection
    .append("td")
    .text(function(d) {
      return self.formatObject[d].text;
    })
    .style("color", function(d) {
      return self.colorScale(d)
    })
    .attr("class", "formattext");

  this.selection
    .append("td")
    .html(function(d) {
      return self.formatObject[d].code(self.number).replace(/\s/g, "&nbsp;");
    })
    .style("color", function(d) {
      return self.colorScale(d)
    })
    .attr("class", "formatresult");
}

ShowFormats.prototype.changeNumber = function(number) {
  this.number = number;
  this.updateFormats();
}

ShowFormats.prototype.addToList = function(specifier) {
  this.formatList.unshift(specifier)
  this.formatObject = constructFormatObject(this.formatList);

  // update dataset array w/ new length
  this.dataset = Array.apply(0,
    Array(this.formatObject.length)).map(function(x, y) {
    return y;
  });;

  this.updateFormats();
}

ShowFormats.prototype.tdtextStyling = function(selection) {
  selection.text(function(d) {
    return self.formatObject[d].text;
  })
    .style("color", function(d) {
      return self.colorScale(d)
    })
    .attr("class", "formattext");
}

ShowFormats.prototype.tdcodeStyling = function(selection) {
  selection.text(function(d) {
    return self.formatObject[d].code(self.number);
  })
    .style("color", function(d) {
      return self.colorScale(d)
    })
    .attr("class", "formatresult");

}

ShowFormats.prototype.updateFormats = function() {
  self = this;

  // bind with current dataset
  this.selection = d3.selectAll("tbody").selectAll("tr")
    .data(self.dataset);

  // enter elements
  var k = this.selection.enter().append("tr")

  k.append("td")
    .call(self.tdtextStyling);

  k.append("td")
    .call(self.tdcodeStyling);

  // update elements
  this.selection
    .selectAll("td")
    .html(function(d, i) {
      if (i == 0) {
        return self.formatObject[d].text;
      }
      if (i == 1) {
        return self.formatObject[d].code(self.number).replace(/\s/g, "&nbsp;");
      }
    })
    .style("color", function(d) {
      return self.colorScale(d)
    })
    .attr("class", function(d, i) {
      if (i == 0) {
        return "formattext"
      } else {
        return "formatresult"
      }
    })
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	// define variables
	var formatlist = ["10s", "e", ".1e", "4g", ".9g", ".6f", "d", "2d", "3r", ".5r", "%", "3%", ".3%", "p", "3p", ".3p", "b", "o", "x", "c", "5s", ",", "08,.5d","=$10s", "哈^8"]

	var userNum = document.getElementById("userNum");
	var colorLow = 'blue'
	var colorHigh = 'red'

	// add listener to call formatter function when user changes the number
	userNum.addEventListener("input",
	function(e) {
	myFormats.changeNumber(userNum.value);
	},
	false
	);

	// need way to update list
	formatSpecifier.addEventListener("change",
	function(e) {
	myFormats.addToList(formatSpecifier.value);
	},
	false
	);

	// create a little color scale function to make the output look pretty
	function setColorScale(max) {
	return d3.scaleLinear()
	.domain([0, max])
	.interpolate(d3.interpolateRgb)
	.range([colorLow, colorHigh])
	}

	// construct code/text pairs from list of formats I could use
	var constructFormatObject = function(mylist) {
	var types = [];
	mylist.forEach(function(d) {
	types.push({
	code: d3.format(d),
	text: 'd3.format("' + d + '")'
	})
	})
	return types
	}


	var myFormats = new ShowFormats(
	formatlist,
	0);
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	margin: 20px 0px 0px 50px
	}
	</style>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	Enter a number:<br>
	<input id="userNum" type="string"><br><br>
	Add your own format specifier (ex: .4n):<br>
	<input id="formatSpecifier" type="string"><br>
	<table style="padding-top: 20px;"><thead>
	<tr>
	<th class="formattext">format specifier</th>
	<th class="formatresult">resulting formatted number</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	<script src="showFormatsConstructor.js"></script>
	<script src="formatting.js"></script>
	</body>
	</html>
	// set up showformats constructor

	ShowFormats = function(formatList, number) {
	// list of format specifiers to show
	this.formatList = formatList;
	this.formatObject = constructFormatObject(formatList);
	this.dataset = Array.apply(0,
	Array(this.formatObject.length)).map(function(x, y) {
	return y;
	});;
	// number to format
	this.number = number;
	this.colorScale = setColorScale(this.dataset.length)

	var self = this;

	// set up defaults
	this.selection = d3.select("tbody").selectAll("tr")
	.data(this.dataset)
	.enter()
	.append("tr");

	this.selection
	.append("td")
	.text(function(d) {
	return self.formatObject[d].text;
	})
	.style("color", function(d) {
	return self.colorScale(d)
	})
	.attr("class", "formattext");

	this.selection
	.append("td")
	.html(function(d) {
	return self.formatObject[d].code(self.number).replace(/\s/g, " ");
	})
	.style("color", function(d) {
	return self.colorScale(d)
	})
	.attr("class", "formatresult");
	}

	ShowFormats.prototype.changeNumber = function(number) {
	this.number = number;
	this.updateFormats();
	}

	ShowFormats.prototype.addToList = function(specifier) {
	this.formatList.unshift(specifier)
	this.formatObject = constructFormatObject(this.formatList);

	// update dataset array w/ new length
	this.dataset = Array.apply(0,
	Array(this.formatObject.length)).map(function(x, y) {
	return y;
	});;

	this.updateFormats();
	}

	ShowFormats.prototype.tdtextStyling = function(selection) {
	selection.text(function(d) {
	return self.formatObject[d].text;
	})
	.style("color", function(d) {
	return self.colorScale(d)
	})
	.attr("class", "formattext");
	}

	ShowFormats.prototype.tdcodeStyling = function(selection) {
	selection.text(function(d) {
	return self.formatObject[d].code(self.number);
	})
	.style("color", function(d) {
	return self.colorScale(d)
	})
	.attr("class", "formatresult");

	}

	ShowFormats.prototype.updateFormats = function() {
	self = this;

	// bind with current dataset
	this.selection = d3.selectAll("tbody").selectAll("tr")
	.data(self.dataset);

	// enter elements
	var k = this.selection.enter().append("tr")

	k.append("td")
	.call(self.tdtextStyling);

	k.append("td")
	.call(self.tdcodeStyling);

	// update elements
	this.selection
	.selectAll("td")
	.html(function(d, i) {
	if (i == 0) {
	return self.formatObject[d].text;
	}
	if (i == 1) {
	return self.formatObject[d].code(self.number).replace(/\s/g, " ");
	}
	})
	.style("color", function(d) {
	return self.colorScale(d)
	})
	.attr("class", function(d, i) {
	if (i == 0) {
	return "formattext"
	} else {
	return "formatresult"
	}
	})
	}