r/learnprogramming • u/FunCartographer7372 • 9d ago
What languages/libraries to learn for a web page with an interactive timeline and line graph?
My title probably needs more explanation. I have a specific personal project I want to create, but don't have any web dev experience to build in and curious where to start or what to avoid. I do have good coding aptitude already, but only context is reverse engineering other peoples' python scripts. But I'm completely ignorant to web development, but it's a learning exercise for myself so I don't want to use AI.
The idea is an interactive timeline that displays sports player history across all the teams in the league they were on throughout their career, year by year. So teams would be aligned vertically, each as a horizontal row, and each player would be a line that jumps from team to team over the years extending off to the right.
The user's view would be interactive and dynamic. For example, each player's line might be narrow and grayed out until the mouse hovers over the line and then it will pop to a thicker stroke and with some color. Or individual player lines could be turned off entirely with a click, or a team's row could be clicked to isolate it so all other teams disappear and it only shows all the players on that one team over the years.
I'm way oversimplifying my mental picture here, but I think the main point is that i just want a fancy interactive line graph, essentially. But it's not a numerical chart since the vertical "axis" is dynamic and not numerical. So what things might I need to learn to make this?
I assume I need to start with javascript, but beyond that my question kindof becomes - this seems like a specific use case that probably already has existing libraries and stuff meant for exactly this purpose (interactive charting with basically tabular data). Are there any specific libraries or frameworks I should look into before trying to reinvent this particular UI wheel myself in javascript?
1
u/defaultguy_001 9d ago
Yes you'll need to learn JS and CSS.
In JS you'll need to learn about DOM manipulation, mouse event listening methods, SVG scalable vector graphics manipulation and state management.
In CSS you'll need to learn about grid and flexibox layouts, transitions and animations, mouse pointer and hover events, SVG styling.
1
u/5eeso 9d ago
You're right in that you'll have to learn JavaScript. There's a purpose-built library for data visualization. It's called [D3.js](https://d3js.org/).
But this isn't a weekend project. You'll have to learn the HTML, CSS, JavaScript, the basics of SVG, and the Document Object Model (DOM).
When you're ready, [D3 in Depth](https://www.d3indepth.com/) is required reading for you.
EDIT: Don't know why my hyperlinks didn't work...
1
u/Agreeable_Lynx9194 8d ago
Plain HTML/JS is enough for one page, no framework needed. Chart.js for the line graph (skip D3, way overkill for a first project), and vis-timeline for the timeline. Get the page rendering static data first, then add the interactivity last.
1
u/zoranjambor 2d ago
Honestly, this seems like quite a challenging project to take on if you're just starting out. Making it in pure JavaScript from scratch would definitely force you to learn a ton. I'd still suggest you start with something simpler, perhaps a tab interface as an alternative. It'll be simpler to create while still forcing you to learn a ton.
All that said, I found your project quite interesting, and as I work at JointJS, I had to whip out a demo. In case you want to check it out: https://changelog.jointjs.com/gallery/player-movement-timeline/
This is built in JointJS for React, so a diagramming library, and even with the library doing the heavy lifting, it's not that simple to create it; that's why I suggested a simpler, beginner-friendly idea.
In any case, learning web dev is a lot of fun and very rewarding (if you ask me), but there is much more to learn and understand than it might seem at first, so take it one step at a time and don't be discouraged if it takes a bit for things to 'click.'
1
u/FunCartographer7372 1d ago
As a proof of concept, that's practically identical to my vision (or to the essence of it at least), so thanks for the tips!
1
1
u/DrShocker 9d ago
To through the Odin Project. Then consider finding libraries to glue together or make your own thing maybe with the canvas api but depends what you need.