I am trying to recreate Cartesian Distortion effect used in New York Times Fashion Week page. However,they use D3 version 3 and fisheye plugin for D3js which does not work with D3 version 4.

Since the whole project we do is in D3 V4, I cannot downgrade to D3 Version 3.

Is there other ways to achieve this effect using CSS and jquery?

I have tried a this is where I got so far: preview

window.onload = run;
function run() {
    if ($('.overlayDiv').css('display') != 'none') {
        var container = d3.select('.overlayDiv');
        container.empty();
        var val = parseInt(5);
        var overlayWidth = $(".overlayDiv").width();
        var vwidth = (overlayWidth / (val));
        console.log(vwidth);
        for (i = 0; i < val; ++i) {
            var div = container.append("div").style("width", vwidth + "px")
                .style("height", "100%")
                .style("background", "rgb(75, 123, 175)")
                .style("float", "left")

            var year = div.text(i)
                .attr("class", "summary")
                .style("text-align", "center")
                .style("font-size", "32px")
                .style("font-weight", "bold")
                .style("line-height", "100px").style("color", "white")
                .on('mouseover', function() {
                    d3.select(this)
                        .transition().style('width', $(".overlayDiv").width() / 2 + "px")
                        .style("background", "rgba(90, 90, 90, 0.78)")

                    $('.summary').not(this).each(function() {
                        $(this).css("width", (overlayWidth / 3) / (val));
                    });

                })
                .on('mouseout', function() {
                    d3.select(this)
                        .transition().style('width', vwidth + "px")
                        .style("background", "rgb(75, 123, 175)")
                    $('.summary').not(this).each(function() {
                        $(this).css("width", vwidth);
                    });
                })
        }

        $('.overlayDiv').show();
        //$('.overlayDiv').text(this.firstChild.nextSibling.innerHTML);
        $('.overlayDiv').addClass("overlayActive");
        $('.overlayDiv').removeClass("overlayInactive");
    } else {
        var container = d3.select('.overlayDiv');
        container.empty();
        $('.overlayDiv').hide();
        $('.overlayDiv').text("");
        $('.overlayDiv').removeClass("overlayActive");
        $('.overlayDiv').addClass("overlayInactive");
    }
}

How to improve this and achieve the effect seen in NY Times?

I am trying to recreate Cartesian Distortion effect used in New York Times Fashion Week page. However,they use D3 version 3 and fisheye plugin for D3js which does not work with D3 version 4.

Since the whole project we do is in D3 V4, I cannot downgrade to D3 Version 3.

Is there other ways to achieve this effect using CSS and jquery?

I have tried a this is where I got so far: preview

window.onload = run;
function run() {
    if ($('.overlayDiv').css('display') != 'none') {
        var container = d3.select('.overlayDiv');
        container.empty();
        var val = parseInt(5);
        var overlayWidth = $(".overlayDiv").width();
        var vwidth = (overlayWidth / (val));
        console.log(vwidth);
        for (i = 0; i < val; ++i) {
            var div = container.append("div").style("width", vwidth + "px")
                .style("height", "100%")
                .style("background", "rgb(75, 123, 175)")
                .style("float", "left")

            var year = div.text(i)
                .attr("class", "summary")
                .style("text-align", "center")
                .style("font-size", "32px")
                .style("font-weight", "bold")
                .style("line-height", "100px").style("color", "white")
                .on('mouseover', function() {
                    d3.select(this)
                        .transition().style('width', $(".overlayDiv").width() / 2 + "px")
                        .style("background", "rgba(90, 90, 90, 0.78)")

                    $('.summary').not(this).each(function() {
                        $(this).css("width", (overlayWidth / 3) / (val));
                    });

                })
                .on('mouseout', function() {
                    d3.select(this)
                        .transition().style('width', vwidth + "px")
                        .style("background", "rgb(75, 123, 175)")
                    $('.summary').not(this).each(function() {
                        $(this).css("width", vwidth);
                    });
                })
        }

        $('.overlayDiv').show();
        //$('.overlayDiv').text(this.firstChild.nextSibling.innerHTML);
        $('.overlayDiv').addClass("overlayActive");
        $('.overlayDiv').removeClass("overlayInactive");
    } else {
        var container = d3.select('.overlayDiv');
        container.empty();
        $('.overlayDiv').hide();
        $('.overlayDiv').text("");
        $('.overlayDiv').removeClass("overlayActive");
        $('.overlayDiv').addClass("overlayInactive");
    }
}

How to improve this and achieve the effect seen in NY Times?

• javascript
• jquery
• css
• d3.js

• Do you HAVE to use d3 only? Same effect can be achieved using css only. – Aslam Commented Mar 10, 2017 at 7:40
• 1 You might want to look at this codepen.io/hunzaboy/pen/qrRpzZ – Aslam Commented Mar 10, 2017 at 8:11
• @hunzaboy thanks. That will do. D3 is used for dynamic 'div' creation based on data, it would have been better if effect can be done with D3 v4, but in this question I was looking for a CSS solution. – devN Commented Mar 10, 2017 at 9:07
• Ok i am posting it as answer. So please select it as an answer so that others can find it helpful. – Aslam Commented Mar 10, 2017 at 9:20

1 Answer 1

You can achieve this effect using css only.

CodePen: http://codepen.io/hunzaboy/pen/qrRpzZ

body {
  background: #444;
}

.items {
  height: 128px;
  /*change this as per your requirments */
  overflow: hidden;
  display: flex;
}

.item {
  box-shadow: inset 0 0 0 1px #000;
  align-items: center;
  transition: flex 0.2s;
  background-size: cover;
  background-position: center;
  flex: 1;
}

$class-slug: item !default;
@for $i from 1 through 20 {
  .#{$class-slug}-#{$i} {
    background-image: url("https://randomuser.me/api/portraits/women/#{$i}.jpg");
  }
}


/* Flex Items */

.item>* {
  /*   flex: 1 0 auto; */
}

.item:hover {
  flex: 3;
}

.item:hover ~ .item {
  flex: 2;
}