mpmckenna8/_.md

## _.md

      
    Raw
  

              _.md
            
          
    [ Launch: Tributary inlet ] 9203884 by mpmckenna8


## 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,"thumbnail":"http://i.imgur.com/CWr7sPS.png"}

## inlet.js

    <head>
        <meta charset="utf-8">
            <title>unhcr column chart</title>
            <script type="text/javascript" src="d3/d3.js"></script>
             <script type="text/javascript" src="./UNhcrPOC50.js"></script>
             <style>

                 .bar {
                     fill: purple;
                 }

             .bar:hover {
                 fill: brown;
             }

             .axis {
                 font: 9px sans-serif;
             }

             .axis path,
             .axis line {
                 fill: none;
                 stroke: #000;
                 shape-rendering: crispEdges;
             }

             .x.axis path {
                 stroke:black;
             }


             #tooltip {
                 position: absolute;
                 width: 200px;
                 height: auto;
                 padding: 10px;
                 background-color: yellow;
                 -webkit-border-radius: 10px;
                 -moz-border-radius: 10px;
                 border-radius: 10px;
                 -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                 -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                 box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                 pointer-events: none;
             }

             #tooltip.hidden {
                 display: none;
             }

             #tooltip p {
                 margin: 0;
                 font-family: sans-serif;
                 font-size: 16px;
                 line-height: 20px;
             }
             svg{
                 margin-top:50px;
             }
                 </style>
            </head>
    <body>

    <div id="tooltip" class="hidden">
        <p><strong>ILabel Heading</strong></p>
        <p><span id="value">100</span>%</p>
    </div>


        <script type="text/javascript">
            var margin = {top: 20, right: 20, bottom: 30, left: 85};
            var w = 1100- margin.left - margin.right,
            barheight= 20;
            var h= 500 - margin.top - margin.bottom;
            barPadding = 3;
          // var x = d3.scale.linear()
          //  .range([0,width]);


         /*
           var chart = d3.select(".chart").attr("width",width).attr("height",h);


           // x.domain([0,d3.max(tops.totrefs)])
               */
        var x = d3.scale.ordinal()
        .range([0, w+20])
        .domain(50);

        var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        ;


        var refs = d3.values(top50POCunhcr);
        //console.table(refs);
        //console.log(refs[1]);


        var y = d3.scale.linear()
        .domain([0,4500000])
        .range([ h,0]);

        var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);

        var svg = d3.select("body")
        .append("svg")
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


        var axisp= h;

        svg.selectAll("rect")
        .data(top50POCunhcr)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
              return i * (w / top50POCunhcr.length) + 15;
              })
              .attr("y", function(d) {
			   		return h - (d.totrefs / 10000);
                    })
                    .attr("width", w / top50POCunhcr.length - barPadding)
                    .attr("height", function(d) {
                          return d.totrefs / 10000;
                          })
                    .attr("fill","red")
        .on("mouseover", function(d){
            var xposit = 50;
                        //parseFloat(d3.select(this).attr("x")) + x.rangeBand() / 2
                        ;
                        var yposit = 30;

                        d3.select("#tootltip")
                            .style("left", xposit+ "px")
                            .style("top",  yposit + "px")
                        .select("#value")
                        .text(d._id);

                        //show the tooltip
                        d3.select("#tootltip").classed("hidden",false);

                        })
            .on("mouseout",function(){

                        //take away the tooltip
                            d3.select("#tooltip").classed("hidden",true);
                            })
                    .attr("class", function(d){
                          if(d._id == "Stateless" ){
                          return "noState"
                          }
                          else{
                          return "bar"}});

        svg.append("g")
                    .attr("class", "x axis")
                    .call(xAxis)
                     .attr("transform", "translate(0," + axisp + ")")
                     .append("text")
                     .style("text-anchor","middle")
                     .text("Places of Origin")
                     .attr("y", 12)
                     .attr("x",axisp)
                     ;


            svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Number of People of Concern");
        //now for that y axis which needs a linear scale...

            </script>
    </body>
</html>

	<head>
	<meta charset="utf-8">
	<title>unhcr column chart</title>
	<script type="text/javascript" src="d3/d3.js"></script>
	<script type="text/javascript" src="./UNhcrPOC50.js"></script>
	<style>

	.bar {
	fill: purple;
	}

	.bar:hover {
	fill: brown;
	}

	.axis {
	font: 9px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	stroke:black;
	}


	#tooltip {
	position: absolute;
	width: 200px;
	height: auto;
	padding: 10px;
	background-color: yellow;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	}

	#tooltip.hidden {
	display: none;
	}

	#tooltip p {
	margin: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 20px;
	}
	svg{
	margin-top:50px;
	}
	</style>
	</head>
	<body>

	<div id="tooltip" class="hidden">
	<p><strong>ILabel Heading</strong></p>
	<p><span id="value">100</span>%</p>
	</div>


	<script type="text/javascript">
	var margin = {top: 20, right: 20, bottom: 30, left: 85};
	var w = 1100- margin.left - margin.right,
	barheight= 20;
	var h= 500 - margin.top - margin.bottom;
	barPadding = 3;
	// var x = d3.scale.linear()
	// .range([0,width]);


	/*
	var chart = d3.select(".chart").attr("width",width).attr("height",h);



	// x.domain([0,d3.max(tops.totrefs)])
	*/
	var x = d3.scale.ordinal()
	.range([0, w+20])
	.domain(50);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	;



	var refs = d3.values(top50POCunhcr);
	//console.table(refs);
	//console.log(refs[1]);





	var y = d3.scale.linear()
	.domain([0,4500000])
	.range([ h,0]);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10);

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");



	var axisp= h;

	svg.selectAll("rect")
	.data(top50POCunhcr)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return i * (w / top50POCunhcr.length) + 15;
	})
	.attr("y", function(d) {
	return h - (d.totrefs / 10000);
	})
	.attr("width", w / top50POCunhcr.length - barPadding)
	.attr("height", function(d) {
	return d.totrefs / 10000;
	})
	.attr("fill","red")
	.on("mouseover", function(d){
	var xposit = 50;
	//parseFloat(d3.select(this).attr("x")) + x.rangeBand() / 2
	;
	var yposit = 30;

	d3.select("#tootltip")
	.style("left", xposit+ "px")
	.style("top", yposit + "px")
	.select("#value")
	.text(d._id);

	//show the tooltip
	d3.select("#tootltip").classed("hidden",false);

	})
	.on("mouseout",function(){

	//take away the tooltip
	d3.select("#tooltip").classed("hidden",true);
	})
	.attr("class", function(d){
	if(d._id == "Stateless" ){
	return "noState"
	}
	else{
	return "bar"}});

	svg.append("g")
	.attr("class", "x axis")
	.call(xAxis)
	.attr("transform", "translate(0," + axisp + ")")
	.append("text")
	.style("text-anchor","middle")
	.text("Places of Origin")
	.attr("y", 12)
	.attr("x",axisp)
	;


	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Number of People of Concern");
	//now for that y axis which needs a linear scale...

	</script>
	</body>
	</html>