Fork of Waseem's Rank on HackerRank

100%

Fork of Waseem's Rank on HackerRank

✓ Published0🌍 Public

Last edited Sep 20, 2021

Created on Sep 20, 2021

A step chart tracks a HackerRank user's JavaScript problem-solving ranking (from ~969K to ~129K) over time, showing steady improvement with a step-after curve and interactive hover tooltips. Built with React and D3 v6, it uses `scaleTime` for dates, `scaleLog` for ranks, and SVG rendering. The chart includes axis ticks, data points as circles, and a vertical hover line that snaps to the nearest date, displaying the exact rank and date.

AI-generated description

A visualization that tracks my ranking as I solve JavaScript algorithm problems on HackerRank... Just for fun!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Waseem's Rank on HackerRank

This visualization tracks the author's rank on HackerRank as they solve JavaScript algorithm problems, displaying rank values on a logarithmic scale against time. The chart uses a step-after line and circular points to show rank progression from November 2020 to February 2021, with hover interactions revealing a vertical reference line and detailed date/rank labels. Built with React and D3 v6, it employs `scaleTime` and `scaleLog` for axes, `curveStepAfter` for the line, and SVG rendering for output.

Ssumit

93% match

Loading thumbnail…

Fork of Waseem's Rank on HackerRank

Fork of Waseem's Rank on HackerRank displays the author's global rank progression on HackerRank as a step chart, with date on the x-axis and rank on a logarithmic y-axis. Built with React and D3 v6, it uses SVG for rendering, with a tooltip that snaps to data points on mouse movement, showing the date and rank. The data comes from a hardcoded JavaScript array of 48 date-rank pairs from November 2020 to January 2021, plotted using d3.scaleTime and d3.scaleLog scales, with d3.line generating the path.

KKirsten Lund

93% match

Loading thumbnail…

Fork of Waseem's Rank on HackerRank

This visualization tracks Waseem’s ranking on HackerRank as he solves JavaScript algorithm problems, showing a steady climb from roughly 969,000 to 129,000 over several months. The line chart uses a step-after curve and a logarithmic y-axis to emphasize proportional improvements, with hover interactions snapping to date points and displaying exact rank and date. Built with React, D3 v6’s `scaleTime`, `scaleLog`, and `line` generators render SVG elements, while a custom tooltip component updates on mouse movement. Data comes from a static array of date-rank pairs.

DDasbach.EJ

92% match

Loading thumbnail…

Fork of My Rank on HackerRank

This visualization tracks the author’s HackerRank ranking over time as they solve JavaScript algorithm problems, showing a steady improvement from around 969,000 to 137,000. The line chart uses a step-after curve to emphasize discrete progress, with a logarithmic y-scale and tooltips that display exact ranks on hover. Built with React and D3 v6, it uses scaleTime, scaleLog, and extent for scaling, while axis components generate ticks and gridlines. The interactive tooltip responds to mouse movement by snapping to the nearest data point.

NNelly-ux10

87% match

Loading thumbnail…

Waseem's Rank on HackerRank

This visualization tracks Waseem's rank on HackerRank’s JavaScript problem-solving leaderboard from November 2020 to February 2021. A step-after line chart shows rank improving from approximately 969,000 to 129,000 using a logarithmic y-scale. The React app uses d3.scaleTime and d3.scaleLog for axes, with mouse movement snapping to data points via xScale.invert. SVG rendering includes custom axis components, hover tooltips displaying formatted dates and ranks, and Tippy-based point interactions.

WWaseem Medhat

86% match

Loading thumbnail…

Fork of Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of student marks, ranking the top 10 students by their scores. The visualization uses React hooks (`useState`, `useEffect`) to load CSV data via `d3.csv`, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are drawn manually using mapped tick values rather than D3 axis generators, with React creating the SVG elements. The chart updates reactively as data loads, displaying a loading message until the CSV arrives from the GitHub gist URL.

RRahulSai05

70% match

Loading thumbnail…

Fork of SVG Fundametal

This visualization shows a time series of page load performance metrics, displaying percentile bands (5–95% and 25–75%) as shaded areas alongside a bold median line. Animated circular markers highlight specific events—client releases and server versions—that slide upward from the chart’s baseline. Built with React and D3.js, the code uses `d3.svg.area()` and `d3.svg.line()` with basis interpolation to render smooth paths, while `transition()` animates marker positions. The data is loaded from JSON files containing daily percentile values and event annotations.

Mmotobernix@gmail.com

70% match

Loading thumbnail…

Fork of Fork of HTML Starter

An interactive line chart displays a time series with a circular marker tracking the latest data point. The visualization uses D3 v5 to render an SVG path from sample data, with axes and labels generated via D3 scales. A dropdown menu likely filters the displayed series, though the selection logic resides in the bundled React component. The chart updates dynamically, highlighting the most recent value with a labeled circle. The implementation combines D3’s selection, scale, and axis APIs within a React framework, styling the output through external CSS.

NNandini Maddula

69% match