Adding Tooltips to D3.js Line Charts (How To) - D3.js Beginner's Guide

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии •

  • @elenamikhaylova5086
    @elenamikhaylova5086 8 месяцев назад +2

    I love your chill tone

  • @jpneirac
    @jpneirac 8 месяцев назад +1

    Thank you so much! This was explained extremely well. While it can be a complex code, your way of explaining it facilitates a lot the understanding of it. Really useful 🙌

  • @KennyCarter90
    @KennyCarter90 9 месяцев назад +2

    Your videos were super helpful for me for a project I was working on for my job. Thank you for creating these!

  • @christian-schubert
    @christian-schubert Год назад +3

    Thanks for shedding light on D3, very clear and concise 👍
    Are you planning a video on tooltips that only show up when you actually hover over the graph itself? Would come in handy if you have a chart with multiple lines...
    Also, stylistic customization of tooltips?
    Gotta say, need to cobble together a pretty basic chart and haven't really looked into the documentation yet, that stuff most probably is pretty easy to implement.
    However, you've got such a chillaxed way of going about things that watching you explain it in a video would be deeply gratifying 😄

    • @datavizdad
      @datavizdad  Год назад +2

      These are great ideas, and would be fun to make into videos. I'm finishing up a series on area + line charts for visualizing things like stock prices, but, may do these next! Thank you for commenting! I'm glad you enjoy the videos!

    • @christian-schubert
      @christian-schubert Год назад

      @@datavizdad
      That's actually EXACTLY what I'm working on - linear visualisation of different stock prices in one chart where said customized tooltips on hover/ click could come in quite handy 😄
      I'm a bit of a lazy bum though and haven't even started reading up on D3.
      Keep up your teaching style 👍

  • @narivonyrandriamahazomanan9714
    @narivonyrandriamahazomanan9714 Год назад +1

    Thank you for this series. Very clear and simple to understand !

    • @datavizdad
      @datavizdad  Год назад

      Thank YOU for watching! Glad it was helpful.

  • @LeonardoRydin
    @LeonardoRydin Год назад +1

    Very nice intro to d3js line charts! Any chance you could have part 4 considering "real-time" plotting with, e.g., setInterval()?

    • @datavizdad
      @datavizdad  Год назад +2

      Thank you! I appreciate you commenting! That is a fantastic idea, and a great next step for this series.

  • @abdobouna
    @abdobouna Год назад

    Awesome tutorial series. Thank you so much!

    • @datavizdad
      @datavizdad  Год назад

      I'm very glad you enjoyed them!

  • @ifinatychal
    @ifinatychal Год назад +2

    Can you do a video on how to zoom in and out?

    • @datavizdad
      @datavizdad  Год назад

      This is a great video idea. I'll add it to my list of upcoming videos!

  • @AlexBurov-wk8my
    @AlexBurov-wk8my Год назад

    That s awesome. Thank you

  • @netsaosa4973
    @netsaosa4973 Год назад +1

    this is great, thank u

    • @datavizdad
      @datavizdad  Год назад

      Thank you for commenting! I'm so glad you found the video useful!

  • @juliajohansson9616
    @juliajohansson9616 Год назад +1

    Yes yes yes!!!

  • @caiozafa
    @caiozafa Год назад +1

    Hi there, thank you for your videos! In minute 3:39 when I log the "Xpos" between the reading of the pos of "x" I got position with error:
    "314app.js:109 1090
    732app.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'date')
    at SVGRectElement. (app.js:100:31)
    at SVGRectElement. (d3.v7.min.js:2:20668)"
    what could it be? the .csv its not same. heres is a sample:
    date,brl,usd
    2023-04-06,80.24,15.86
    2023-04-05,80.89,16
    2023-04-04,81.12,15.95
    2023-04-03,82.4,16.24
    2023-03-31,82.6,16.29
    2023-03-30,82.9,16.25
    2023-03-29,83.17,16.18
    2023-03-28,83.39,16.14
    2023-03-27,84,16.12

    • @datavizdad
      @datavizdad  Год назад +1

      I'm glad you've enjoyed the videos! I'll have a chance to experiment in a bit, but first thing I'd check is if the references to 'date' in this section of code are to 'd.date' and not just regular 'date'. Double check that and let me know!

    • @datavizdad
      @datavizdad  Год назад +1

      Also, if my other comment isn't the solution, please feel free to paste your listeningRect.on("mousemove", ... code here and I'll take a look

    • @caiozafa
      @caiozafa Год назад

      @@datavizdad Can we try something diferent? I have tried to finish this code several times including with gpt helping but something is missing. Now Im following your tutorial and realized where I got stuck. Minute 3:39 my browser doesent read the position like yours. tooltip got stuck and I dont know what else to do. Im also using VS with live server extension. I create this link to mydrive with the CSV file and your code until minute 3:39. Can you please, please point me the $##$%$#% error?
      link: drive.google.com/drive/folders/10WMpaDWoL8uwv59f5BccQxcX9OgoSiAx?usp=sharing

    • @datavizdad
      @datavizdad  Год назад +1

      @@caiozafa thanks for the link! I'll take a look!

    • @datavizdad
      @datavizdad  Год назад +1

      I don't see the app in the drive any longer, but I am able to replicate the issue locally. This will be a fun challenge. I'll comment again if I solve it!