D

diwashhumagain@my.unt.edu

@Diwash95·17 public vizzes

Loading thumbnail…

Fork of Fork of US Economic indicators

This interactive dashboard explores US economic indicators across four linked pages: a choropleth map of state GDP, a multi-line chart of income trends, a small-multiple dashboard of related metrics, and an animated scatterplot with a trailing dot effect. Navigation buttons toggle between pages, with charts rendered lazily on first view. The visualization uses d3.v7 with d3.geoPath for the TopoJSON state map, d3.csv for loading economic datasets, and d3.scaleQuantize for choropleth coloring, all drawn as SVG with shared tooltips and interactive hover states.

Loading thumbnail…

Fork of US Economic indicators

This interactive dashboard visualizes U.S. economic indicators, including GDP, income, and inflation, through a four-page interface with navigation buttons. It features a choropleth map of states with a slider for temporal changes, a multi-line chart comparing economic trends, a dashboard with small multiples, and a scatterplot with a slider and trailing dots. Built with D3 v7 and TopoJSON, it renders SVG elements and uses shared tooltips, color legends, and quantized color scales to convey data across all pages.

Loading thumbnail…

US Economic indicators

This interactive dashboard presents four coordinated views of US economic indicators, including a choropleth map of GDP by state, a multi-line chart of personal income trends, a dashboard of small multiples, and a scatterplot with a time slider. Built with D3 v7 and TopoJSON, the application layers multiple visualizations from CSV datasets covering GDP, income, inflation, and a final combined dataset. Users navigate between pages via buttons, with each view rendered as SVG and featuring interactive tooltips, hover effects, and legend controls.

Loading thumbnail…

ICE8 NETWORK plot

A network diagram visualizes family relationships across generations, with colored nodes representing people and links connecting parents to children. The graph uses D3 v7 and an SVG renderer, loading data from a CSV file, and applies a force-directed layout driven by `d3.forceSimulation` with link, charge, center, and collide forces. Nodes are draggable via `d3.drag`, and hovering displays a tooltip showing each person’s name and generation number.

Loading thumbnail…

ICE8 Family Tree

This chart displays a third-generation family tree from a GitHub-hosted CSV dataset. D3 v7’s `d3.stratify` converts the flat data into a hierarchy, while `d3.tree` calculates the layout for the SVG rendering. Node circles are color-coded by generation depth using `d3.scaleOrdinal`, with parents connected to children via `d3.linkVertical` curves. A tooltip appears on mouse movement to show additional details for each family member.

Loading thumbnail…

Ice 8 Map

This choropleth map displays average state income for 2024, coloring states in red shades and labeling the top five earners. The visualization uses d3.geoPath with a geoAlbersUsa projection to render state boundaries from TopoJSON. Income data loads from a CSV and maps to state names via d3.csv, with a tooltip revealing values on hover. The map includes an animated fade-in on hover and a centered color legend indicating income ranges.

Loading thumbnail…

Line Chart ICE 7

A line chart depicts the Consumer Price Index (CPI) trend over time, plotting annual values from a CSV dataset. D3.js scales map years to the x-axis and CPI values to the y-axis, with a `d3.line()` generator constructing the path. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, with rotated axis labels. Data loading uses `d3.csv` with row parsing to convert strings to numbers, while the chart fills the viewport and applies the Share Tech font.

Loading thumbnail…

Pie Chart ICE 7

A pie chart visualizes proportional data from a local CSV file, with categories like Housing, Food, and Transport displayed as colored slices with percentage labels. The chart uses d3.pie() to convert values into angles and d3.arc() for generating slice shapes and positioning external labels. A legend in the top-left corner identifies each category with a color swatch. The SVG rendering uses d3.scaleOrdinal with schemeCategory10 for colors, and text styling applies the Share Tech font via CSS.

Loading thumbnail…

Reusable D3 Scatter Plot ice 7

An interactive scatter plot visualizes the relationship between GDP and M2 Money Supply for a dataset loaded from a CSV file. The chart uses a reusable function pattern, defined in `scatterPlot.js`, which is configured through getter and setter methods. The visualization is rendered as an SVG using D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The data is parsed to remove commas from numerical values. The plot displays steelblue circles with axes and labels, using the 'Share Tech' font.

Loading thumbnail…

Area Chart ICE 7

This area chart visualizes the Consumer Price Index (CPI) over time, using a semi-transparent steel blue fill to emphasize trends. The chart is generated with D3.js, employing `d3.area` to build the shape, `d3.scaleLinear` for the axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Data is loaded from a CSV via `d3.csv`. The SVG rendering fills the entire viewport, and axis labels use the 'Share Tech' font.

Loading thumbnail…

ICE 6 Multi series Chart

This example uses D3 v5 APIs within a React component to render a multi-series chart combining bars and a line. D3’s `csv` loader, `scaleBand`, `scaleLinear`, `line`, and `curveMonotoneX` construct the visualization, which plots M2 Money Supply as bars and GDP as a line over time. The data comes from a remote CSV file, and the SVG rendering includes interactive features, tooltips, and hover effects with drop shadows. Axis ticks and labels are built via custom React components using D3 scales.

Loading thumbnail…

ICE 6 Scatter Plot Chart

This interactive scatter plot visualizes the relationship between the U.S. Federal Funds Rate and the U.S. Inflation Rate over time, with each point representing a yearly observation. The chart uses React state to manage a custom tooltip that displays the year, rate type, and value when a user hovers over an individual point. The visualization is rendered as an SVG using D3 v5’s `scaleLinear`, `extent`, and `min`/`max` functions for mapping data to coordinates. The data originates from a remote CSV file, processed with D3’s `csv` parser to filter incomplete records before plotting.

Loading thumbnail…

ICE 6 Bar Chart

This bar chart visualizes the growth of the U.S. M2 money supply in billions of dollars over time, using a horizontal bar layout where each bar represents a year. The React-based example loads CSV data via `d3.csv` and employs `scaleBand` and `scaleLinear` from D3 v5 to position bars and axes, rendering everything as SVG. It features custom gridlines, formatted tick labels, and rounded bars with hover effects and drop shadows, all styled through CSS to create a clean, modern presentation.

Loading thumbnail…

Ice 6 Bar chart: US Inflation

This combined bar and line chart displays the total runs scored and batting average for fifteen selected Indian cricketers, highlighting individual performance metrics. The visualization uses D3.js (v7) to render steelblue bars for runs on a left axis and a crimson line with points for averages on a right axis, with hover tooltips providing precise values. Gridlines are customized using `d3.axisLeft` with negative tick sizes, and axis labels are rotated via SVG text transforms. Data is loaded from a local CSV file using `d3.csv`.

Loading thumbnail…

ICE 6 Bar chart of US Economic indicators

This bar chart displays economic indicators for the United States, using a horizontal layout where each category is represented by a teal bar scaled to its quantitative value. Built with React and D3, the visualization loads CSV data from a GitHub gist and renders it as an SVG. The code leverages D3's `csv` parser, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis, with custom tick marks and labels drawn for both axes. The chart includes a title and axis labels, showing up to ten data entries.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example demonstrates how to load a CSV file with D3 and display its contents in an interactive, styled HTML table. It reads remote CSV data using `d3.csv`, calculates approximate file size, row count, and column count, then renders a preview of the first five rows. The table features sticky headers, zebra striping, hover highlights, and right-aligned numeric columns, all styled via CSS. The code uses D3's selection and data-join methods (`selectAll`, `data`, `join`) to build the table structure dynamically.

Loading thumbnail…

Fork of Smiley Face Part v

This example displays a yellow smiley face in SVG, with black-outlined circular eyes, a smiling mouth arc, and a black stroke, all centered and scaled to the browser window. Built with React and D3 v7, it uses the `d3.arc()` API to generate the mouth’s path, with geometric values like `eyeOffsetX`, `eyeOffsetY`, and `mouthRadius` defining the face’s proportions. The face is rendered reactively using `window.innerWidth` and `window.innerHeight` for full-window sizing, with all elements positioned inside a `g` transform.