Old school D3 from simpler times

All examples By author By category About

jwildfire

Full window Github gist

D3 Formatting Example

<html>
  <head>
    <link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
  </head>
  <body>
    <div id="container">
      <svg id="chart" width="350" height="350"></svg>
    </div>
  </body>
  <script>
    var store = [{ Name:"Item 1", Total:18.73424242 },
               { Name:"Item 2", Total:7.34311 },
               { Name:"Item 3", Total:3.1235535},
               { Name:"Item 4", Total:12.763574}];

var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);

var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d){ return d.Name; }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .sectorValue(function(d){ return +d.Total.toFixed(2); } )
  //.sectorValue(function(d){ return +d3.format('0.2f')(d.Total); } ) //this works too
  .labelsEnabled(true);

new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");
  </script>
</html>

xxxxxxxxxx
 
<html>
  <head>
    <link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
  </head>
  <body>
    <div id="container">
      <svg id="chart" width="350" height="350"></svg>
    </div>
  </body>
  <script>
    var store = [{ Name:"Item 1", Total:18.73424242 },
               { Name:"Item 2", Total:7.34311 },
               { Name:"Item 3", Total:3.1235535},
               { Name:"Item 4", Total:12.763574}];
  
​
  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);
​
  var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d){ return d.Name; }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .sectorValue(function(d){ return +d.Total.toFixed(2); } )
  //.sectorValue(function(d){ return +d3.format('0.2f')(d.Total); } ) //this works too
  .labelsEnabled(true);
​
  new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");
  </script>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://rawgithub.com/palantir/plottable/develop/plottable.js to a secure url

https://d3js.org/d3.v3.min.js

https://rawgithub.com/palantir/plottable/develop/plottable.js