Using React (Hooks) with D3 – [13] Filtering Visually (with Brushes, Part I)

Показать описание

Code:

Website:

Hope you like it!

Рекомендации по теме

Комментарии

Hi Muri. I have watched all your videos from this React + D3.js playlist and I am currently coding along. I just needed to give you a big thank you for your amazing work and dedication. It helped me a lot. I am also a Front-end developer with a Design background, who found your videos super-useful. Please, continue your amazing work. Cheers! 👊

GoncaloGuitarist

Great video, helped me understand how brush works easily. Thanks mate.

hewang

I’ve seen them all and I’ve to say thank you very much for those great videos!! An extra video on advanced histogram will be great to know how to handle negatives values and also learning how to do histogram with rounded corners instead of rectangles would be awesome!

thibautlevesque

great content man, just what i needed

mllfll

Hi muri, I'm finding it difficult to wrap my head around the solution you have suggested to stop the infinite loop. From what I understand, we only want that block of code to be run once at the beginning, but the conditional statement is for if previousSelection is the same as selection, wouldn't this still cause the on 'start brush end' events to be triggered, thus setSelection to be called and the component to be re-rendered again? How does the if statement stop this loop?

Also in our .on(), the callback function where we are using setSelection(indexSelection), I tried to console log both selection and indexSelection to see if selection had been set to indexSelection but selection still shows as [0, 1.5] no matter how much we move the selection brush. This suggests setSelection isn't working but then it seems to be working when we use selection to differentiate the way our circles are rendered and when we display the values of the dots under the brush, how is this possible?

manajalali

Thank you so much for this video. But If possible, could you point me to the direction where I can find some example code about 2D brush on scatter plots? All the ones I found so far uses d3 v4 and 'selection', which d3 doesn't seem to support any more. Thank you again!

liujunyan

previousSelection is always NULL for me. explain???!!!!

dianadata

Using React (Hooks) with D3 – [13] Filtering Visually (with Brushes, Part I)

Using React (Hooks) with D3 – [01] The Basics

Using React (Hooks) with D3 – [Finale] 5 Things You Should Know

Using React (Hooks) with D3 – [05] Interactivity

Using React (Hooks) with D3 – [03] Axes and Scales

Using React (Hooks) with D3 – [13] Filtering Visually (with Brushes, Part I)

Using React (Hooks) with D3 – [Bonus] D3 v5 → v6 (New Event Handling)

Using React (Hooks) with D3 – [11] Physics-based Force Layout

Using React (Hooks) with D3 – [14] Filtering Visually (with Brushes, Part II)

Using React (Hooks) with D3 – [01] The Basics (Remastered)

Using React (Hooks) with D3 – [08] Breaking Bad Timeline

Using React (Hooks) with D3 – [09] Racing Bar Chart

Hooked on D3: Create Animated Ch(art)s with D3 and React Hooks - Monica Wojciechowska

D3 and React.js crash course using react hooks | Build a responsive line chart with d3.js

Using React (Hooks) with D3 – [16] Zoomable Line Chart

Using React (Hooks) with D3 – [06] Responsive Chart Components with ResizeObserver

Using React (Hooks) with D3 – [15+] Stacked Area Chart

Using React (Hooks) with D3 – [04] Animated Bar Chart

React Hooks for Dataviz

Simple D3 Line Chart in React | Hooks

Using React (Hooks) with D3 – [12] World Map with D3-geo

Using React (Hooks) with D3 – [15] Stacked Bar Chart

Nordic.js 2019 • Monica Wojciechowska - Hooked on D3: Creating Animated Ch(art)s with D3 and React

Loading CSV Data with React Hooks and D3

Using React (Hooks) with D3 – [10] Animated Tree Chart