Responsive SVG (d3.js)

HTML

<div id="container">
  <svg id="chart" width="600" height="200"
    viewBox="0 0 600 200"
    perserveAspectRatio="xMinYMid">
    <ul class="clock-container full middle carousel-items" date-utc-hours="11" date-utc-min="03">
 <li data-city="berlin" data-locale="de" data-citytitle="Berlin" class="clock vertical-align-wrapper carousel-item" data-id="1" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
                                                <div class="circle" data-locale="de" data-city="berlin" data-citytitle="Berlin" style="transform: matrix(0.25, 0, 0, 0.25, 0, 0); opacity: 1;"></div>
                        <div class="clock-content" data-hours="01" data-min="03" data-am="PM">
                            <div class="dot" style="opacity: 0;"></div>
                            <span class="clock-hand" style="opacity: 0; transform: matrix(0.54112, -0.84094, 0.84094, 0.54112, 0, 0);"><span class="clock-label" style="transform: matrix(1, 0, 0, 1, 0, 0);">Berlin</span></span>
                        </div>

                    </li><li data-city="paris" data-locale="fr" data-citytitle="Paris" class="clock vertical-align-wrapper carousel-item current" data-id="3" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
                                                <div class="circle" data-locale="fr" data-city="paris" data-citytitle="Paris" style="transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"></div>
                        <div class="clock-content" data-hours="01" data-min="03" data-am="PM">
                            <div class="dot" style="opacity: 1;"></div>
                            <span class="clock-hand" style="opacity: 1; transform: matrix(0.54463, -0.83867, 0.83867, 0.54463, 0, 0);"><span class="clock-label" style="transform: matrix(1, 0, 0, 1, 0, 0);">Paris</span></span>
                        </div>

                    </li><li data-city="london" data-locale="en" data-citytitle="London" class="clock vertical-align-wrapper...

CSS

#container {
    margin: 20px;
}
#chart {
    background-color: #eee;
}
#chart circle {
    fill-opacity: .8;
}
#c1{
  opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}
#c2{
  opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}
#c3{
  opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

JavaScript

var chart = $("#chart"),
    aspect = chart.width() / chart.height(),
    container = chart.parent();
$(window).on("resize", function() {
    var targetWidth = container.width();
    chart.attr("width", targetWidth);
    chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");