SVG Test

_.md

[ Launch: SVG Test ] 5804671 by larryweya

config.json

{"description":"SVG Test","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}},"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}

inlet.js

var svg = d3.select("svg");

var client = {
    circles: [
        {
            day: 1,
            type: 'expected',
            colored: true
        },
        {
            day: 3,
            type: 'expected',
            colored: false
        },
        {
            day: 7,
            type: 'expected',
            colored: false
        },
        {
            day: 2,
            type: 'actual'
        }
    ],
    statuses: [
        {
            day: 1,
            status: 'missed'
        }
    ],
    ticks: [
        {
            day: 4,
            type: 'expected'
        },
        {
            day: 5,
            type: 'expected'
        },
        {
            day: 6,
            type: 'expected'
        }
    ],
    lines: [
        {
            start: 1,
            end: 3,
            type: 'actual'
        },
        {
            start: 3,
            end: 7,
            type: 'expected'
        }
    ],
    day_nos: [
        {
            day:2,
            type:'actual'
        },
        {
            day:3,
            type:'expected'
        },
        {
            day:7,
            type:'expected'
        }
    ]
};

function draw_svg(client, svg, color, red, yellow, green, grey) {
  var x_offset = 17;
  var x_scale = 35;
  var y_offset = 33;
  var thickness = 4, thickness_scaled = thickness * 0.5;
  var radius = 12, radius_scaled = radius * 0.7;
  var text_width = 13;
  
  svg.selectAll('.lines')
    .data(client.lines)
    .enter()
    .append('rect')
    .attr('x', function(d){ return ((d.start - 1) * x_scale) + x_offset })
    .attr('y', y_offset-thickness/2)
    .attr('width', function(d){ return (d.end - d.start) * x_scale})
    .attr('height', thickness)
    .attr('fill', function(d){ return d.type === 'expected'?grey:color});
  
  svg.selectAll('.ticks')
    .data(client.ticks)
    .enter()
    .append('rect')
    .attr('x', function(d){ return ((d.day - 1) * x_scale) + x_offset })
    .attr('y', y_offset - 15/2)
    .attr('width', thickness_scaled)
    .attr('height', 15)
    .attr('fill', function(d){ return d.type === 'expected'?grey:color});
  
  svg.selectAll('.circles')
    .data(client.circles)
    .enter()
    .append('circle')
    .attr('cx', function(d){ return ((d.day - 1) * x_scale) + x_offset })
    .attr('cy', y_offset)
    .attr('fill', function(d){ return d.type === 'actual'?'black':(d.colored?color:grey) })
    .attr('r', function(d){ return d.type === 'expected'?radius:radius_scaled});
    
  svg.selectAll('.statuses')
    .data(client.statuses)
    .enter()
    .append('text')
    .text(function(d){return d.status === 'missed'?'\uf00d':'\uf00c'})
    .style('font-family', 'FontAwesome')
    .attr('x', function(d){return (((d.day - 1) * x_scale) + x_offset) - text_width/2})
    .attr('y', function(d){return y_offset - radius * 1.5})
    .attr('fill', function(d){return d.status === 'done'?green:red});
  
  svg.selectAll('.day_nos')
    .data(client.day_nos)
    .enter()
    .append('text')
    .text(function(d){return d.day})
    .attr('x', function(d){return (((d.day - 1) * x_scale) + x_offset) - text_width/2})
    .attr('y', (y_offset + radius) * 1.4)
    .attr('fill', function(d){return d.type === 'actual'?'black':grey});
 
}
draw_svg(client, svg, '#EDCA00', '#d13f3f', '#EDCA00', '#25aa4a', '#B6B6B6');