Fork of My Rank on HackerRank

100%

Fork of My Rank on HackerRank

✓ Published0🌍 Public

Last edited Jan 24, 2021

Created on Jan 24, 2021

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.

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

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

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

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

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

78% 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 Fork of Cool graphics

This visualization gallery displays multiple D3.js v7 charts analyzing GitHub contributor data and crime statistics. The main visualization is a network graph showing author-repository collaboration patterns, with nodes positioned around a decorative Buddha path and animated meditation circles using SVG. The interconnected charts include bar charts for commit counts by author and repository, a stacked bar chart for missing children demographics, and various crime rate visualizations. The implementation uses D3's zoom behavior for panning/zooming, tooltips for hover details, and scaleOrdinal for color encoding across different datasets.

NNita

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