Tributary inlet

_.md

[ Launch: Tributary inlet ] f20af711d866ad640847 by k-izzo

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}},"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/ai6fGCF.png"}

inlet.js

var vis = d3.select('svg').append('g')
	.attr('transform', 'translate(50, 50)')



vis.append('rect')
.attr({x: 0, y: 0, width: 400, height: 300})
.style('fill', '#ddd')
.style('fill-opacity', 0.5)

function plot(container) {
  line_x = Math.random() * 100;
  circle_x = Math.random() * 100;
  
  container.append('line')
  .attr({x1: 0, y1: 0, x2: 100, y2: 0})
  .style({stroke: 'gray', 'stroke-width': 1, fill: 'none'})
  
  container.append('line')
  .attr({
    x1: d3.min([line_x, circle_x]),
    y1: 0,
    x2: d3.max([line_x, circle_x]),
    y2: 0
  })
  .style({
    stroke: function () { return circle_x > line_x ? 'blue' : 'lightcoral'; },
    'stroke-width': 2
  })
  
  container.append('line')
  .attr({x1: line_x, y1: -6, x2: line_x, y2: 6})
  .style({stroke: 'gray', 'stroke-width': 2, fill: 'none'})
  
  container.append('circle')
  .attr({cx: circle_x, cy: 0, r: 5})
  .style('fill', 'gray')
}

d3.range(10).forEach(function (d) {
	var g = vis.append('g')
    .attr('transform', function () { return 'translate(' + [98, 15 + 30*d] + ')'; })
    plot(g)
    
    text = vis.append('text')
    .text('category' + d)
    .attr({x: 84, y: 10 + d * 30})
    .style('alignment-baseline', 'hanging')
    .style('text-anchor', 'end')
    .style('font-size', 12)
    .style('fill', 'gray')
})




var vis = d3.select('svg').append('g')
	.attr('transform', 'translate(50, 400)')



vis.append('rect')
.attr({x: 0, y: 0, width: 400, height: 300})
.style('fill', '#ddd')
.style('fill-opacity', 0.5)

function plot(container) {
  line_x = Math.random() * 100;
  circle_x = Math.random() * 100;
  
  container.append('line')
  .attr({x1: 0, y1: 0, x2: 100, y2: 0})
  .style({stroke: 'gray', 'stroke-width': 1, fill: 'none'})
  
  container.append('line')
  .attr({
    x1: d3.min([line_x, circle_x]),
    y1: 0,
    x2: d3.max([line_x, circle_x]),
    y2: 0
  })
  .style({
    stroke: function () { return circle_x > line_x ? 'blue' : 'lightcoral'; },
    'stroke-width': 2
  })
  
  container.append('line')
  .attr({x1: line_x, y1: -6, x2: line_x, y2: 6})
  .style({stroke: 'gray', 'stroke-width': 2, fill: 'none'})
  
  container.append('circle')
  .attr({cx: circle_x, cy: 0, r: 5})
  .style('fill', 'gray')
}


vis  = vis.append('g').attr('transform', 'translate(50,129)')

var g = vis.append('g')
.attr('transform', function () { return 'translate(' + [98, 15 + 30*0] + ')'; })


text = vis.append('text')
.text('race')
.attr({x: 84, y: 10 + 0 * 30})
.style('alignment-baseline', 'hanging')
.style('text-anchor', 'end')
.style('font-size', 12)
.style('fill', 'gray')

var g = vis.append('g')
.attr('transform', function () { return 'translate(' + [98, 15 + 25*1] + ')'; })
plot(g)

text = vis.append('text')
.text('age')
.attr({x: 84, y: 10 + 1 * 25})
.style('alignment-baseline', 'hanging')
.style('text-anchor', 'end')
.style('font-size', 12)
.style('fill', 'gray')

var g = vis.append('g')
.attr('transform', function () { return 'translate(' + [98, 15 + 25*2] + ')'; })
plot(g)

text = vis.append('text')
.text('income')
.attr({x: 84, y: 10 + 2 * 25})
.style('alignment-baseline', 'hanging')
.style('text-anchor', 'end')
.style('font-size', 12)
.style('fill', 'gray')

var g = vis.append('g')
.attr('transform', function () { return 'translate(' + [98, 15 + 25*3] + ')'; })
plot(g)

text = vis.append('text')
.text('household')
.attr({x: 84, y: 3 + 3 * 25})
.style('alignment-baseline', 'hanging')
.style('text-anchor', 'end')
.style('font-size', 12)
.style('fill', 'gray')

text = vis.append('text')
.text('size')
.attr({x: 84, y: 17 + 3 * 25})
.style('alignment-baseline', 'hanging')
.style('text-anchor', 'end')
.style('font-size', 12)
.style('fill', 'gray')