Tributary inlet

_.md

[ Launch: Tributary inlet ] cd33668ac8135a3a34e0 by ivadnerb

aedata.json

[{"id":1,"aedtc":2008,"aedy":15,"epoch":"WEEK 3","visit":"WEEK 3","visitnum":3,"aeseq":2,"aegrpid":null,"aespid":1,"aeterm":"DECREASED APPETITE","aedecod":"DECREASED APPETITE","aecat":"AE","aebodsys":"METABOLISM AND NUTRITION DISORDERS","aesev":"MILD","aeser":"N","aeacn":"NONE","aeacnoth":"NONE","aerel":"POSSIBLY","aeout":"RECOVERED /RESOLVED","aescong":null,"aesdisab":null,"aesdth":null,"aeshosp":null,"aeslife":null,"aestdtc":2008,"aeendtc":2008,"aestdy":13,"aeendy":17},{"id":2,"aedtc":2008,"aedy":15,"epoch":"WEEK 4","visit":"WEEK 4","visitnum":4,"aeseq":4,"aegrpid":null,"aespid":1,"aeterm":"DECREASED APPETITE","aedecod":"DECREASED APPETITE","aecat":"AE","aebodsys":"METABOLISM AND NUTRITION DISORDERS","aesev":"MILD","aeser":"N","aeacn":"NONE","aeacnoth":"NONE","aerel":"POSSIBLY","aeout":"RECOVERED /RESOLVED","aescong":null,"aesdisab":null,"aesdth":null,"aeshosp":null,"aeslife":null,"aestdtc":2008,"aeendtc":2008,"aestdy":13,"aeendy":17},{"id":3,"aedtc":2008,"aedy":15,"epoch":"WEEK 3","visit":"WEEK 3","visitnum":3,"aeseq":6,"aegrpid":null,"aespid":2,"aeterm":"HEADACHE","aedecod":"HEADACHE","aecat":"AE","aebodsys":"NERVOUS SYSTEM DISORDERS","aesev":"MILD","aeser":"N","aeacn":"NONE","aeacnoth":null,"aerel":"POSSIBLY","aeout":"RECOVERED /RESOLVED","aescong":null,"aesdisab":null,"aesdth":null,"aeshosp":null,"aeslife":null,"aestdtc":2008,"aeendtc":2008,"aestdy":13,"aeendy":13},{"id":4,"aedtc":2008,"aedy":8,"epoch":"WEEK 2","visit":"WEEK 2","visitnum":2,"aeseq":1,"aegrpid":null,"aespid":1,"aeterm":"LEFT BRUISED/SORE ELBOW","aedecod":"CONTUSION","aecat":"AE","aebodsys":"INJURY, POISONING AND PROCEDURAL COMPLICATIONS","aesev":"MILD","aeser":"N","aeacn":"NONE","aeacnoth":"NONE","aerel":"POSSIBLY","aeout":"RECOVERED /RESOLVED","aescong":null,"aesdisab":null,"aesdth":null,"aeshosp":null,"aeslife":null,"aestdtc":2008,"aeendtc":2008,"aestdy":5,"aeendy":11},{"id":5,"aedtc":2008,"aedy":8,"epoch":"WEEK 3","visit":"WEEK 3","visitnum":3,"aeseq":3,"aegrpid":null,"aespid":1,"aeterm":"LEFT BRUISED/SORE ELBOW","aedecod":"CONTUSION","aecat":"AE","aebodsys":"INJURY, POISONING AND PROCEDURAL COMPLICATIONS","aesev":"MILD","aeser":"N","aeacn":"NONE","aeacnoth":"NONE","aerel":"POSSIBLY","aeout":"RECOVERED /RESOLVED","aescong":null,"aesdisab":null,"aesdth":null,"aeshosp":null,"aeslife":null,"aestdtc":2008,"aeendtc":2008,"aestdy":5,"aeendy":11},{"id":6,"aedtc":2008,"aedy":107,"epoch":"WEEK 16","visit":"WEEK 16","visitnum":16,"aeseq":5,"aegrpid":null,"aespid":1,"aeterm":"STOMACH ACHE","aedecod":"ABDOMINAL PAIN UPPER","aecat":"AE","aebodsys":"GASTROINTESTINAL DISORDERS","aesev":"MILD","aeser":"N","aeacn":"NONE","aeacnoth":"NONE","aerel":"POSSIBLY","aeout":"RECOVERED /RESOLVED","aescong":null,"aesdisab":null,"aesdth":null,"aeshosp":null,"aeslife":null,"aestdtc":2008,"aeendtc":2008,"aestdy":99,"aeendy":105}]

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","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},"aedata.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/XqcYKxd.png"}

inlet.js

var svg = d3.select("svg")

svg.append("div")
.classed("davey_class",true)
.attr("id","davey_id")
.attr("name","davey_name");

svg.append("rect")
.attr({
  width: 96,
  height: 100,
  x: 243,
  y: 138,
  fill: "#4e3ba4"
});

svg.append('circle')
.attr({
  cx: 100,
  cy: 100,
  r: 40,
  fill:'#25B0B0'
})

svg.append('circle')
.attr({
  cx: 454,
  cy: 262,
  r: 40,
  fill:'#25B0B0'
})

var data = [50, 100, 150, 200]
console.log(data);
var divs = d3.select('#davey_id') // refers to the id rather than the name
  .selectAll('div.item')
  .data(data);

console.log(divs);

divs.enter()
  .append('div').classed('item', true)

divs.style({
  width:'20px',
  height:function(d) { return d + 'px' },
  margin:'15px',
  float:'left',
  'background-color':'#25B0B0'
})