Curran Kelleher

Пікірлер

@johnadriandodge 10 күн бұрын

WOW!

@maartensnels3804 18 күн бұрын

This is what I was looking for ❤

@currankelleher 18 күн бұрын

Amazing! Happy to hear that. Anything else you are looking for?

@ianwright5919 18 күн бұрын

Thanks @currankelleher, clean and to the point video.

@currankelleher 18 күн бұрын

@@ianwright5919 Thanks!

@FreeComputerTutor 25 күн бұрын

Hi. I tried to run this with Visual Studio Code on my PC using Node.js, but nothing displays. Do you have any idea what I'm doing wrong?

@currankelleher 25 күн бұрын

See github.com/vizhub-core/vite-export-template

@irfanadamm5819 25 күн бұрын

any chance to have polyheirarchical structure

@currankelleher 25 күн бұрын

Then it becomes a graph data structure, and you can use different layout methods like Sugiyama layered graph drawing, or even force layout! Do you have specific data in mind?

@user-rm4yk3nf8j 26 күн бұрын

sir do we have to use any other way to plot the map using the json data ?

@currankelleher 26 күн бұрын

You can use JSON data for sure! It just needs to be transformed into a usable data structure that matches with points or areas on a map.

@BrettCooper4702 Ай бұрын

sad we could not see the changes, video is only updating one every 60 seconds

@donvictoro Ай бұрын

Thanks

@pascalvolk Ай бұрын

One would think that Multivariate Choropleth Maps are a pretty common use in gis lol However, it seems quite a complicated process for those who don't know how to code (or are not experienced). I was wondering if there was some type of qgis plugin or tool that simplifies the process to create a trivariate choropleth. p.d. Great example of maps by the way!

@sajadahmadi595 Ай бұрын

@idiosinkrazijske.rutine Ай бұрын

Haha nice job with the data!

@maitmetelitsa2908 Ай бұрын

thanks!

@miskaknapek Ай бұрын

thank for more good tutorial videos!

@nicolaspiper3437 Ай бұрын

first 😄

@user-ls5jz9nl3h Ай бұрын

what is the editor used?

@currankelleher Ай бұрын

VizHub

@hrtmtbrng5968 2 ай бұрын

I would pass state as an argument to render. The function should not just conquer the global variable without asking. Otherwise you have no benefit of all this exercise. You are still not in control of the state. When you pass the state to the render function, you would also not need hoisting, which in my opinion makes the code a bit unreadable. I would rename the global setState function to setStateAndRender but the function argument of viz not. That makes the two abstraction levels that you have more clear and visible.

@currankelleher Ай бұрын

Thanks for this feedback! I'm happy that you appreciate the ideas behind the patterns here.

@hrtmtbrng5968 2 ай бұрын

In my opinion this example is not so good. You blindly implement what you know from React without thinking if this is appropriate or not. This structure makes only sense when your event and your effect are far away from each others. You should choose this structure in order to reduce the sphaghetti-ness of the code, which pulls strings criss cross through your project. But in the example you don't have this. You create it. Your first solution even had the opposite of this. It is the principle of locality. You had the definition of the svg and right there you have defined the handler on it and right there you have defined the effect and right there you have the thing the effect is about. That is already perfect. And you also said, in this case it is not bad. But then the example is just bad for what you try to explain. I know, there are other good reasons why your solution is actually better, and I don't question this. But I don't think, persons who watch this video, actually understand them or that they learn the basic idea behind this. You just said at 5:13 "I would like to introduce a pattern here." For the audience it may look very uninspired. You just apply this pattern, because you learnt it from a text book or because this is how React does it. And now you pull it out of the hat and confront the audience with it. But anyway, the vidoe is very good! Thanks a lot!

@currankelleher Ай бұрын

This is great feedback, thank you so much! You are probably right that I introduce the pattern too early, before the need for it becomes clear. I think I need to follow the teaching principle of "Just in Time not Just In Case", because you're correct that the pattern does not provide any clear benefit with such a small example. Perhaps it's best to wait until the examples get more complex, with more "moving parts" regarding tracking state (such as with multiple linked views), and only then introduce this pattern, so that its benefits are more clear. I really appreciate your feedback here, thank you so much!

@sajadahmadi595 2 ай бұрын

❤❤❤

@sajadahmadi595 2 ай бұрын

❤❤❤

@sajadahmadi595 2 ай бұрын

❤❤❤

@sajadahmadi595 2 ай бұрын

❤❤❤

@kostraone 2 ай бұрын

Hi. Why would you do that over just using a regular select/options ?

@currankelleher 2 ай бұрын

What do you mean by regular?

@kostraone 2 ай бұрын

@@currankelleher HTML/CSS and DOM manipulation if needed.

@kostraone 2 ай бұрын

Okay 👍

@currankelleher Ай бұрын

@@kostraone The main reason I'm doing it this way is because I want to provide a path forward for my students to easily add menus to their existing data visualizations that use D3. I figured it's easier to add it this way, rather than hardcoding it as HTML (since many of the menus are data-driven), and also preferable to introducing an entire new framework like React into the mix.

@sajadahmadi595 2 ай бұрын

❤

@sajadahmadi595 2 ай бұрын

❤❤❤

@DeveloperZak 2 ай бұрын

This is wonderful! Thank you for sharing this!

@xzssyy 2 ай бұрын

Thanks!

@All-about-te 2 ай бұрын

🤍yes i liked it 👍

@9oroborus450 2 ай бұрын

Useful and satisfying to watch in action! Thanks!

@9oroborus450 2 ай бұрын

I try to replicate this example (not on vizhub, but in vanilla js). It turned out that my circles do not following the cursor as expected. After some investigation I realized that this behavior is related to my browser's zoom level. Although, I'm using the browser at 100%, for some reason the circles only follow the mouse correctly at 125% zoom. :/

@9oroborus450 2 ай бұрын

It seems that the root of my problem comes from the fact that I use linear scales and margins. This works for me, but probably not the most ideal solution... x: d.x + xScale.invert(margin.left + event.dx), y: d.y - (yScale.invert(0) - yScale.invert(event.dy)),

@p.cpradeep9535 3 ай бұрын

Thanks for the video.The code in github is not working. Getting blank page and bundle.js file is also missing

@currankelleher 3 ай бұрын

Did you run npm install and npm run build?

@miskaknapek 3 ай бұрын

thanks for the video. much more enjoyable than reading docs, thanks also very much to our excellent narration.

@currankelleher 3 ай бұрын

Thanks a ton! Any suggestions for topics to cover or ways to improve VizHub? Thanks!

@Selenium117 3 ай бұрын

I love your content man! A question, how do you make interactive plots with sliders or checkboxes? For example, suppose I wan to change the value of a parameter or change the range of a the plot in the x-, y- or z-axis?

@currankelleher 3 ай бұрын

That's a great idea! I could imagine adding a checkbox to toggle the current year highlight, as a simple demonstration. It can be done by storing that information in the state, then updating the chart when the state changes.

@shadfrigui 3 ай бұрын

This data also comes as a csv file under the "CSV format" tab (0:57). It has shorter colum names and is easy to work with without using a spreadsheet tool. Also, please add support to the Arquero library. It makes manipulating data way easier and straightforward. Thanks for the video and the series ☺️

@9oroborus450 3 ай бұрын

Hi curran great example! I just wonder why the new state is handled as a function, not a single object? thanks

@currankelleher 3 ай бұрын

Great question! It's to make sure we always get the latest version of the state. Passing in an object would work, but if the closure references an older version of the state, for example in an event handler or a timer function, that can lead to bugs that are difficult to find. So because of that I prefer to always use the safer pattern of passing a function.

@9oroborus450 3 ай бұрын

Thank you for the quick explanation! I get it now :)

@All-about-te 3 ай бұрын

wanna see more videos on this kind of patterns type topics ... your unidirectional data flow concept tutorial helped me a lot.. now this one as well your voice is very sweet tho 🙃

@currankelleher 3 ай бұрын

Thanks! I'm glad to hear you like it. I'm curious, why is the unidirectional data flow concept useful for you? Are you using it with any framework, or just standalone? I love it and I think it'a a great pattern, but sometimes I struggle to explain to folks what its benefits are. Thanks!

@All-about-te 3 ай бұрын

It's one of those concepts that can seem simple on the surface, but then you dive deeper and realize its true depth and effectiveness. I've definitely encountered situations where I initially struggled to grasp some seemingly basic yet powerful patterns like this, even though I see their value in most cases. One of my favorite things about learning is discovering how frameworks like React and Redux provide simplified code structures through tools like useState and useEffect. They make it easier to build things, but I'm also aware of the importance of understanding the underlying patterns to avoid pitfalls and truly level up my coding skills. So, whenever I find tutorials like yours that explain these patterns clearly, it's incredibly helpful! It deepens my understanding and empowers me to apply them confidently in my own projects. Thanks again mr.curran for sharing your knowledge! @@currankelleher

@Wh0NeedsFr1ends 3 ай бұрын

Sifu

@currankelleher 3 ай бұрын

🙏

@Wh0NeedsFr1ends 3 ай бұрын

This is a very important technique. Would you consider covering this within a react implementation?

@currankelleher 3 ай бұрын

This can be in a useEffect inside React as it is here. The state and setState are compatible with React's useState API.

@All-about-te 3 ай бұрын

Thanks a lot man .... talking about your viz editor and your thinking on how to make learning more optimized for a learner.. trust me ..this one makes u a complete different than other tutors for example in your viz web on the left side we can edit the code and on the top-right coordinate we can see the visual representation of the code and in below the learner can keep the eyes on the tutorial as well. in that way it will not only enhance the learning process but also helps the learner to keep the main focus on the context . i hope this series will be more structured and well detailed from the previous ones .

@KrishnaDasGodiyaVaishnav 3 ай бұрын

Thanks for 😊 best tutorial about d3.js bar chart! Have a nice and happy 😊 day!

@adekolaali5075 4 ай бұрын

Thank you❤

@currankelleher 3 ай бұрын

My pleasure! Thanks for watching! Do you have any feedback for VizHub? I welcome you to join our Discord and share your work there. Cheers!

@ngocdangduc3772 4 ай бұрын

Good guide but why are you using vim ? Please use another code editor for my sake

@adekolaali5075 4 ай бұрын

Thank you❤

@currankelleher 4 ай бұрын

My pleasure!

@natecoursey369 4 ай бұрын

AI assist is 🔥. Awesome feature!

@currankelleher 4 ай бұрын

Awwww yeah! I really believe it will help people move faster and get past technical roadblocks sooner. Cheers!

@maikarmahoon 4 ай бұрын

can you show how would you add tooltip in this particular viz ......

@currankelleher 4 ай бұрын

Great idea! Thank you for this suggestion. The first thing I'd set up is a Voronoi overlay, to catch the nearest point to the mouse. Then maybe a tooltip library like Popper or Tippy might be a good way to add the actual tooltip. Otherwise you can do DIY SVG tooltips, but those seem to always fall short. Cheers!

@adekolaali5075 4 ай бұрын

Thank you!

@adekolaali5075 4 ай бұрын

Thank you!

@currankelleher 4 ай бұрын

Join me right after in the VizHub Discord for a live chat

@currankelleher 4 ай бұрын

discord.gg/wbtJ7SCtYr

@old_gaffer 4 ай бұрын

@@currankelleher keep doing the awesome work man! you're an inspiration to many more people than you realize. your pitch is genuine. I'll talk to my corp to get us some team licenses (you should also consider adding this plan to your biz model) but also try targeting publishers - this is where I can see many data oriented journalists benefiting so much from your awesome product.

@javifontalva7752 4 ай бұрын

I can tell you have a lot of experience. I need to practice a lot to reach this level. Great vid!!

@MagdelineHuang 4 ай бұрын

Wow thanks so much for this video Curran! I'm just getting started learning d3.js and this was a really good explanation. Looking forward to more videos!

@biswajitrajaguru4013 4 ай бұрын

My Output : i.imgur.com/aweiTe2.jpg

Ең жақсы KZbin

Пікірлер