Fork of Waseem's Rank on HackerRank

100%

Fork of Waseem's Rank on HackerRank

✓ Published0🌍 Public

Last edited Jan 27, 2021

Created on Jan 27, 2021

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.

AI-generated description

A visualization for tracking progress on HackerRank. Based on Waseem Medhat's data viz.

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

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

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

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

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

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

71% match

Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

This visualization displays a horizontal bar chart comparing student marks, using a dataset loaded from a CSV file and limited to the first 10 students. The chart renders as an SVG, with blue bars representing each student’s score on a linear scale, while a band scale positions the student names on the y-axis. The code combines React hooks for state management and data loading with D3 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` to compute scales and render tick marks and rectangles.

Kkirangithub23

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

69% match