M

mn0658

@mn0658·28 public vizzes

Loading thumbnail…

Network Graph

A social network graph renders a set of named individuals as circular nodes connected by directional links, with arrowheads indicating the relationship direction. The layout is computed using the `d3.forceSimulation` API, which applies link, charge, collision, and centering forces to position the nodes dynamically. Nodes are draggable via D3's `d3.drag` behavior, and colors highlight hovered nodes. The visualization loads data from a local `graph.json` file and draws the SVG scene with D3 v6.

Loading thumbnail…

MuscleCars tree

An interactive tree diagram maps the hierarchy of Muscle Cars, from Ford and Dodge down to models like Mustang, Charger, and SRT. The visualization loads hierarchical data from a JSON file and renders it as colored, animated SVG nodes with connecting links and tooltips. Built with D3.js v3, the example uses `d3.layout.tree`, `d3.behavior.zoom`, and SVG elements to support click-to-collapse behavior and drag-to-pan navigation.

Loading thumbnail…

Activity 8 Country

This example displays a map of India rendered as an SVG path, centered and scaled using a Mercator projection. The code loads world country boundaries from the World Atlas TopoJSON dataset via `d3.json`, extracts India’s geometry with `topojson.feature`, and fits it to a 960×500 viewport using `d3.geoMercator().fitSize`. A single path drawn with `d3.geoPath` visualizes the country’s outline. The visualization demonstrates loading external JSON, filtering TopoJSON features, and projecting geographic data entirely with D3 v5.

Loading thumbnail…

Activity 8 Map

This example shows an interactive world map built with D3 v5 and TopoJSON, using an equirectangular projection to render countries as SVG paths. The map applies sky-blue ocean and light-green land colors, with hover highlighting in maroon. It supports zoom and pan through D3’s zoom behavior, and loads geographic data from the world-atlas countries-110m.json file. The code demonstrates local ES6 module imports, including a custom `myMessage` module, alongside UNPKG-hosted D3 and TopoJSON libraries.

Loading thumbnail…

Area Chart

This area chart displays the cost of sales from 2000 to 2013, with a smooth curve and a light green filled region beneath the line. The visualization uses D3 v5, loaded via UNPKG, to construct axis scales with `scaleTime` and `scaleLinear`, and draws the chart with `line`, `area`, and `curveBasis` generators. Data is loaded as CSV from a GitHub gist and rendered as an SVG, with formatted tick labels and styled axes.

Loading thumbnail…

linechart

A line chart displays the cost of sales from 2000 to 2013, with each year plotted along the x-axis and cost values along the y-axis. The SVG visualization uses d3.scaleBand and d3.scaleLinear for positioning, while d3.line and d3.axisBottom and d3.axisLeft construct the path and axes. Data is loaded from a CSV file via d3.csv. The chart features a lightgreen stroke, red axis labels, and a styled title.

Loading thumbnail…

linechart

A line chart displays the cost of sales from 2000 to 2013, with each year plotted along the x-axis and cost values along the y-axis. The SVG visualization uses d3.scaleBand and d3.scaleLinear for positioning, while d3.line and d3.axisBottom and d3.axisLeft construct the path and axes. Data is loaded from a CSV file via d3.csv. The chart features a lightgreen stroke, red axis labels, and a styled title.

Loading thumbnail…

Pie Chart

This pie chart displays the distribution of student counts across different majors at the University of North Texas. The chart uses D3 v5 to load CSV data from a GitHub gist and render the visualization as an SVG. It employs the `pie` and `arc` functions to generate the chart segments, with `scaleOrdinal` assigning colors to each major. The visualization includes labeled value annotations within each slice and a legend showing majors alongside their corresponding student counts.

Loading thumbnail…

Reusable Scatter plot Activity 8

This animated scatter plot visualizes the Iris dataset, cycling through four feature combinations on the x-axis while sepal length stays on the y-axis. Each species appears as a distinct color (skyblue, lightgreen, orange) with a legend. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a reusable `scatterPlot` module updated via `setInterval`. SVG circles and text labels render dynamically as axes change every few seconds.

Loading thumbnail…

Untitled

A donut chart displays the distribution of students across university majors, with each slice labeled by its proportion and a legend pairing colors to majors. The visualization loads course data from a CSV file via `d3.csv`, then uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute slice geometry and assign categorical colors from a fixed palette. Values are formatted with `d3.format` and rendered as text labels directly on the chart.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot displays the Iris dataset, showing petal width on the x-axis and sepal length on the y-axis with data points colored by species. Built with D3.js (version 6.7.0) and ES6 modules, the visualization cycles through different feature pairings every few seconds using `setInterval`. The reusable scatter plot component, defined in `scatterPlot.js`, dynamically updates its scales and axes as the data columns change. The animation includes a custom legend and axis labels generated using D3's `axisLeft` and `axisBottom` APIs, rendered as an SVG with HTML styling.

Loading thumbnail…

Activity7 Task5

This bubble chart displays the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) for various car makes. Built with d3.v7, it renders SVG circles with animated hover interactions. The chart uses `d3.scaleLinear` for positioning and sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for categorical coloring, and custom tooltips showing the make. A legend maps bubble size to MPG values and color to car brands.

Loading thumbnail…

Activity7 Task4

This scatter plot displays Iris flower measurements, plotting sepal length against petal length for three species. The visualization uses a D3 v7 pipeline with specialized modules for axes and a custom shape legend. Data loads asynchronously from a CSV file, with numeric columns parsed for plotting. Marks are rendered as SVG paths whose shapes encode species identity, while the legend maps each shape to its corresponding species name.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, encoding petal length on the x-axis and petal width on the y-axis, with points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The D3 v6 code uses scaleLinear, extent, axisLeft, axisBottom, and csv to load and render SVG circles. The visualization loads data from a remote CSV file and applies a custom species-to-color mapping, with axis labels for petal length and sepal length.

Loading thumbnail…

Activity 7 Task2

This stacked bar chart visualizes how movie genres affect rating distributions, showing the percentage of films falling into five rating brackets (below 5.0, 5.0–6.5, 6.5–7.5, 7.5–8.5, and above 8.5) for genres like Documentary, Drama, Comedy, Romance, Animation, and Action. The chart reads horizontally, with each genre as a bar segmented by rating category, and hovering over any segment reveals the exact percentage via a tooltip. The visualization is built with D3.js (v7) using `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleOrdinal` for the color scheme, rendering as an SVG. Data is loaded from a local CSV file, and the tooltip formatting uses `d3.format` to display percentages.

Loading thumbnail…

Activity 7-Task1

This visualization shows the populations of ten countries in 2020 as horizontal bars, scaled linearly along the x-axis and categorized by country along the y-axis. It is implemented in React with D3 v5 utilities, where `d3.scaleBand` positions the bars and `d3.scaleLinear` maps population values to pixel widths. The chart renders as an SVG with custom `AxisBottom` and `AxisLeft` components, and hoverable bars display tick-formatted tooltips via SVG `<title>` elements. The data is loaded asynchronously from a CSV using `d3.csv`.

Loading thumbnail…

Assignment 1-Task10

This example displays the first 10 rows of a CSV dataset fetched from a GitHub gist, rendered as formatted JSON text in a blue-styled preformatted block. It uses D3 v5’s `csv` module to load the data and `select` to append the output to the page body. The visualization demonstrates basic data loading and text-based display capabilities within VizHub.

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes data points positioned along linear x and y scales, with categorical shapes encoding a third dimension. The chart includes labeled axes and a custom shape legend displaying the category symbols. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol()` to generate the mark paths, while modular ES6 imports handle axes and legend rendering. The visualization is built in VizHub, leveraging local modules and UNPKG for D3 loading.

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes Iris flower measurements, mapping sepal length to the x-axis, petal length to the y-axis, and using different point shapes to distinguish species. The visualization loads CSV data from a remote URL and parses it with `d3.csvParse`. D3's `scaleLinear` and `scaleOrdinal` handle the continuous and categorical scales, while the `symbol` generator creates the shape-based marks. A custom legend shows the shape-to-species mapping, with axes added via D3’s `axisLeft` and `axisBottom`.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length against petal width with points colored by species: skyblue for setosa, lightgreen for versicolor, and orange for virginica. The visualization uses D3 v6 scales and axes via d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map the data. Data is loaded as CSV from a GitHub repository, and circles are rendered as SVG elements with fixed radius and dynamic fill colors. The chart includes rotated axis labels for petal length and sepal length.

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart displays the distribution of IMDb ratings across six movie genres, showing the percentage of films in each rating range from below 5.0 to above 8.5. The horizontal bars are segmented by rating category, with a color-coded legend and interactive tooltips that reveal exact percentages on hover. The visualization uses D3 v7 to load CSV data, apply the d3.stack layout for bar segmentation, and render SVG elements. Scales include d3.scaleLinear for the x-axis and d3.scaleBand for genres, with d3.scaleOrdinal mapping rating categories to custom colors. Axis labels and a title provide context, and the tooltip uses D3 event handling for mouse interactions.

Loading thumbnail…

Activity 7

This example displays the 2020 populations of 20 countries as a horizontal bar chart, ordered by country name. The visualization uses React with D3's `scaleBand` and `scaleLinear` to position bars and axes, rendering to SVG. Population values are formatted with D3's `format('.2s')`, converting G to B for billions. Data is loaded asynchronously from a CSV file via `d3.csv`.

Loading thumbnail…

BMI by Age

This visualization displays average body mass index (BMI) by age using a histogram-style bar chart. The code loads CSV data from a GitHub gist, calculates BMI from height and weight, and bins ages with `d3.bin`. D3 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and SVG rendering display the aggregated averages. The chart includes labeled axes for Age and Average Body Mass Index, with a title, all styled via CSS.

Loading thumbnail…

Transforming Data

This example demonstrates how to load, transform, and summarize the classic Iris dataset. It fetches a CSV file, parses it with `d3.csvParse`, converts numeric fields, and then uses `d3.flatRollup` and `d3.sum` to compute the average sepal length for each species. The resulting summary is displayed as a JSON string in a `<pre>` element. The code relies on D3 v7 for data parsing and aggregation, and uses a simple state-management pattern with `setState` to handle asynchronous loading.

Loading thumbnail…

Activity 6

This example demonstrates how to load data from a remote CSV file and display it in a web page using D3.js v5 and Vue. The visualization retrieves the dataset via a GitHub Gist URL using D3's `csv` function, then formats and displays the first 10 rows as JSON in a `<pre>` element. It also showcases importing from the D3 library and local ES6 modules, with the SVG and WebGL rendering infrastructure defining the page layout.

Loading thumbnail…

activity-6

This example displays the text “Hello VizHub!” centered on a blank page. It demonstrates how D3 can be used for basic DOM manipulation, with `select('#message')` setting the text content of an HTML element. The code also showcases the use of local ES6 modules by importing a message constant from `myMessage.js`. The example illustrates how to combine a D3 import with custom module imports within a VizHub environment.

Loading thumbnail…

buddha

The visualization depicts a geometric Buddha-like form composed of layered, rotated SVG polygons with randomized positions, sizes, and RGB colors. The shape emerges from nested loops generating diamond-shaped elements, while a static SVG path defines the central Buddha silhouette. The design combines procedural randomness with a fixed, detailed outline, resulting in an abstract, colorful pattern against a black background. React manages the component structure, and rendering is handled entirely through SVG elements in the browser.

Loading thumbnail…

buddha

A dense scatter of small, semi-transparent circles forms a glowing, nebulous field atop a black background, layered over a thin, intricate line drawing of a Buddha figure. The circles are generated by nested loops that map array values to random screen positions and RGB colors. The SVG rendering relies on React's `createElement` and JSX to produce circle and path elements, with the Buddha’s complex path data and stroke styling embedded directly in the markup.