Fork of Waseem's Rank on HackerRank

100%

Fork of Waseem's Rank on HackerRank

✓ Published0🌍 Public

Last edited May 15, 2021

Created on May 10, 2021

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.

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…

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

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

93% 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

92% 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

91% 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

86% match

Loading thumbnail…

Fork of Fork of WIP D3 Git History Viz

This visualization shows the commit history of D3.js as a stacked area chart, with each repository represented by a colored band that reveals commit volume over time. The code loads JSON data from a remote gist, aggregates commits by month and repository using D3’s `group` and `stack` functions, and renders the result as SVG paths via `d3.area`, `scaleTime`, and `scaleLinear`. Colors are assigned randomly per band, and the chart fills the browser window with no margins, using `extent` and `max` to determine scales.

DDaniel Nass

65% match

Loading thumbnail…

Fork of WIP D3 Git History Viz

This interactive visualization displays the commit history of the D3.js repository over time, revealing patterns of development activity across various sub-repositories. The chart aggregates commits by month and repository, then renders them as a stacked area chart filled with randomly assigned colors. The code utilizes D3's `group`, `stack`, `scaleTime`, `scaleLinear`, and `area` APIs to process and visualize JSON data fetched from a GitHub Gist. The React framework is declared in the package metadata, though rendering is performed directly via SVG manipulation using D3's `select` and `append` methods.

CCurran Kelleher

64% match

Loading thumbnail…

Fork of WIP D3 Git History Viz

This visualization shows monthly commit activity across D3.js repositories as a stacked area chart, with each repository represented as a colored layer that reveals how contribution patterns shift over time. The code aggregates raw commit data by month and repository using D3’s `timeParse`, `group`, and `stack` functions, then renders the result as SVG paths generated by `d3.area` and scaled with `scaleTime` and `scaleLinear`. Axes are drawn with `axisBottom`, `axisLeft`, and grid lines, while data loads from a GitHub Gist URL containing all D3 commits.

NNita

64% match