dasari234 (@dasari234), VizHub

Fork of D3 line chart: Daily temperature in Belgium for 2021

A single black line chart depicts daily average air temperature in Belgium throughout 2021, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3's `scaleTime` and `scaleLinear` for axes, and `line` with `curveNatural` for the smooth path, rendered as SVG within a React application. Data comes from a CSV file loaded via `d3.csv`, and the natural curve interpolation smooths the daily fluctuations into a continuous trend.

Mar 23, 2022

Loading thumbnail…

Fork of Keeling Curve

This visualization displays the Keeling Curve, tracking monthly average atmospheric CO₂ concentrations from NOAA’s Mauna Loa records between 1958 and 1967. The line chart shows a clear upward trend in carbon dioxide levels over time. Using D3 v7, the code employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `line` to map the data from a CSV file, with a black stroke path representing the average readings and gridlines drawn via tick marks.

Mar 3, 2022

Loading thumbnail…

Fork of Stylized Line Chart-00

This interactive visualization displays temperature readings over the course of a week in San Francisco, plotted as a smooth line chart using React and SVG. The chart filters the data to only show circular markers for temperatures at or above 25 degrees, with tooltips revealing the day of week for each point. Built with D3 v5, it uses <code>scaleTime</code> and <code>scaleLinear</code> for axes, <code>curveNatural</code> for the line path, and <code>csv</code> to load the dataset from a GitHub gist.

Feb 22, 2022

Loading thumbnail…

Fork of D3 line chart: Daily temperature in Belgium for 2021

A single black line chart depicts daily average air temperature in Belgium throughout 2021, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3's `scaleTime` and `scaleLinear` for axes, and `line` with `curveNatural` for the smooth path, rendered as SVG within a React application. Data comes from a CSV file loaded via `d3.csv`, and the natural curve interpolation smooths the daily fluctuations into a continuous trend.

Feb 22, 2022

Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes NOAA monthly climate summaries from 1946–2020 for two Bay Area stations (SFO and Oceanside). A dropdown menu lets users switch the y-axis between temperature attributes, while hovering over the ordinal color legend highlights one station's data points. Built with React, D3 v6 (scales, extent, timeFormat), and SVG rendering, the visualization uses ReactDropdown for selection, d3.csv for loading data, and mouse events on legend circles to toggle highlight opacity.

Nov 29, 2021

Loading thumbnail…

Fork of Treemap Demo

This interactive treemap displays a hierarchical company dataset with a CEO, three group leaders, and their employees. The visualization supports CRUD operations through buttons that update node values, add or remove employee nodes, and add or remove parent groups. Built with React and D3 v5, it uses `d3.hierarchy` and `d3.treemap` to compute layout, with SVG rectangles and text labels rendered, while `d3.transition` animates position and size changes over three seconds. Color and opacity scales encode group membership and node values.

Nov 25, 2021

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, respectively, while d3.line and d3.curveBasis generate smooth paths for each city's temperature trend. The chart includes axes with tick marks, a color legend, and a title, with the SVG rendered directly on the page.

Nov 25, 2021

Loading thumbnail…

Fork of Suicide Rates

A choropleth bubble map overlaid on a natural Earth projection displays global suicide counts by location, with circle size proportional to the number of suicides. A linked time-series histogram below shows monthly totals, and brushing a time range filters the map’s circles in real time. The visualization uses React, d3.geoPath for map rendering, d3.scaleSqrt for bubble sizing, and d3.brushX for interactive time filtering. Data combines World Cities coordinates with a Suicide Rates dataset processed through a Jupyter notebook.

Nov 3, 2021