BhavanaGIrni

USA Country Map

This visualization displays a choropleth map of the 50 US states using a green fill, with white state borders and a purple hover highlight for individual states. It renders geographic data from a TopoJSON file using React and D3's `geoPath` with the `geoAlbersUsaTerritories` projection. The `feature` and `mesh` functions from TopoJSON extract land and interior boundary data, which are drawn as SVG paths within a React component.

World Map

This example renders a natural Earth projection world map as an SVG, using light yellow for the ocean sphere and light blue for landmasses with white stroke outlines. It loads world topology from the world-atlas TopoJSON file via D3’s `json` method, converts it to GeoJSON using TopoJSON’s `feature` function, and draws paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The implementation relies on D3 v5 selections and the topojson client library to visualize country boundaries.

World Map

This visualization displays a world map with city locations overlaid as semi-transparent dots. The map uses the Natural Earth projection via `d3.geoNaturalEarth1`, with graticules, land polygons, and country boundaries rendered through `d3.geoPath` and TopoJSON data from the world-atlas package. City coordinates from a CSV file are projected and drawn as SVG circles. The React component manages data loading with custom hooks, while D3 v5 handles geo and CSV parsing.

Reusable Scatter Plot

This reusable scatter plot explores the iris dataset, displaying three species of flowers distinguished by color and shape. It cycles through different petal and sepal measurements every ten seconds, dynamically updating both axes and the position of each data point. The visualization is built with D3 version 6, using `scaleLinear` for axes, `scaleOrdinal` with `symbols` for species-specific shapes, and `schemeCategory10` for colors. SVG rendering and an animated transition between variable pairs show how the data relationships shift across dimensions.

Bubble Chart Example

This example visualizes a small dataset of points with x, y, and size attributes as a bubble chart, where each circle's horizontal and vertical positions map to the x and y values, and its radius corresponds to the size value. The chart is rendered as an SVG element using the d3.v6 library, including linear scales for both axes, axis ticks and labels, and steelblue filled bubbles. The code demonstrates the use of d3.select, d3.max, d3.scaleLinear, d3.axisBottom, and d3.axisLeft.

Scatter Plot Example

This scatter plot visualizes a dataset of x and y coordinates as colored points on a linear scale. The code uses D3.js v6 to create an SVG rendering with x and y axes, and colors each circle based on its index. The visualization demonstrates basic scatter plot construction with d3.scaleLinear for mapping data values to screen coordinates, and d3.axisBottom and d3.axisLeft for displaying the axes. Labels are added to both axes to indicate the plotted dimensions.

BarChart

This bar chart visualizes a small dataset comparing values across five countries, including the USA, UK, and India, using an SVG rendering approach. The bars are drawn with `d3.scaleBand` for the x-axis categories and `d3.scaleLinear` for the y-axis values, styled in steel blue. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with the chart built using D3 v6 within a React environment. The fixed dimensions and margins define the layout, while the data is hardcoded in the script.

Social Network Graph

This visualization shows a small social network with five nodes (Alice, Bob, Charlie, Eve, and David) connected by friendship links. The graph is rendered as SVG elements styled with CSS, using D3.js v6’s `d3.forceSimulation` with link, charge, and center forces to position nodes dynamically. Each node displays a blue circle and a text label, while links appear as gray lines that update positions on every tick via the simulation’s tick event.

Tree Visualization

This visualization presents a hierarchical tree diagram of animal categories, showing the branching structure from a root "Animals" node down to leaf species. It uses D3 v6’s `d3.hierarchy` and `d3.tree` layouts to compute positions, rendering SVG paths for links via `d3.linkHorizontal` and circles with text labels for nodes. The code colors nodes by depth (black for root, blue for internal, green for leaves) within a hardcoded dataset of mammals, birds, and reptiles.

USA Map Visualization

This example displays a map of Texas, colored according to a sample state population dataset. The code uses D3.js v6 with an SVG rendering approach. It loads GeoJSON map data from a local TX.geo.json file and applies a `d3.geoAlbersUsa` projection with `d3.geoPath` to draw the state boundary. A sequential red color scale (via `d3.scaleSequential` and `d3.interpolateReds`) maps population values to fill colors. States not found in the dataset appear light gray.

Fork of Stacked Bar Chart Example

This stacked bar chart example shows how three numeric values (value1, value2, value3) accumulate across three categories, with each bar segment colored steelblue, green, and orange. The visualization uses d3.stack() to compute the stacked series and d3.scaleBand with d3.scaleLinear to position rectangles in an SVG. The code renders axes via d3.axisBottom and d3.axisLeft, with dimensions fixed at 400 by 300 pixels. The sample dataset is hardcoded in script.js, and the chart updates purely through D3’s data join, without animation or interactivity.

Stacked Bar Chart Example

This example shows a stacked bar chart comparing three value series across three categories, with each bar segment stacked vertically and colored blue, green, or orange. The chart renders as an SVG using React and D3 v6, drawing rectangles positioned via a band scale for categories and a linear scale for cumulative sums. The code calls `d3.stack()` with keys for value1, value2, and value3, and appends axes with `d3.axisBottom` and `d3.axisLeft`. The dataset is hardcoded in the script.

StackedBarChart

This example demonstrates a stacked bar chart built with React, rendering categorical data with sequential segments. It uses the D3.js library to compute stack layouts and scales, while React manages the component structure and SVG rendering. The chart displays bars divided into colored sections, with axes and labels generated through D3’s axis APIs. The code initializes with a simple HTML page, but the main visualization logic is driven by D3’s `d3.stack` and React’s component lifecycle.

StackedBarChart

This example presents a minimal stacked bar chart scaffold using D3.js v5. It demonstrates how to load D3 from a CDN via UNPKG, import API functions like `select`, and import local ES6 modules. The code sets the text content of a `div` element to display the message “Hello VizHub!”, highlighting the basic integration of D3 selections with modular JavaScript. The chart itself is not rendered, as the focus is on setup and module usage.

Bar Chart Example

This example shows a bar chart comparing five categories using a static dataset, with each bar’s height encoding the category value. It renders as an SVG via D3 v6, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The bars are drawn as `rect` elements, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart is built inside a React-compatible structure but uses plain JavaScript in a single HTML page.

D3.js Bar Chart Example

This D3.js example shows a straightforward bar chart of categorical data with axes and labels, visualizing values for five categories (A through E). The visualization renders as an SVG, using D3 v6's modular imports including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to map the dataset to bar positions and heights. The chart reads its data from a CSV file via `d3.csv`, converting the population column to numeric values, while the styling uses steelblue fills for the bars.

Jul 20, 2023

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of small, semi-transparent polygons is overlaid with a large golden Buddha path, creating a layered, kaleidoscopic composition. The polygons are generated through nested array mappings, with random coordinates, fill colors, and rotation applied, while the Buddha is drawn as an SVG path within a transformed group. The example uses React to render SVG elements, relying on the `Math.random` method to produce varied shapes and hues, resulting in an overlapping, colorful visual collage.

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization displays an overlapping Buddha composed of hundreds of small circles scattered randomly across a black background, with the Buddha path drawn in white. The circles, positioned using nested array mappings and random values, create a colorful, semi-transparent halo effect around the central figure. Built with React, the SVG rendering uses `<circle>` elements and a `<path>` for the Buddha shape, with fill colors generated via `Math.random()` for RGB values.

Fork of Network Graph

A fork of the D3 network graph example visualizes a social network of ten people, with circular nodes representing individuals and directed links showing friendship relationships. The graph uses a force-directed layout via `d3.forceSimulation` with forces for link distance, charge repulsion, collision detection, and centering. Nodes are draggable, and hovering highlights them. Data is loaded from a JSON file containing nodes and links with relationship metadata. The visualization is rendered as an SVG with green circles, red labels, and blue arrows, using D3 v6.

Fork of MuscleCars tree

This fork displays a hierarchical tree of muscle cars organized by manufacturer, using D3 v3’s `d3.layout.tree` with SVG rendering and animated node transitions. The visualization reads hierarchical JSON data and encodes each node’s type with a distinct fill color (grey, blue, red, orange). Interactive zooming and dragging are enabled via `d3.behavior.zoom`, and node clicks collapse or expand subtrees. The code also defines custom link paths with arrow markers and tooltips, while collision detection and breadth-first traversal position nodes without overlap.

Fork of Activity 8 Country

This example displays a choropleth-style map of India rendered as a single SVG path. It loads world country boundaries from the world-atlas TopoJSON file, extracts India’s geometry using `topojson.feature`, and fits a `d3.geoMercator` projection to the country’s shape with `fitSize`. The map is drawn using a `d3.geoPath` generator, producing a simple outline without internal administrative divisions or additional data encoding.

Fork of Activity 8 Map

This interactive world map visualizes country boundaries using a geographic projection, with zoom functionality and hover effects that change country colors. Built with D3 version 5 and the TopoJSON package, it loads GeoJSON data from the world-atlas library and renders countries as SVG paths. The code uses `d3.geoEquirectangular` for the projection, `d3.geoPath` to generate the map paths, and a zoom control that applies transform attributes on zoom events. The styling in CSS fills the earth with skyblue, countries with lightgreen, and maroon on hover.

Fork of Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, using a smooth curved line and a light green filled region beneath it to emphasize the trend. The visualization encodes yearly dates on a time-scaled x-axis and cost values on a linear y-axis, with red tick labels and orange axis labels. It loads CSV data from a GitHub gist and renders SVG paths using D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` interpolation. The chart includes gridlines via tick marks and axis labels positioned within an SVG canvas.

Fork of linechart

This example visualizes the cost of sales from 2000 to 2013 using a line chart rendered as an SVG. The chart displays yearly cost data loaded from a CSV file, with year on the x-axis and cost on the y-axis. It uses D3 v7 with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Axis labels are styled in red, and the line itself is drawn with a lightgreen stroke.

Fork of Pie Chart

This pie chart displays the count of students from each major at UNT, with labeled segments and a legend showing major names alongside student counts. The visualization uses D3 v5 to fetch CSV data, then applies `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart with custom colors and percentage labels. Values are formatted using `d3.format` and rendered as SVG, positioned within a fixed canvas.

Fork of Reusable Scatter plot Activity 8

This animated scatter plot visualizes the Iris dataset, cycling through four flower measurements on the x-axis while keeping petal width on the y-axis. Each species—setosa, versicolor, and virginica—is color-coded, with a legend and axis labels displayed. The visualization uses D3.js functions including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`, with circles positioned via `attr` and updated through `setInterval`. Built as an SVG with HTML/CSS, the code demonstrates a reusable scatter plot component.

Jul 15, 2023

Fork of Fork of Scatter Plot with Shape

This scatter plot displays Iris flower measurements, plotting sepal length against petal length for three species. The visualization uses SVG symbols from d3.symbol and d3.symbolsFill to differentiate species by shape, with a custom legend showing the shape-to-species mapping. The code imports from d3 modules (d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, d3.extent) to build scales, axes, and marks, while asynchronously loading and parsing the iris dataset from a remote CSV via d3.csvParse.

Jul 15, 2023

BMI by Age

A histogram displays average body mass index (BMI) across age, using orange bars with white strokes and labeled axes. The code loads CDC health survey data via `d3.csv`, computes BMI from height and weight, and bins ages with `d3.bin`. `d3.scaleLinear` maps age and averaged BMI to SVG pixel coordinates, while `d3.axisBottom` and `d3.axisLeft` render the ticks. Axes labels are added manually, and the chart is built with D3 v7 selections and SVG rectangles.

Fork of HTML Starter 1

This example displays the text "Hello HTML!" centered on a plain white page, using a large font size. The page is built with a minimal HTML structure and styled using a CSS class to control the font size and alignment. The code relies on standard HTML elements and CSS properties, with no external libraries or JavaScript functions, making it a simple demonstration of fundamental web technologies.

Fork of Fork of Transforming Data 1

This visualization loads the classic Iris flower dataset and uses `flatRollup` and `sum` from D3 v7 to compute the average sepal length for each species, then displays the JSON summary as text. The raw data table is fetched from `data.csv`, parsed with `csvParse`, and converted to numeric types before rollup. The React-based app manages state with `setState` and renders the result inside a `<pre>` element.

Fork of Transforming Data 1

This example displays a text-based summary of the Iris dataset, showing the average sepal length for each of the three species. Using D3 v7’s `flatRollup` and `sum` functions, it computes the mean values and renders them as JSON in a `<pre>` element. The data is loaded asynchronously via `fetch` and parsed with `csvParse`, with numeric fields coerced to numbers before aggregation. The visualization updates through a state management pattern where `setState` triggers a re-render.

Transforming Data

This example loads the Iris flower dataset from a CSV file and computes the average sepal length for each species using `d3.flatRollup` and `d3.sum`. The result is displayed as a JSON-formatted text summary on the page. D3’s `csvParse` handles data loading, and numeric fields are explicitly converted to numbers. The visualization updates through React-style state management, with a loading placeholder shown before the fetch completes.

Activity 6

This example uses the classic Iris dataset to compute and display the mean sepal length for each iris species, showing the summary as formatted JSON text on a black background. The visualization fetches a CSV file, parses it with D3's `csvParse`, and uses `flatRollup` and `sum` to calculate averages, with results rendered using SVG and WebGL within a React framework.

Fork of Scatter Plot with Shape

This interactive scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded through distinct point shapes. The visualization uses D3 v7's `scaleOrdinal` and `symbolsFill` to assign different symbol types to each species, with a custom legend showing the shape-to-species mapping. The React-based application fetches the CSV data from a GitHub repository, parses it using `csvParse`, and renders the plot with axes and labels defined in the `axes.js` component.

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica) using skyblue, lightgreen, and orange. Built with D3 v6 in a React context, the code loads CSV data from GitHub, applies linear scales with `scaleLinear`, and renders SVG circles with attributes for x, y, fill, and radius. Axis labels appear in green text, and the plot resizes to fill the browser window using `window.innerWidth` and `window.innerHeight`.

Fork of Bubble chart

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position maps horsepower and torque, while its size encodes highway MPG and its color identifies the manufacturer. The visualization includes interactive tooltips showing the make on hover, as well as legends for bubble size and color. It uses D3 v7 to load CSV data, render SVG circles, axes, and scales, and relies on D3 event handlers for hover effects. Animated transitions are applied to the tooltip for smooth appear and fade behavior.

Activity 7

This bar chart displays the 2010 populations of ten countries, sorted alphabetically by country name. Each bar’s length is proportional to the population value, with a custom tooltip showing the formatted number. The visualization is rendered as an SVG using React, with D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate large numbers. Data is loaded asynchronously from a remote CSV file via the `csv` function.

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius scales with highway MPG and its color maps to the car make. Built with D3.js v7, it renders as SVG with interactive tooltips on hover and includes a bubble-size legend and color-coded make identifiers. Data is loaded from a CSV file and processed using `d3.csv`, with scales and axes created via `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`.

IMDb Movie ratings

This interactive stacked bar chart visualizes IMDb movie rating distributions across six genres, with each bar segment representing the proportion of movies within specific rating brackets. The chart uses D3.js (v7) with an SVG rendering approach, employing `d3.csv` to load data and `d3.stack` to create the stacked segments. A legend maps five rating categories to a color scale, while mouseover events trigger tooltips showing exact percentages for each genre-rating combination. The code also demonstrates custom axis styling and font integration.

Fork of Activity 7.2

This fork of Activity 7.2 renders a horizontal bar chart of the top 20 countries by population in 2020, with a green fill for each bar and a tooltip showing the formatted population value. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `svg` elements like `rect` and `text` for marks and labels. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and formatting uses `d3.format` to abbreviate large numbers.