test

_.md

[ Launch: test ] 215f0a38f0daccbcfdb7b897a788c73b by mogauvin
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"test","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}},"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}

inlet.js

		// helper function
		function getDate(d) {
			return new Date(d.jsonDate);
		}
		
		/*
		function getDate(d) {
			return new Date(d);
		}		
		*/
		
		var dataArray1 = 	[2, 5, 3];
		var dataArray2 =	[ 	
								{"SMP":20, "EMP":100, "jsonDate":"09\/27\/2017"}, 
								{"SMP":100, "EMP":500, "jsonDate":"03\/15\/2017"},
								{"SMP":50, "EMP":325, "jsonDate":"01\/28\/2017"}
							];
		var r = 300;


		//var width = 1500;
		//var height = 500;		
		
		var margin = {top: 40, right: 40, bottom: 40, left: 40},
			width = 1000,	// - margin.left - margin.right,
			height = 700 - margin.top - margin.bottom,
			padding = 100;

		var canvas = d3.select('svg')
			.attr('height', height);
			
		/* https://bl.ocks.org/mbostock/1166403
		var parse = d3.timeFormat("%b %Y").parse;

		var x = d3.scaleTime()
			.range([0, width]);

		var y = d3.scaleLinear()
			.range([height, 0]);

		var xAxis = d3.axisBottom()
			.scale(x)
			.tickSize(-height);

		var yAxis = d3.axisLeft()
			.scale(y)
			.ticks(4);
		*/
		
		/*
        // define the y scale  (vertical)
        var yScale = d3.scaleLinear()
	        .domain([0, 100])    				// values between 0 and 100 for mile posts
		.range([height - padding, padding]);	// map these to the chart height, less padding.  

		    
        // define the x scale (horizontal)
        var mindate = new Date(2017,0,1),
            maxdate = new Date(2017,0,31);
            
        var xScale = d3.scaleTime()
	        .domain([mindate, maxdate])    		// values between for month of january
		.range([padding, width - padding * 2]); // map these the the chart width = total width minus padding at 
		*/
		
		/* http://bl.ocks.org/phoebebright/3059392 */
		
		var parse = d3.timeFormat("%B %Y");
				
        // define the y scale (horizontal)
        var mindate = new Date(2016,9,1),
            maxdate = new Date(2017,11,31);
			
        mindate = d3.min(dataArray2, function(d) { return new Date(d.jsonDate); }),
        maxdate = d3.max(dataArray2, function(d) { return new Date(d.jsonDate); });			

			
        var yScale = d3.scaleTime()
	        .domain([mindate, maxdate])    			// values between for month of january
			.range([height - padding, padding]);	// map these to the chart height, less padding.

	        //.domain([mindate, maxdate])    			// values between for month of january
			//.range([0, 11]);	// map these the the chart width = total width minus padding 			

		
		// define the x scale  (vertical)	
        var xScale = d3.scaleLinear()
	        .domain([0, 1000])    					// values between 0 and 100 for mile posts
			.range([padding, width])
			//.range([padding, width - padding * 2]); // map these the the chart width = total width minus padding 
		
		
        // define the y axis
        var yAxis = d3.axisLeft()
            .scale(yScale)
			//.ticks(d3.timeMonth)
			//.tickSize(20)
			//.tickFormat(parse);			
					
        // define the y axis
        var xAxis = d3.axisBottom()
            .scale(xScale);			
			
        // draw y axis with labels and move in from the size by the amount of padding
        canvas.append("g")
            .attr("transform", "translate("+padding+",0)")
            .call(yAxis);

        // draw x axis with labels and move to the bottom of the chart area
        canvas.append("g")
            .attr("class", "xaxis")   // give it a class so it can be used to select only xaxis labels  below
            .attr("transform", "translate(0," + (height - padding) + ")")
            .call(xAxis);			
		
		
		// previous copper bars
		
		/*
		var widthScale = d3.scaleLinear()
							.domain([0, 60])
							.range([0, width]);
		*/		

		// set up line gradient for copper bars	
		var gradient1 = canvas
			.append("linearGradient")
			.attr("x1", "0")    	//20%
			.attr("y1", "0")		//30%
			.attr("x2", "0")   		//40% 
			.attr("y2", "100%")		//80%
			.attr("id", "gradient01")
			//.attr("spreadMethod", "repeat")
			//.attr("gradientUnits", "userSpaceOnUse")

		gradient1
			.append("stop")
			.attr("offset", "0")
			.attr("stop-color", "#ccc")
			
		gradient1
			.append("stop")
			.attr("offset", "0.5")
			.attr("stop-color", "#fff")

		gradient1
			.append("stop")
			.attr("offset", "1")
			.attr("stop-color", "#ccc")
			

		canvas.append("g")
			.attr("transform", "translate("+padding+",0)")
			.selectAll('rect')
			.data(dataArray2)
			.enter()
				.append('rect')
				.attr("x", 0) //function(d, i) { return xScale( Math.random() * 500 | i * 10); } )				// .attr("x", function(d, i) { return Math.random() * 500 | i * 10; } ) // .attr("x", 0)	
				.attr('width', function(d) { return xScale(d.EMP - d.SMP); }) // 100; // function(d) { return d * 10; } // widthScale(d) // return xScale( Math.random() * width | 0); 
				.attr('height', 50) 	// 50 // yScale(d);
				.attr('y', function(d, i) { return yScale(getDate(d)); }) 	// function(d, i) { return (i * 100) + padding; }  // function(d) { return yScale(d); } // 100 // return (i * 100) + 50 + padding; 
				//.attr('fill', function(d) { return colorScale(d); }); // function (d) { return color(d); } // colorScale(d)
				.attr("fill", "url(#gradient01)");