Skip to main content
SimilarExport ZIP
100%

Waseem's Rank on HackerRank

✓ Published5🌍 Public
WWaseem Medhat
Last edited Feb 10, 2021
Created on Dec 1, 2020
Forked from React Starter

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.

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 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
93% match
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
87% match
Loading thumbnail…

Fork of Waseem's Rank on HackerRank

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.

CCarolina Acosta Muñoz
86% 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
85% 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
78% match
Loading thumbnail…

WIP D3 Git History.viz

This animated visualization displays the history of commits to the D3.js repository, showing the number of commits per month stacked by repository. The data is loaded from a JSON file containing commit dates and repository names, then aggregated using d3.group and transformed with d3.stack to create stacked layers for each repo. The visualization is built with D3 v6 and React, using d3.timeParse to parse dates.

SSimmer999
61% match
Loading thumbnail…

WIP D3 Git History Viz

A stacked area chart visualizes the monthly commit counts across D3.js repositories over time. The visualization uses D3’s `scaleTime`, `scaleLinear`, and `area` generators to render SVG paths, while `group` and `stack` aggregate raw commit data by date and repository. Data loads from a remote JSON file of D3 Git history commits. The React framework is included in dependencies, though the rendering logic operates directly on the DOM via D3 selections.

CCurran Kelleher
60% match
Loading thumbnail…

Project Breakdown

This visualization displays a breakdown of time spent on tasks within a project, organized hierarchically by category, task, and item. Three horizontal bands of rectangles, colored by category via `d3.scaleOrdinal`, show cumulative durations positioned with `d3.scaleLinear`, while `d3.scaleBand` lays out the levels. Hovering reveals tooltips from `tippy.js`, and labels show approximate hours per category. The React-based SVG chart loads CSV data using `d3.csv` and aggregates it with `d3.groups`, `d3.sum`, and `d3.cumsum`.

WWaseem Medhat
60% match