Nelly-ux10

@Nelly-ux10·5 public vizzes

Fork of Affection Type Unknown Map

This map of China displays the number of unknown-affection cases per province, with red circles sized proportionally to the count and provinces colored by category. The visualization uses a Mercator projection with `d3.geoPath` to render province boundaries, and `d3.scaleSqrt` to map case counts to circle radii via `d3.geoCentroid`. A legend, generated by a custom `sizeLengend` function, explains the circle sizes, while data comes from a CSV file merged with TopoJSON-provided province geometries. The map also supports hover highlighting through CSS, and code loads data asynchronously using `Promise.all` with `d3.csv` and `d3.json`.

Mar 16, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using 2019 United Nations population data, with a horizontal layout and stylized teal bars on a Poppins-font interface. Built with React and D3 v5, it uses `scaleBand` for the country axis, `scaleLinear` for population, and SVG `rect` elements for marks. The axes are rendered through custom `AxisBottom` and `AxisLeft` components with D3’s tick formatting, converting billions to abbreviated labels. Hovering reveals exact population values via native SVG `title` tooltips.

Jan 29, 2021

Loading thumbnail…

Fork of Coronavirus Impact Area Chart by Dimanjan

This animated area chart visualizes the progression of COVID-19 confirmed cases, deaths, and recoveries over time. Data is loaded from a CSV file and rendered as three overlapping gradient-filled areas, with yellow, red, and green representing each metric. The visualization uses d3.v4 to build SVG paths with `d3.area()` and animates the chart incrementally as new data points are added via `setTimeout`. Axes update smoothly with transitions, and a button triggers a full update of the dataset. The example forks the original by Dimanjan and adapts its styling.

Jan 24, 2021

Loading thumbnail…

Fork of Coronavirus Line Chart

A line chart displays global cumulative COVID-19 deaths over time using a log-scaled y-axis to accommodate exponential growth. The visualization marks the 10,000-death threshold with a tomato-colored reference line. Data comes from the CSSEGISandData COVID-19 time-series dataset, loaded via `d3.csv` and transformed with reactive React state. React components render the SVG, while D3 v6 functions `scaleTime`, `scaleLog`, `line`, `axisBottom`, and `axisLeft` generate the axes, path, and gridlines.

Jan 24, 2021

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.

Jan 24, 2021