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='5' 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="50%" class="line" />
            <line x1="16%" y1="50%" x2="83%" y2="50%" class="line" />
            <line x1="16%" y1="50%" x2="16%" y2="100%" class="line" style="marker-end:url(#head);" />
            <line x1="50%" y1="50%" x2="50%" y2="100%" class="line" style="marker-end:url(#head);" />
            <line x1="83%" y1="50%" x2="83%" y2="100%" 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">
 ...