apple unit sales

_.md

[ Launch: apple unit sales ] 5202432 by ptvans
[ Launch Inlet ]
Gist #4103209
Gist #4103149

config.json

{"description":"apple unit sales","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"freq.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"freq2.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"unit-sales.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"unitsales.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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.6280948026772978,"thumbnail":"http://i.imgur.com/aMYXtI8.png","ajax-caching":true}

inlet.js

d3.select("#display").style("background-color","#3f3f3f")

var svg = d3.select("svg");
var data = tributary.unitsales;

var cw = 902; 
var ch = 165;
var dw = 40;
var dh = 10;
var r = 3;
var offset = 105;
var dopq = 0.75;

var startdate = data[0].Date;
var enddate = data[54].Date;
console.log(startdate);
console.log(enddate);

var format = d3.time.format("%d-%m-%Y");
var parsed = format.parse(startdate); 
console.log(parsed); 

var timescale = d3.scale.linear()
    .domain([format.parse(enddate), format.parse(startdate)])
    .range([dw,dw + cw])

var unitsmax = 20000;

var unitscale = d3.scale.linear()
	.domain([0,unitsmax])
	.range([dh+ch,dh])

svg.append("g")
  .attr("id", "desktops")

svg.append("g")
	.attr("id", "portables")
	.attr("transform", "translate("+ 0 +","+ offset * 1 +")")

svg.append("g")
	.attr("id", "ipod")
	.attr("transform", "translate("+ 0 +","+ offset * 2 +")")

svg.append("g")
	.attr("id", "iphone")
	.attr("transform", "translate("+ 0 +","+ offset * 3 +")")

svg.append("g")
	.attr("id", "ipad")
	.attr("transform", "translate("+ 0 +","+ offset * 4 +")")


var desktops = svg.select("#desktops")
    .selectAll("circle")
	.data(data)
    .enter()
    .append("circle")
	.attr({
      "r":r,
      "fill":"#207DB1",
      "fill-opacity":dopq,
      "cx":function(d) {
      return timescale(format.parse(d.Date));},
      "cy":function(d){
      return unitscale(d.Desktops);}
	})

var portables = svg.select("#portables")
    .selectAll("circle")
	.data(data)
    .enter()
    .append("circle")
	.attr({
      "r":r,
      "fill":"#AC2891",
      "fill-opacity":dopq,
      "cx":function(d) {
      return timescale(format.parse(d.Date));},
      "cy":function(d){
      return unitscale(d.Portables);}
	})

var ipod = svg.select("#ipod")
    .selectAll("circle")
	.data(data)
    .enter()
    .append("circle")
	.attr({
      "r":r,
      "fill":"#13A2DA",
      "fill-opacity":dopq,
      "cx":function(d) {
      return timescale(format.parse(d.Date));},
      "cy":function(d){
      return unitscale(d.iPod);}
	})

var iphone = svg.select("#iphone")
    .selectAll("circle")
	.data(data)
    .enter()
    .append("circle")
	.attr({
      "r":r,
      "fill":"#FC2D99",
      "fill-opacity":dopq,
      "cx":function(d) {
      return timescale(format.parse(d.Date));},
      "cy":function(d){
      return unitscale(d.iPhone);}
	})

var ipad = svg.select("#ipad")
    .selectAll("circle")
	.data(data)
    .enter()
    .append("circle")
	.attr({
      "r":r,
      "fill":"#6D5DC7",
      "fill-opacity":dopq,
      "cx":function(d) {
      return timescale(format.parse(d.Date));},
      "cy":function(d){
      return unitscale(d.iPad);}
	})


svg.append("text")
  .text("desktops")
	.attr("transform", "translate("+ dw +","+ offset * 1 +")")

svg.append("text")
	.text("portables")
	.attr("transform", "translate("+ dw +","+ offset * 2 +")")

svg.append("text")
	.text("ipod")
	.attr("transform", "translate("+ dw +","+ offset * 3 +")")

svg.append("text")
	.text("iphone")
	.attr("transform", "translate("+ dw +","+ offset * 4 +")")

svg.append("text")
	.text("ipad")
	.attr("transform", "translate("+ dw +","+ offset * 5 +")")


   

unitsales.csv