Apex Test

_.md

[ Launch: Apex Test ] 525d69538137db6f1ded by dmann99
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"Apex Test","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"mydata.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

index.html

</style>
<div class="chart" id="jonx">
<div>

inlet.js

var mydata=tributary.mydata.items;





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

d3.select(".chart")
  .selectAll("div")
  .data(mydata)
  .enter()
  .append("div")
  .style("width", function(d) { return d.deptno*5 + "px"; })
  .text(function(d) { return " "+d.ename+"..."; });

mydata.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
    }
  ]
}

style.css

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