Estoy tratando de recrear el efecto de distorsión cartesiana utilizado en la página de la semana de la moda del New York Times . Sin embargo, usan D3 versión 3 y complemento de ojo de pez para D3js que no funciona con D3 versión 4.

Dado que todo el proyecto que hacemos está en D3 V4, no puedo cambiar a D3 Versión 3.

¿Hay otras formas de lograr este efecto usando CSS y jquery?

Probé un aquí es donde llegué hasta ahora: vista previa

 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"); } }

¿Cómo mejorar esto y lograr el efecto visto en NY Times?