just another inlet to tributary

_.md

No Previous Gist

config.json

{"endpoint":"","public":true,"require":[],"tab":"edit","display_percent":0.4416666666666644,"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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"display":"svg"}

inlet.js

var textstring = "Tributary!";
var textx = tributary.sw/5;
var texty = 314;
var fontsize = tributary.sw/8;
var fontcolor = "#26212B"
    
var squarex = 102;
var squarey = 73;
var squaresize = 300;
var squarefill = "#FF2B5D";
var squareopacity = 0.84787;
    
var circlex = -412 + tributary.sw;
var circley = -327 + tributary.sh; // Calculate using the height of the display area, resizing changes this 
var circlesize = 120;
var circlefill = "#356585";
var circleopacity = 0.56;
var circlestroke = "#F7ECA6";
var circlestrokewidth = 15;

if(tributary.sw < 620) {
  
  // Adjust the behavior of your visualization depending on the width
  // Create responsive dataviz that adapts to it's size
  // ???
  // Profit!
  
  textstring = "Tributary is small"
  fontsize = 45;
  texty = 50;
    
}

var svg = d3.select("svg")
    
var text = svg.append("svg:text")
    .attr("x", textx)
    .attr("y", texty)
    .text(textstring)
    .attr("class", "letter")
    .style("font-size", fontsize)
    .style("fill", fontcolor);
    
var square = svg.append("svg:rect")
    .attr("x", squarex)
    .attr("y", squarey)
    .attr("width", squaresize)
    .attr("height", squaresize)
    .style("fill", squarefill)
    .style("opacity", squareopacity);
    
var circle = svg.append("svg:circle")
    .attr("cx", circlex)
    .attr("cy", circley)
    .attr("r", circlesize)
    .style("fill", circlefill)
    .style("opacity", circleopacity)   
    .style("stroke", circlestroke)
    .style("stroke-width", circlestrokewidth);