mattmazzola

_.md

[ Launch: mattmazzola ] 400aa81b5cf1284020fa by mattmazzola

config.json

{"description":"mattmazzola","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"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,"inline-console":true}

inlet.js

var margin = {
  top: 20,
  right: 20,
  left: 31,
  bottom: 12
};
var width = 960;
var height = 500;

var xScale = d3.scale.linear()
    .domain([0, 100])
    .range([0, width]);

var yScale = d3.scale.linear()
	.domain([0, 100])
	.range([height, 0])

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickSize(-height);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tickSize(-width);

var zoomed = function() {
  console.log('zoomed234234234');
  svg.select('g.x.axis').call(xAxis);
  svg.select('g.y.axis').call(yAxis);
};

var zoom = d3.behavior.zoom()
.x(xScale)
.scaleExtent([1, 20])
    .on("zoom", zoomed);

var svg = d3.select("svg")
  .append("g")
	.classed('abced',true)
    .attr("transform", "translate(" +[margin.left, margin.top] + ")")
    .call(zoom);

svg.append("rect")
	.attr("transform", "translate(" + [margin.left, -13] + ")")
    .attr("width", width)
    .attr("height", height);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + [margin.left, height-margin.bottom] + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
	.attr("transform", "translate(" + [margin.left, -margin.bottom] + ")")
    .call(yAxis);

styles.css

svg {
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}

rect {
  fill: #ddd;
}

.axis path,
.axis line {
  fill: none;
  stroke: #fff;
}