progress with text wrap

_.md

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

config.json

{"description":"progress with text wrap","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},"css.css":{"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}

css.css

.svgtext{
  text-align:center
}

inlet.js

(function() {
    'use strict';

    var data = ['Long Term Prospect', 'Short Term Prospect', 'RFP/ Proposal/ BOV', 'Engaged', 'Deal Marketing', 'Under Contract', 'Deal Closed'];
    var progress = 4;
    var distBetween = (1200 / 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 1200 45',
        //'preserveAspectRatio':'xMinYMin',
        //'preserveAspectRatio':'xMidYMin',
        //'preserveAspectRatio':'xMaxYMin',
        //'preserveAspectRatio':'xMinYMid',
        'preserveAspectRatio': 'xMidYMid meet',
        //preserveAspectRatio:'xMidYMid slice',
        //'preserveAspectRatio':'xMaxYMid',
        //'preserveAspectRatio': 'xMinYMax',
        //'preserveAspectRatio':'xMidYMax',
        //'preserveAspectRatio':'xMaxYMax',
        'height': 142,
        'width': '100%'
    });


    var circles = svg.selectAll('z')
        .data(data)
        .enter();
    //lines
    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': 5
        });
    //big outer circles
    circles.append('circle')
        .attr({
            cx: function(d, i) {
                return (distBetween * i);
            },
            cy: 0,
            r: 18,
            fill: function(d, i) {
                var color = (progress <= i) ? '#6D7174' : '#7EA7D3';
                return color;
            }
        });

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

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

    circles.append('foreignObject')
        .attr({
            width: 100,
            height: 88,
            'class': 'foreignObject',
            x: function(d, i) {
                return (distBetween * i) - 50;
            },
            y: 23
        })
        .append('xhtml:div')
        .attr('class', 'svgtext')
        .html(function(d) {
            return d;
        });


})();