distillpub / post--feature-visualization

Feature Visualization
https://distill.pub/2017/feature-visualization/
Creative Commons Attribution 4.0 International
128 stars 33 forks source link

Sliders won't work anymore #33

Closed JanSellner closed 4 years ago

JanSellner commented 4 years ago

Unfortunately, the sliders in the article do not work anymore and there are many reference errors when loading the page (ReferenceError: map is not defined). Since the article loads the general template.v2.js file, I guess that there is some version mismatch of d3.js between the recent version from the template file and the version used to write the article.

I don't have a solution but as a hacky workaround, it is possible to generate new sliders with the following code snippet (open the developer tools and paste it into the console window):

document.querySelectorAll('d-slider').forEach(function(slider) {
    var input = document.createElement('input');
    input.type = 'range';
    input.min = slider.min;
    input.max = slider.max;
    input.step = slider.step;
    input.value = slider.value;

    input.addEventListener('input', function() {
      var component = slider._svelte.component;
      var each_block_value_1 = slider._svelte.each_block_value_1,
              config_var_index = slider._svelte.config_var_index,
              config_var = each_block_value_1[config_var_index];
      component.setDeep('var_values.' + config_var.name, this.value - 1);
    });

    slider.parentNode.appendChild(input);
});
ludwigschubert commented 4 years ago

Thanks for reporting this, that's a truly unfortunate way for code to fail!

ludwigschubert commented 4 years ago

Should be fixed now, thank you for reporting!