Thanks. This is good. However I am getting stuck on the next step: When I am zoomed in, I want to modify a specific circles size. But then the circle gets all weird after the next zoom event. I haven’t figured that out yet. Ykwim?
Hi Curran, I was really impressed by your presentation from about three years ago, where you broke down a lengthy piece of code and refactored it into modules and functions, focusing on Separation of Concerns. It was fascinating! Could you create a new video where you expand on that topic? I'd also love to hear about any best practices you've picked up while developing apps. Thanks a lot!
I dont understand how the correlation between the x data and the y data work, because when we make seperate xValue and yValue variable, it shouldnt be something that gives a direct correlation. Im not understanding this well. and since the Data for the date is for every hour, why did D3 choose to showcase days as labels in the x Axis label? Thank you for the video again.
Hello there Curran. Been waiting for part 2 of this video. Please upload. I am your fan. Can't wait to learn about the bisectors ... how to move the line. Thanks in advance.
Hi Curran Thank you for all the videos and resources you have created and made available to all. They are great at understanding d3. I am a developer but have no experience in the frontend. I was wondering if you have a video just giving an overview of what is "state" is that your passing into the main method and how would you export a project that uses this from vizhub to a project using HTML, CSS & JS Again thank you for the work you have pu into these videos/tutorials
@@AlexisK558 Yes! The early videos in the Constructing Visualizations explain this. See also d3-rosetta in my GitHub, which has examples of how to define state in vanilla JS and also various frameworks. Thanks for asking!
Thanks! I'm glad you enjoyed it. Yeah this was totally unscripted. Real problem solving! I feel like that's great for learners too. I'm debating what sort of format to use for upcoming videos for data visualization course.
If you run the example it's not that laggy. I think it's just that the computer was recording AND running the globe so it slowed down. Like I said at the very end, performance could be improved by migrating from SVG to Canvas. It's probably just the slowness of SVG that's the root cause of the lag.
@@currankelleher yeah okay, idk why but whenever I see some lag I feel like the whole project is invalid since idk how to fix the lag itself lol. thank you for the project tho, very well coded.
HI Curran, thanks so much for all your d3js content, super helpful! I was wondering if you have done any content regarding transitions with d3js + react? For example in your scatter with menus, when the menu changes and the chart renders again.
Thanks for this idea! The way I would approach that is using useEffect and then let D3 do the DOM manipulation from there. This would be great for a video!
Yes! You can use the VizHub export feature, which will set up directories you can use locally with NPM workspaces. Once you have it locally, you can rename or reorganize the files so my name is not there. See github.com/vizhub-core/vite-export-template for an example of how to do this.
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?
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!
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.
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!
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!
@@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.
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. :/
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)),
