quick-chart-2

_.md

[ Launch: quick-chart-1 ] ee0e6c55553ea39a1fca by jdutta
[ Launch: scratchpad ] 9721189 by jdutta

chart.css

g.axis path {
  fill: none;
  stroke-width: 1px;
  stroke: #777;
}

circle.point {
  fill: red;
}

g.tick text {
  font-size: 12px;
}

chart_data.json

{
    "46500.0": 2,
    "3500.0": 6,
    "144500.0": 1,
    "1876500.0": 2,
    "178500.0": 1,
    "171500.0": 1,
    "1500.0": 8,
    "147500.0": 1,
    "35500.0": 2,
    "778500.0": 1,
    "1400500.0": 5,
    "1567500.0": 2,
    "4500.0": 1,
    "238500.0": 1,
    "130500.0": 1,
    "98500.0": 1,
    "1090500.0": 4,
    "1557500.0": 2,
    "151500.0": 5,
    "219500.0": 1,
    "243500.0": 1,
    "138500.0": 1,
    "227500.0": 6,
    "71500.0": 1,
    "86500.0": 3,
    "118500.0": 3,
    "27500.0": 5,
    "139500.0": 2,
    "97500.0": 1,
    "797500.0": 2,
    "40500.0": 1,
    "1516500.0": 1,
    "78500.0": 3,
    "124500.0": 1,
    "109500.0": 2,
    "31500.0": 4,
    "49500.0": 3,
    "1562500.0": 1,
    "158500.0": 6,
    "17500.0": 1,
    "1572500.0": 2,
    "1358500.0": 1,
    "173500.0": 1,
    "1867500.0": 1,
    "222500.0": 1,
    "34500.0": 3,
    "187500.0": 2,
    "91500.0": 1,
    "5500.0": 9,
    "53500.0": 4,
    "1569500.0": 2,
    "1766500.0": 1,
    "180500.0": 1,
    "14500.0": 2,
    "6500.0": 1,
    "218500.0": 1,
    "18500.0": 2,
    "92500.0": 2,
    "44500.0": 2,
    "233500.0": 4,
    "2349500.0": 1,
    "22500.0": 3,
    "1402500.0": 5,
    "145500.0": 3,
    "1546500.0": 5,
    "154500.0": 1,
    "186500.0": 1,
    "1560500.0": 1,
    "157500.0": 2,
    "159500.0": 4,
    "228500.0": 1,
    "221500.0": 3,
    "236500.0": 3,
    "217500.0": 1,
    "1582500.0": 1,
    "25500.0": 2,
    "1528500.0": 1,
    "41500.0": 1,
    "21500.0": 2,
    "96500.0": 1,
    "1632500.0": 1,
    "57500.0": 4,
    "72500.0": 1,
    "1565500.0": 1,
    "146500.0": 1,
    "67500.0": 1,
    "179500.0": 1,
    "119500.0": 1,
    "500.0": 29,
    "1096500.0": 2,
    "244500.0": 1,
    "36500.0": 2,
    "52500.0": 5,
    "1658500.0": 1,
    "23500.0": 1,
    "184500.0": 2,
    "75500.0": 2,
    "32500.0": 2,
    "12500.0": 1,
    "29500.0": 4,
    "170500.0": 2,
    "1478500.0": 1,
    "185500.0": 3,
    "48500.0": 2,
    "155500.0": 4,
    "2289500.0": 1,
    "223500.0": 4,
    "11500.0": 4,
    "128500.0": 1,
    "1423500.0": 1,
    "19500.0": 1,
    "231500.0": 2,
    "45500.0": 3,
    "7500.0": 4,
    "242500.0": 2,
    "104500.0": 2,
    "8500.0": 7,
    "112500.0": 1,
    "39500.0": 6,
    "235500.0": 1,
    "89500.0": 2,
    "47500.0": 2,
    "168500.0": 1,
    "174500.0": 1,
    "183500.0": 5,
    "79500.0": 1,
    "2500.0": 6,
    "1089500.0": 5,
    "194500.0": 1,
    "110500.0": 2,
    "63500.0": 1,
    "188500.0": 2,
    "28500.0": 1,
    "149500.0": 2,
    "113500.0": 1,
    "24500.0": 3,
    "1566500.0": 1,
    "177500.0": 4,
    "143500.0": 2,
    "182500.0": 3,
    "1428500.0": 3,
    "56500.0": 3,
    "232500.0": 2,
    "10500.0": 2,
    "160500.0": 2,
    "58500.0": 2,
    "1570500.0": 2,
    "156500.0": 3,
    "251500.0": 1,
    "54500.0": 5,
    "38500.0": 2,
    "43500.0": 3,
    "16500.0": 1,
    "84500.0": 2,
    "1615500.0": 1,
    "88500.0": 1,
    "226500.0": 2,
    "169500.0": 3,
    "74500.0": 1,
    "80500.0": 1,
    "192500.0": 1,
    "229500.0": 3,
    "87500.0": 2,
    "33500.0": 3,
    "181500.0": 7,
    "1397500.0": 2,
    "153500.0": 2,
    "1088500.0": 1,
    "135500.0": 1,
    "68500.0": 1,
    "116500.0": 2,
    "239500.0": 3,
    "1107500.0": 2,
    "81500.0": 1,
    "176500.0": 2,
    "148500.0": 5,
    "50500.0": 1,
    "115500.0": 1,
    "163500.0": 1,
    "129500.0": 1,
    "20500.0": 1,
    "83500.0": 3,
    "142500.0": 2,
    "152500.0": 1,
    "42500.0": 1,
    "161500.0": 2,
    "230500.0": 1,
    "224500.0": 2,
    "117500.0": 2,
    "150500.0": 3
}

config.json

{"description":"quick-chart-2","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},"s_action.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"c_ip.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart.css":{"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,"thumbnail":"http://i.imgur.com/r845Ug0.gif"}

inlet.js

// Quick charting tool for Shoukat


// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  width: 619,
  height: 498,
  textFontSize: '12px'
};

function getPoints(map) {
  var arr = [];
  for (var key in map) {
    arr.push({x: +key, y: +map[key]});
  }
  return arr;
}

// If the data file is foo.csv, then use tributary.foo to read that csv.
// Note: please have no space around comma in the csv file.
var data = getPoints(tributary.chart_data);
//console.log(data);

drawChart(data); 

function numberFormatter(n) {
  if (n >= 1000000) {
    n = (n / 1000000).toFixed(1);
    return '' + n + 'M';
  }
  if (n > 1000) {
    n = Math.round(n / 1000);
    return '' + n + 'K';
  }
  return n;
}


function drawChart(data) {
  
  var svg = d3.select('svg');
  var gRoot = svg.append('svg:g')
				.attr('transform', 'translate(75, 80)');

  var xRange = d3.extent(data, function (p) { return +p.x; });
  var yRange = d3.extent(data, function (p) { return p.y; });
  var xScale = d3.scale.linear()
                 .domain(xRange)
                 .range([0, config.width])
  var yScale = d3.scale.linear()
                 .domain(yRange.reverse())
                 .range([0, config.height])

  var xAxis = d3.svg.axis()
                 .ticks(10)
                 .tickFormat(numberFormatter)
                 .scale(xScale);
  var yAxis = d3.svg.axis()
                 .orient('left')
                 .scale(yScale);
  
  gRoot.append('svg:g')
        .classed('axis', true)
        .attr('transform', 'translate('+[0, config.height]+')')
		.call(xAxis);
  gRoot.append('svg:g')
        .classed('axis', true)
        .attr('transform', 'translate('+[0, 0]+')')
		.call(yAxis);
  //console.log(xRange, yRange);
  
  gRoot.selectAll('.point')
       .data(data)
       .enter()
       .append('svg:circle')
       .classed('point', true)
  .attr({
    cx: function (d) {
      return xScale(d.x);
    },
    cy: function (d) {
      return yScale(d.y);
    },
    r: 2
  })
}