What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Part II of Dmitry Zhukov’s timeline-portfolio tutorial turns dated projects and commitments into a visual map: it assigns events to lanes, positions them by date, draws connectors, and animates layout changes when the screen resizes. It builds on the data and foundation from Part I; the key design choice is to let React render the interface while D3 handles visualization calculations.
How React and D3 divide the work
In this project, React owns the rendered interface and D3 supplies the visualization math. That keeps the map component concerned with displaying state while the timeline engine calculates dates, positions, lanes, and paths. React describes itself as a library for web and native user interfaces built from components; D3 describes itself as a JavaScript library for bespoke data visualization, with scales, shapes, interactions, and layouts among its capabilities. See React and D3.
As an Amazon Associate I earn from qualifying purchases.
This is one documented architecture, not evidence that the division is universally best. It is useful when you want React’s component-based interface and D3’s purpose-built visualization calculations without handing D3 ownership of the rendered interface.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11How timeline events are placed without collisions
The tutorial uses a greedy, interval-aware lane assignment. For each node, the algorithm checks existing lanes to see whether there is enough horizontal time gap before the node begins. It places the node in a lane that fits; if none does, it creates another lane. As the author puts it, “we’re going to use a greedy approach in practice.”
#1 Best Overall
Choose a side, then a lane
The layout can try a node’s preferred side first. If no preference settles the placement, it starts on the side with fewer lanes. This offers a straightforward way to distribute events while avoiding overlap, though a greedy choice is local: it does not establish that the resulting layout uses the fewest possible lanes in every case.
Convert date ranges to positions
Once assigned, a node’s date range becomes start and end positions along the timeline. Its lane and side determine its vertical offset from the baseline. In the coordinate system used by the tutorial, upward movement is negative and downward movement is positive. That convention matters when calculating offsets and drawing SVG elements.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use different connectors for projects and commitments
The visual model distinguishes one-time projects from commitments that span a period, including ongoing commitments. Project nodes use a straight stem. A duration-based commitment can use a bridge or a continuous arc to show that it occupies an interval rather than a single moment. Part II implements connectors as SVG paths and styles them according to node type.
This distinction helps readers interpret the map at a glance: the event’s dates determine its span, while the connector treatment reinforces whether it is a milestone or a continuing commitment.
Rank #3
Make cards readable and consistent
Cards share a width set from a common constant, and the tutorial displays formatted dates within them. A shared width gives the layout a consistent sizing input instead of scattering card measurements across the implementation. The article also discusses passing card width through a CSS custom property, which can connect the calculated layout to styling.
Card width is not merely cosmetic: it affects how much horizontal clearance a lane needs between nodes. Keep the sizing value used by the layout in step with the width presented by CSS, or the collision calculation and visible cards can disagree.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Animate resize changes and clean up
A timeline’s positions depend on available width, so resizing the screen can require a new layout. Part II transitions from the old positions to the new ones rather than abruptly replacing them. The engine also cancels a pending animation frame when it is destroyed or unmounted, preventing scheduled animation work from outliving the component that owns it.
Together, recalculation, transition, and cleanup address distinct concerns: adapt the map to the new dimensions, make the change legible, and stop outstanding work when the visualization is removed.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What this approach is—and is not
The tutorial, dated September 24, 2026, presents a specific implementation for an interactive portfolio map. Its central techniques are greedy lane placement, interval-based positioning, type-specific connectors, consistent card sizing, and animated resize handling. It does not establish through benchmarks that this algorithm or architecture is superior to alternatives; choose it when those trade-offs fit the data and visual behavior you need.
For version context, React’s official homepage showed version 19.3 and a September 9, 2026 news item, while D3’s homepage showed version 7.9.0. Those labels may change, so check the official sites when matching a project to current versions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
