SiddharthMittal07

@SiddharthMittal07·15 public vizzes

D3: GeoEarth

This interactive chloropleth map visualizes global deaths from brain and central nervous system cancer in 2019, using a yellow-to-red sequential color scale via `d3.scaleSequential` and `d3.interpolateYlOrRd`. A `d3.geoNaturalEarth1` projection renders country boundaries from the World Atlas TopoJSON, with each country’s fill determined by matching ISO country codes from a CSV to cancer mortality data. Users hover over a country to display its name and total deaths in a floating tooltip, while a legend shows the color scale range. The visualization uses React for state management, `d3.geoPath` for drawing, and `topojson.feature` for geographic data processing.

Mar 24, 2022

Loading thumbnail…

D3: GeoEarth

This example displays a world map colored by deaths from brain and central nervous system cancer for the year 2019, using a yellow-orange-red sequential color scale. It leverages d3.geoPath with a d3.geoNaturalEarth1 projection to render country boundaries from the World Atlas TopoJSON. The choropleth maps data from a CSV joined to country codes via ISO-3166 codes, with colors scaled by d3.scaleSequential using d3.interpolateYlOrRd.

Mar 24, 2022

Loading thumbnail…

Major Project

This interactive bar chart compares machine learning algorithms across multiple performance metrics, including accuracy, time, precision, and recall. Users can switch the y-axis attribute via a dropdown menu, and hovering over a bar displays a tooltip with all metric values for that algorithm. The visualization uses React for the UI, D3 v7’s `scaleBand` and `scaleLinear` for axes, SVG rects for bars, and a custom HTML tooltip. Data is loaded from a JSON file via `d3.json`, with animated bar height transitions via `animate`.

Mar 23, 2022

Loading thumbnail…

fcc-d3-01

A heatmap visualizes monthly global land-surface temperature variations from 1753 to 2015, with the base temperature displayed as a subtitle. Each cell represents a month-year pair, colored by year and opacity scaled by temperature deviation. The visualization uses d3.json to load data from a freeCodeCamp repository, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand for scales. SVG rendering includes custom axes, ticks, and a hover tooltip that displays the exact year, month, and temperature values.

Mar 8, 2022

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

Mar 8, 2022

Loading thumbnail…

D3 bar

This example displays a horizontal bar chart of the top ten countries by 2020 population from a UN dataset. The bars animate their width over one second using SVG's `<animate>` element. The visualization uses React to manage state and D3 v7 functions like `scaleLinear`, `scaleBand`, `max`, and `csv` to fetch and scale the data, rendering tick marks, labels, and bars as SVG elements.

Mar 8, 2022

Loading thumbnail…

fcc-d3-02

This example visualizes doping allegations among the 35 fastest recorded times up Alpe d’Huez, plotting each cyclist’s year against their finishing time. Blue and red dots distinguish riders without and with doping allegations, with a legend and axis labels. The interactive tooltip reveals the rider’s name, nationality, year, time, and doping details on hover. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal`, and `extent` to map data from a freeCodeCamp JSON source, rendering SVG circles and handling mouse events via `select` and `append`.

Mar 7, 2022

Loading thumbnail…

Scatter Plot Decision Boundaries

The scatter plot displays the Iris dataset, mapping sepal length against sepal width with points colored by species. Three semi-transparent, colored regions overlay the plot, visually representing approximate decision boundaries that partition the feature space by species. The visualization uses D3’s `scaleLinear` and `scaleOrdinal` for coordinate and color mapping, and renders the regions as SVG paths built from manually defined coordinate arrays via `d3.line()`. Points are drawn as circles with 0.6 opacity, and the plot includes tick marks and axis lines generated through D3’s tick API.

Mar 5, 2022

Loading thumbnail…

FCC - 25+5 Clock

This example shows a 25+5 Pomodoro timer with adjustable break and session lengths, a countdown display, and start/stop/reset controls. The React component manages state for session and break values, while a `setInterval` animation updates the displayed time every second and triggers an audio beep when a countdown reaches zero. The interface uses React hooks for state and renders through `ReactDOM` with inline styling. The timer’s display color shifts to red when less than a minute remains, and user adjustments are disabled while the timer is running.

Feb 24, 2022

Loading thumbnail…

fcc-d3-04

A choropleth map of U.S. county education levels, rendered as SVG paths with an Albers USA projection, displays a visual distribution of data across the country. The React app loads county boundary TopoJSON and education statistics via `d3.json`, then uses `d3.geoPath` with `geoAlbersUsa()` to project each county boundary. While the code defines the map’s layout and data fetching, the actual color encoding for each county’s education value is not implemented, leaving the map uncolored. The visualization depends on React state to coordinate asynchronous loading of both datasets before rendering.

Feb 22, 2022

Loading thumbnail…

fcc-d3-01

A bar chart visualizes the quarterly United States GDP data from a freeCodeCamp dataset. The chart uses D3.v7 scales and SVG rendering within a React component to map dates and GDP values onto axes. Each bar is colored cadet blue and turns white on hover, while a tooltip displays the specific quarter and GDP value. The visualization includes axis labels and tick marks for both the time-based x-axis and the linear y-axis.

Feb 22, 2022

Loading thumbnail…

fcc-d3-03

This example visualizes monthly global land-surface temperature anomalies from 1753 to 2015, using a heatmap of red rectangles over an SVG. It relies on React and D3 v7 (via `json`, `scaleLinear`, and `scaleBand`) to render axes, tooltips, and color opacity based on temperature variance. The data comes from the freeCodeCamp global-temperature JSON file. Hovering over a bar displays the year, month, actual temperature, and variance using a positioned tooltip.

Feb 22, 2022

Loading thumbnail…

Interactive Menus Scatter Plots

This interactive scatter plot displays the Iris flower dataset, plotting measurements of sepal and petal dimensions for three species. Users select which measurement appears on each axis via dropdown menus, with the chart and axis labels updating accordingly. The visualization uses React with D3 v7, employing d3.scaleLinear for the x and y axes, d3.scaleOrdinal for species color coding, and d3.csv for data loading. The SVG rendering includes custom axis components and a color legend for species identification.

Feb 21, 2022

Loading thumbnail…

tempBarChart

This example shows a horizontal bar chart of the ten most populous countries, using a React component that loads data from a CSV via `d3.csv`, scales population values with `d3.scaleLinear`, and positions country labels with `d3.scaleBand`. The SVG rendering includes axis components built with `d3` tick marks and text, while each bar is a `rect` element with a `title` tooltip that formats population figures using `d3.format`. Styling is applied via CSS classes for ticks and marks.

Feb 20, 2022

Loading thumbnail…

D3 Bar Chart

This example shows a horizontal bar chart of the ten most populous countries for 2020, based on UN population data loaded from a CSV file. Each bar's length represents the population value, with country names mapped along the vertical axis. The visualization is built with React and D3 v7, using `d3.csv` for data loading, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the categorical y-axis. Bars are rendered as SVG `<rect>` elements within a React component, with dimensions computed from the scales.

Feb 20, 2022