SVG Line and Arrow with data boxes

Using SVG line

HTML

<div class="diagram-structure">
    <div class='diagram-container'>
        <div class='connector-top'></div>
        <div class="diagram-wrapper parent level-1">
            <div class='title-information-wrapper'>
                <div class='title'>Browser Usage Breakdown (Total)</div>
                <div class='information'>Accesses to the current campaign site</div>
            </div>
            <div class='value'>200</div>
        </div>
        <div class='connector-bottom'></div>
    </div>
    <div class='linking'>
        <svg xmlns="http://www.w3.org/2000/svg" overflow="visible" width="100%" height="100%">
            <defs>
                <marker id='head' orient="auto" markerWidth='6' markerHeight='8' refX='2' refY='4' class="arrowhead">
                    <path d='M0,0 L2,4 L0,8 L6,4 Z' />
                </marker>
            </defs>
            <line x1="50%" y1="0" x2="50%" y2="20" class="line" />
            <line x1="16%" y1="20" x2="83%" y2="20" class="line" />
            <line x1="16%" y1="20" x2="16%" y2="40" class="line" style="marker-end:url(#head);" />
            <line x1="50%" y1="20" x2="50%" y2="40" class="line" style="marker-end:url(#head);" />
            <line x1="83%" y1="20" x2="83%" y2="40" class="line" style="marker-end:url(#head);" />
        </svg>
    </div>
    <div class="col">
        <div class='diagram-container'>
            <div class='connector-top'></div>
            <div class="diagram-wrapper child level-1">
                <div class='title-information-wrapper'>
                    <div class='title'>Chrome</div>
                    <div class='information'>38% of total</div>
                </div>
                <div class='value'>4000</div>
            </div>
            <div class='connector-bottom'></div>
        </div>
    </div>
    <div class="col">
        <div class='diagram-container'>
            <div class='connector-top'></div>
            <div class="diagram-wrapper child level-1">
             ...

CSS

body {
    font-family:arial;
    padding:20px
}
.col {
    float:left;
    width:33.3333%
}

.diagram-structure .connector-top,
.diagram-structure .connector-bottom
{
    margin:0px auto;
    background:#333;
    width:1px;
    height:1px;
}

.diagram-structure .diagram-wrapper {
    width:80%;
    margin:0px auto;
    position:relative;
    border-radius:6px 6px 2px 2px;
    background: #aaa8a8;
    box-shadow: 1px 1px 2px rgba(30, 30, 30, 0.3);
    color:#222;
    padding:6px;
    text-align:center;
}
.diagram-structure .title-information-wrapper {
    padding: 0 0 6px 0;
}
.diagram-structure .title {
    font-size:16px;
    font-weight:bold;
}
.diagram-structure .information {
    font-size:12px;
}
.diagram-structure .value {
    color:#444;
    padding:6px;
    max-width:100%;
    border-radius: 2px;
    background-color:#eeeded;
    text-align:center;
    vertical-align:middle;
    display:block;
    font-size: 24px;
    font-weight: bold;
}
svg .line {
    stroke:rgb(150, 150, 160);
    stroke-width:1.5;
    stroke-linecap:round;
}
svg .arrowhead {
    fill:rgb(150, 150, 160);
    stroke-width:0;
}
.diagram-structure .linking {
    width:100%;
    height:50px;
    margin:0px auto;
}