D3 Examples - formatting numbers example d3v3

formatting numbers example d3v3

This little tool helps you try out d3.format specifiers on different numbers.

Documentation for format specifiers is here

this iteration moves the descriptive text to README.md so that the link to the docs is clickable 😄

thanks to guilherme from the d3js slack for suggesting this improvement

xxxxxxxxxx
 
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>formatting numbers example d3v3</title>
<style>
body {
  margin: 20px 0px 0px 50px;
}
​
.formattext {
  text-align: right;
}
​
.formatresult {
  text-align: left;
  padding-left: 40px;
}
</style>
</head>
<body>
  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='https://d3js.org/d3.v3.min.js' charset='utf-8'></script>
<script src='showFormatsConstructor.js'></script>
<script>
// define variables
var formatlist = ["", "s", ",%", "+,%", ",.1%", ".4r", ".4f", ".4n", ".3n", ",d", ",.0f", ".0f", ".0e", ".1e"];
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.scale.linear()
    .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);
</script>
</body>
</html>
    