progress

_.md

[ Launch: test ] 48a39ea4b3cf1349c6b6 by getsetbro
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"progress","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}},"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.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var data = ['item 1','item 2','item 3','item 4','item 5','item 6', 'item 7'];
var progress = 4;
    var distBetween = (1000 / data.length) ;

    var svg = d3.select('svg').attr({
        'xmlns':'http://www.w3.org/2000/svg',
        'xlink:xlink':'http://www.w3.org/1999/xlink',
        'viewBox': -(distBetween/2)+' 0 1000 45',
        //'preserveAspectRatio':'xMinYMin',
        //'preserveAspectRatio':'xMidYMin',
        //'preserveAspectRatio':'xMaxYMin',
        //'preserveAspectRatio':'xMinYMid',
        //'preserveAspectRatio':'xMidYMid',
        //'preserveAspectRatio':'xMaxYMid',
        //'preserveAspectRatio':'xMinYMax',
        //'preserveAspectRatio':'xMidYMax',
        //'preserveAspectRatio':'xMaxYMax',
		preserveAspectRatio:"xMidYMid meet",
		//preserveAspectRatio:"xMinYMax slice",
        'height': 143,
        'width': '100%'
    });

var circles = svg.selectAll('z')
    .data(data)
    .enter();

    circles.append('line')
    .attr({
      x1: function(d,i) {
        return (distBetween*i);
      },
      x2:  function(d,i) {
        if((data.length-1) === i){
          return (distBetween*i);
        }
        return (distBetween*(i+1));
      },
      y1: 0,
      y2: 0,
      'stroke':function(d,i){
        var color = (progress <= (i+1) )?'#6D7174':'#7EA7D3';
        return color;
      },
      'stroke-width':10
    });

    circles.append('circle')
    .attr({
      cx: function(d,i) {
        return (distBetween*i);
      },
      cy: 0,
      r: 30,
      fill: function(d,i){
        var color = (progress <= i)?'#6D7174':'#7EA7D3';
        return color;
      }
    });

    circles.append('circle')
    .attr({
      cx: function(d,i) {
        return (distBetween*i);
      },
      cy: 0,
      r: 20,
      fill: function(d,i){
        var color = (progress <= i)?'#afafb0':'#D2E2E5';
        return color;
      },
      stroke:'#fff',
      'stroke-width': 2
    });

    circles.append('circle')
    .attr({
      cx: function(d,i) {
        return (distBetween*i);
      },
      cy: 0,
      r: function(d, i){
        var prog = (progress === (i+1) ) ? 12 : 0;
        return prog;
      },
      fill: '#464646'
    });


    circles.append('text')
    .attr({
      x: function(d,i) {
        return (distBetween*i);
      },
      y: 55,
      'alignment-baseline': 'middle',
      'text-anchor': 'middle'
    })
    .append('tspan')
    .text(function(d) {
      return d;
    });