M

madalahyndavi123@gmail.com

@Hyndavi123·16 public vizzes

Loading thumbnail…

Fork of FZ_ICE8_Q2_FamilyTree

This example displays a four-generation family tree as a horizontal node-link diagram. It uses a hierarchical data structure with d3.hierarchy and the d3.tree layout to compute node positions, while d3.linkHorizontal generates the curved connector paths. Each generation is distinguished by shape and color—circles for the great grandparent, squares for grandparents, diamonds for parents, and triangles for children—with name labels positioned to the right of each node. The visualization is rendered as SVG using D3 v7.

Loading thumbnail…

Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This choropleth map uses a Yellow-Orange-Red sequential color scale to show population density values for a subset of countries, with denser regions appearing darker. It plots country shapes from the world-atlas TopoJSON file onto an SVG canvas using the D3.js `geoNaturalEarth1` projection and `geoPath()` generator. Population figures are loaded from a CSV file and stored in a JavaScript `Map` for lookup by country name, with missing or unknown countries rendered in a neutral gray. Hovering over a country triggers a tooltip that displays the country’s name and density value, and a legend with color swatches below the map communicates the scale.

Loading thumbnail…

Fork of Fork of FZ_ICE8_Q2_FamilyTree

This interactive network diagram visualizes the dependencies within a software architecture, organizing components into colored groups like UI, Server, and Storage. A physics-based simulation, driven by D3.js and the `d3.forceSimulation` API, positions the labeled nodes, with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` managing link distances, repulsion, and overlap prevention. The SVG rendering updates node positions on each simulation tick, and the implementation includes drag functionality for user interaction. The underlying graph is defined by hardcoded JavaScript arrays of node and link objects.

Loading thumbnail…

Fork of Section 1(a)-Making Maps Using TOPOJSON

This choropleth map visualizes average annual temperatures for U.S. states, using a red-to-blue sequential color scale to encode hotter and colder climates. Built with D3.js v7, the visualization renders SVG paths from TopoJSON data loaded via the `topojson-client` library, projecting states with `d3.geoAlbersUsa()` and `d3.geoPath()`. Hovering over a state triggers a tooltip that displays the state name and temperature value, with the map including a color legend. The underlying temperature data is stored in a JavaScript dictionary.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a force-directed network visualization built with React and D3, showing nodes connected by edges that repel and attract through physical simulation. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute node positions, while React handles rendering of SVG circles and lines. Interactive drag behavior is implemented via D3’s `drag` event handlers, updating the simulation’s alpha target on each interaction. The visualization renders from static, hardcoded data in the source files, with no external dataset or dynamic loading.

Loading thumbnail…

Fork of Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This choropleth map displays the average 2024 temperature by U.S. state, with cooler states in blue and hotter states in red, according to an illustrative data set embedded in the code. It renders state boundaries as SVG paths using `d3.geoPath` and a `d3.geoAlbersUsa` projection, loading geographic data from the `us-atlas` TopoJSON via `topojson-client`. A hover tooltip and a sequential color scale (`d3.scaleSequential`) complete the interaction and visual encoding.

Loading thumbnail…

Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This interactive world map displays country boundaries on a natural Earth projection, with each country shaded in a sequential blue color scale and identified by name via a tooltip on hover. The visualization loads TopoJSON data from the world-atlas package, converts it to GeoJSON features using topojson-client, and renders the map as SVG paths via `d3.geoPath` with a `d3.geoNaturalEarth1` projection. The D3.js v7 code also implements interactive mouse events to show tooltips with country names.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This line chart tracks daily PM2.5 concentrations in Dallas, Texas, over five months from January to May 2023. The visualization uses an orange stroke path to display fluctuating air pollution levels, with time on the x-axis and concentration values on the y-axis. The code loads data from a CSV file using `d3.csv`, parses dates with `d3.timeParse`, and constructs the chart with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`. All elements are rendered as SVG, with axis labels and a chart title added via D3 selections.

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This area chart shows daily PM2.5 air pollution levels in Dallas, Texas from January to May 2023, revealing fluctuating concentrations that mostly range between 15 and 60 µg/m³. Using D3.js v7, the visualization loads CSV data with `d3.csv`, parses dates with `d3.timeParse`, and renders an SVG area chart where `d3.area()` generates the filled path beneath the line. The chart applies `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes drawn via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of HTML Starter

A pie chart displays the distribution of 110 students across five grade categories (A through E), with labeled slices showing category counts and a legend describing letter-grade ranges. Built with D3.js v7, the visualization loads a CSV file, uses `d3.rollup` to aggregate student counts by category, and employs `d3.pie` and `d3.arc` to generate SVG paths. A color scale colors each slice, while labels and legends are added programmatically to the SVG.

Loading thumbnail…

Fork of HTML Starter

This reusable scatter plot visualizes the relationship between total bill and tip amounts from the tips dataset. D3 v7 defines a `scatterPlot()` function that implements `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for day-of-week coloring, plus `d3.axisBottom` and `d3.axisLeft` for ticks. The SVG rendering includes semi-transparent circles, axis labels, and a custom legend built with `selection.append`. The chart uses getter/setter methods for width, height, and data accessors.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates sales trends for two products and advertising spend across 150 monthly data points using Plotly's JavaScript API. It renders two interactive charts: a multi-series line chart tracking product sales and scaled ad spend, and a combined bar-and-line chart with dual axes comparing Product A sales against ad spend. The synthetic dataset is generated programmatically in `index.js` with trend, seasonality, and random noise components. Both charts use `Plotly.newPlot` with responsive layouts, unified hover mode, and customized axis styling.

Loading thumbnail…

Fork of HTML Starter

The visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis and sepal width on the y-axis for 150 samples. Each point is color-coded by species (setosa, versicolor, virginica), with tooltips revealing the exact measurements on hover. Built with D3 v7, the SVG chart uses `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. A legend and animated tooltip transitions provide clear interaction.

Loading thumbnail…

Fork of HTML Starter

A bar chart displays the grades of 100 individual students, with each bar color-coded by letter grade category from A (green) through E (red). The chart uses an ordinal color scale and a linear grade axis from 0 to 100, with student names rotated along the bottom axis. An interactive tooltip shows the student name, numeric grade, and category on hover. The code loads data from a local CSV file using `d3.csv` and builds the visualization with D3’s band and linear scales, axes, and tooltips, rendered as an SVG.

Loading thumbnail…

Fork of HTML Starter

This example presents the classic Iris dataset as a static HTML starter page, loading data from an external CSV file. The visualization is minimal, displaying only a "Hello HTML!" message and logging to the console; it does not render any chart or graph. The code uses a plain HTML document with linked CSS and a JavaScript module, loading the iris dataset into the environment without any data visualization libraries or rendering logic.

Loading thumbnail…

Fork of HTML Starter

This example summarizes a CSV file fetched from a GitHub gist, displaying its file size, row and column counts, and a full table of its contents. It also renders two static SVG illustrations: a fish and a house, which are drawn using inline SVG path, circle, polygon, and rect elements. The code uses D3 v7’s `csvParse` and `fetch` API to load and parse the data, then injects the summary and table directly into the HTML via `innerHTML`. Styling is handled by external CSS.