vogievetsky/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This line chart is constructed by looking at New York, San Francisco and Austin over the last three months.
The Plywood query to pull the data for this visualization is:
$('main')
  .filter($('time').in({ start: start, end: now }))
  .filter($('city').in(['San Francisco', 'New York', 'Austin']))
  .split('$city', 'City')
    .apply('Days',
      $('main').split($("time").timeBucket('P1D', 'Etc/UTC'), 'Day')
        .apply('Edits', '$main.count()')
        .sort('$Day', 'ascending')
    )
Inspired by http://bl.ocks.org/mbostock/3884955

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

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

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://static.imply.io/plywood/plywood.js"></script>
<script>

// Query

var Dataset = plywood.Dataset;
var $ = plywood.$;
var Chronoshift = plywood.Chronoshift;

var timezone = Chronoshift.Timezone.UTC;
var now = Chronoshift.day.floor(new Date(), timezone);
var start = Chronoshift.month.move(Chronoshift.month.floor(now, timezone), timezone, -2);
var stateByDayOfWeek = $('main')
  .filter($('time').in({ start: start, end: now }))
  .filter($('city').in(['San Francisco', 'New York', 'Austin']))
  .split('$city', 'City')
    .apply('Days',
      $('main').split($("time").timeBucket('P1D', 'Etc/UTC'), 'Day')
        .apply('Added', '$main.sum($added)')
        .sort('$Day', 'ascending')
    );

d3.xhr('http://plywood-proxy.imply.io/plywood')
  .header("Content-Type", "application/json")
  .response(function(request) { return Dataset.fromJS(JSON.parse(request.responseText)); })
  .post(
    JSON.stringify({
      dataSource: 'wiki',
      expression: stateByDayOfWeek
    }),
    function(err, dataset) {
      if (err) {
        console.log(err);
        return;
      }
      render(dataset);
    }
  );

// Rendering

function translate(x, y) {
  return "translate(" + x + "," + y + ")";
}

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

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

var color = d3.scale.category10();

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

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

var line = d3.svg.line()
  .interpolate("basis")
  .x(function(d) { return x(d.Day.start); })
  .y(function(d) { return y(d.Added); });

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

function render(dataset) {
  var data = dataset.toJS();

  color.domain(data.map(function(d) { return d.City; }));

  x.domain([
    d3.min(data[0].Days, function(d) { return d.Day.start; }),
    d3.max(data[0].Days, function(d) { return d.Day.end; })
  ]);

  y.domain([
    d3.min(data, function(d) { return d3.min(d.Days, function(d) { return d.Added; }); }),
    d3.max(data, function(d) { return d3.max(d.Days, function(d) { return d.Added; }); })
  ]);

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", translate(0, height))
    .call(xAxis);

  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("Lines Added");

  var city = svg.selectAll(".city").data(data)
    .enter().append("g")
      .attr("class", "city");

  city.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.Days); })
    .style("stroke", function(d) { return color(d.City); });

  city.append("text")
    .datum(function(d) { return { City: d.City, last: d.Days[d.Days.length - 1]}; })
    .attr("transform", function(d) { return translate(x(d.last.Day.start), y(d.last.Added)); })
    .attr("x", 3)
    .attr("dy", ".35em")
    .text(function(d) { return d.City; });
}

</script>

## thumbnail-big.png

      
    Raw
  

              thumbnail-big.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://static.imply.io/plywood/plywood.js"></script>
	<script>

	// Query

	var Dataset = plywood.Dataset;
	var $ = plywood.$;
	var Chronoshift = plywood.Chronoshift;

	var timezone = Chronoshift.Timezone.UTC;
	var now = Chronoshift.day.floor(new Date(), timezone);
	var start = Chronoshift.month.move(Chronoshift.month.floor(now, timezone), timezone, -2);
	var stateByDayOfWeek = $('main')
	.filter($('time').in({ start: start, end: now }))
	.filter($('city').in(['San Francisco', 'New York', 'Austin']))
	.split('$city', 'City')
	.apply('Days',
	$('main').split($("time").timeBucket('P1D', 'Etc/UTC'), 'Day')
	.apply('Added', '$main.sum($added)')
	.sort('$Day', 'ascending')
	);

	d3.xhr('http://plywood-proxy.imply.io/plywood')
	.header("Content-Type", "application/json")
	.response(function(request) { return Dataset.fromJS(JSON.parse(request.responseText)); })
	.post(
	JSON.stringify({
	dataSource: 'wiki',
	expression: stateByDayOfWeek
	}),
	function(err, dataset) {
	if (err) {
	console.log(err);
	return;
	}
	render(dataset);
	}
	);

	// Rendering

	function translate(x, y) {
	return "translate(" + x + "," + y + ")";
	}

	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

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

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

	var color = d3.scale.category10();

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

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

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.Day.start); })
	.y(function(d) { return y(d.Added); });

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

	function render(dataset) {
	var data = dataset.toJS();

	color.domain(data.map(function(d) { return d.City; }));

	x.domain([
	d3.min(data[0].Days, function(d) { return d.Day.start; }),
	d3.max(data[0].Days, function(d) { return d.Day.end; })
	]);

	y.domain([
	d3.min(data, function(d) { return d3.min(d.Days, function(d) { return d.Added; }); }),
	d3.max(data, function(d) { return d3.max(d.Days, function(d) { return d.Added; }); })
	]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", translate(0, height))
	.call(xAxis);

	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("Lines Added");

	var city = svg.selectAll(".city").data(data)
	.enter().append("g")
	.attr("class", "city");

	city.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.Days); })
	.style("stroke", function(d) { return color(d.City); });

	city.append("text")
	.datum(function(d) { return { City: d.City, last: d.Days[d.Days.length - 1]}; })
	.attr("transform", function(d) { return translate(x(d.last.Day.start), y(d.last.Added)); })
	.attr("x", 3)
	.attr("dy", ".35em")
	.text(function(d) { return d.City; });
	}

	</script>