First D3 visualizations

_.md

[ Launch: First D3 visualizations ] 28d8c11b4921c7f28b9c by jefferydutra

circles

{}

config.json

{"description":"First D3 visualizations","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"circles":{"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}

inlet.js

var margin = {
    top: 20,
    right: 40,
    bottom: 20,
    left: 150
};
var timeDomainStart = d3.time.day.offset(new Date(), -3);
var timeDomainEnd = d3.time.hour.offset(new Date(), +3);
var timeDomainMode = FIT_TIME_DOMAIN_MODE;// fixed or fit
var taskTypes = [];
var taskStatus = [];
var height = 600 - margin.top - margin.bottom - 5;
var width = 1000 - margin.right - margin.left - 5;

var dataset = [5, 10, 15, 20, 35];
var svg = d3
  .select('svg')
  .attr('width', width)
  .attr('height', height);


var circles = svg
  .selectAll('circle')
  .data(dataset)
  .enter()
  .append('circle');

circles.attr('cx', function(d, i) {
  return (i * 50) + 25;
})
.attr('cy', height / 2)
.attr('r', function(d) {
  return d;
})
.attr('fill', 'yellow')
.attr('stroke', 'orange')

  

var w = 200,
    h = 200,
    p = 10;

var data = [{count:100,year:1999},
    {count:240,year:2010},
    {count:290,year:2009}];

var bar_height = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.count; }) )  // min max of count
    .range([p,h-p]);  // min max of area to plot in


var bar_xpos = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.year; }) )  // min max of year
    .range([p,w-p]);  // min max of area to plot in


var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", function(d) {
        return bar_xpos(d.year); })
    .attr("y", function(d) { 
        return h - bar_height(d.count); })
    .attr("width", 10)
    .attr("height", function(d) {return bar_height(d.count); })
    .attr("fill", "steelblue")