d3 SVG Background

by samih

HTML

<div class="slider-range" >
    <svg viewBox='0 0 500 500' ></svg>
</div>

CSS

body {
    width: 100%;
    height: 100%;
    margin: 0;
}

svg {
    width: 100%;
    height: 100%;
}

.slider-range {
    width: 95%;
    height: 50px;
    background-color: lightgray;
    border-radius: 5px;
    margin: 50px auto 0 auto;
}

.data-point {
    fill: black;
}

JavaScript

var svg = d3.select(' .slider-range > svg');

var points = svg.selectAll('rect').
    data([5, 10, 15, 1]);

points.enter().append('rect')
    .attr('class', 'data-point')
    .attr('x', function(d, i){
        return (d/20) * 500;
    })
    .attr('y', function(d, i){
        return i*10;
    })
    .attr('width', 10)
    .attr('height', 10);