Apex Test - Prototype

_.md

[ Launch: Apex Test - Prototype ] 68eea048130c68a0110f by dmann99

allempdata.json

{
   "next":{"$ref":"https://apex.oracle.com/pls/apex/dmann/allempdata?page=1"},
   "items":[
      {
         "empno":7839,
         "ename":"KING",
         "job":"PRESIDENT",
         "hiredate":"1981-11-17T00:00:00Z",
         "sal":5000,
         "deptno":10
      },
      {
         "empno":7698,
         "ename":"BLAKE",
         "job":"MANAGER",
         "mgr":7839,
         "hiredate":"1981-05-01T00:00:00Z",
         "sal":2850,
         "deptno":30
      },
      {
         "empno":7782,
         "ename":"CLARK",
         "job":"MANAGER",
         "mgr":7839,
         "hiredate":"1981-06-09T00:00:00Z",
         "sal":2450,
         "deptno":10
      },
      {
         "empno":7566,
         "ename":"JONES",
         "job":"MANAGER",
         "mgr":7839,
         "hiredate":"1981-04-02T00:00:00Z",
         "sal":2975,
         "deptno":20
      },
      {
         "empno":7788,
         "ename":"SCOTT",
         "job":"ANALYST",
         "mgr":7566,
         "hiredate":"1982-12-09T00:00:00Z",
         "sal":3000,
         "deptno":20
      },
      {
         "empno":7902,
         "ename":"FORD",
         "job":"ANALYST",
         "mgr":7566,
         "hiredate":"1981-12-03T00:00:00Z",
         "sal":3000,
         "deptno":20
      },
      {
         "empno":7369,
         "ename":"SMITH",
         "job":"CLERK",
         "mgr":7902,
         "hiredate":"1980-12-17T00:00:00Z",
         "sal":800,
         "deptno":20
      },
      {
         "empno":7499,
         "ename":"ALLEN",
         "job":"SALESMAN",
         "mgr":7698,
         "hiredate":"1981-02-20T00:00:00Z",
         "sal":1600,
         "comm":300,
         "deptno":30
      },
      {
         "empno":7521,
         "ename":"WARD",
         "job":"SALESMAN",
         "mgr":7698,
         "hiredate":"1981-02-22T00:00:00Z",
         "sal":1250,
         "comm":500,
         "deptno":30
      },
      {
         "empno":7654,
         "ename":"MARTIN",
         "job":"SALESMAN",
         "mgr":7698,
         "hiredate":"1981-09-28T00:00:00Z",
         "sal":1250,
         "comm":1400,
         "deptno":30
      },
      {
         "empno":7844,
         "ename":"TURNER",
         "job":"SALESMAN",
         "mgr":7698,
         "hiredate":"1981-09-08T00:00:00Z",
         "sal":1500,
         "comm":0,
         "deptno":30
      },
      {
         "empno":7876,
         "ename":"ADAMS",
         "job":"CLERK",
         "mgr":7788,
         "hiredate":"1983-01-12T00:00:00Z",
         "sal":1100,
         "deptno":20
      },
      {
         "empno":7900,
         "ename":"JAMES",
         "job":"CLERK",
         "mgr":7698,
         "hiredate":"1981-12-03T00:00:00Z",
         "sal":950,
         "deptno":30
      },
      {
         "empno":7934,
         "ename":"MILLER",
         "job":"CLERK",
         "mgr":7782,
         "hiredate":"1982-01-23T00:00:00Z",
         "sal":1300,
         "deptno":10
      }
   ]
}

config.json

{"description":"Apex Test - Prototype","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"allempdata.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/yYBiYMA.png"}

inlet.js

var mydata=tributary.allempdata.items;

var svg = d3.select("svg");

/*
svg.append("rect")
.attr({
  width: 100,
  height: 100,
  x: 200,
  y: 62,
  fill: "#3BA360"
})
.transition()
.delay(500)
.duration(500)
.attr("fill","#AAAAAA");  
*/

svg.select(".chart")
    .selectAll("div")
    .data(mydata)
    .enter()
    .append("div")
    .attr("class","mybars")
    .style("width", function(d) { return d.sal/5 + "px"; })
    .text(function(d) { return " "+d.ename+" / "+d.sal; });    

style.css

chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}