leftymadi

Assignment 2 Question 7

This interactive tree diagram maps the structure of softball, categorizing players into Offense and Defense positions, such as Home Run Hitter and Pitcher, with examples like Jocelyn Alo and Jenny Finch. The visualization uses a collapsible layout where nodes are colored by type, from the root "Softball" down to individual players. Rendered in SVG with animation, the diagram is built using D3 version 3, leveraging the `d3.layout.tree` API to calculate the hierarchical positioning. Source data is loaded from a local JSON file containing the nested tree structure.

Assignment 2 Question 6 Country Map

This example displays a map of Germany projected with a Mercator projection, fitted to the viewport using `fitSize`. It loads world country boundaries from the world-atlas TopoJSON file, selects the Germany feature with `topojson.feature`, and renders it as an SVG path using `d3.geoPath`. The visualization uses D3 v5 and the topojson-client library to parse and draw the geographic data.

Assignment 2 Question 6

This example displays an interactive orthographic globe of world countries, rendered as SVG paths with a sky-blue sphere and light-green landmasses that turn maroon on hover. It uses D3 v5’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas repository. The map supports pan and zoom through D3’s `zoom` behavior, which applies a transform to the entire SVG, while country features are generated using TopoJSON’s `feature` method.

Assignment 2 Question 1

This bar chart displays the populations of 20 cities in 1954, ordered vertically by city name. The visualization uses React with D3 v5, employing scaleBand for the categorical y-axis and scaleLinear for the numeric x-axis. Data is loaded via d3.csv from a GitHub gist, with population values converted from a string to a number. The SVG rendering includes custom axis components and rectangle marks with tooltips formatted using d3.format.

Assignment 2 Question 5

This example shows a scatterplot of student performance data, with points colored by grade (A, B, or D) and animated to cycle through different x-axis attributes like student activity levels and high school strength. The visualization uses D3’s `csv` loader to fetch data from a GitHub gist and `scaleLinear`, `axisLeft`, and `axisBottom` for axes. A `setInterval` timer updates the plot’s x-value mapping, while SVG circles, text labels, and a custom legend are drawn dynamically. The rendering is SVG-based with animation.

Reusable Scatter plot Activity 8

This animated scatter plot uses D3.js to visualize high school student data, cycling through four different variable pairs on the x-axis every few seconds. Colored circles represent individual students, with sky blue, light green, and orange indicating grade categories (A, B, and D). The visualization employs the custom `scatterPlot` module, which utilizes D3 scales, axes, and SVG rendering to create the animated chart. Data is loaded from a CSV file hosted on GitHub, and the animation is driven by `setInterval`.

Bubble chart

This bubble chart visualizes the correlation between a baseball player's batting average, home runs, and RBIs. Each bubble represents a player, with its position determined by average and home runs, while its size and color encode RBIs and player identity, respectively. The visualization uses D3 v7 with SVG rendering and includes an animated tooltip that displays player names on hover. Data is loaded from a local CSV file, and a legend with scale circles helps interpret bubble sizes. The chart also demonstrates local ES6 module imports, highlighting VizHub's capabilities for modular D3 development.

Assignment 2 Task 3 Scatter Plot

This scatter plot visualizes the relationship between high school ranking, high school strength, student involvement, and student activity levels, with point color encoding student grades (A, B, or other). The SVG visualization loads CSV data via d3.csv, scales the x and y axes with d3.scaleLinear, and renders circle marks using d3 selection joins. Axes are drawn with d3.axisLeft, d3.axisBottom, and styled with custom labels.

Sports Ratings

This stacked bar chart displays the distribution of fan ratings across six sports, with each bar segmented into five rating categories from "below 5.0" to "above 8.5." The visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal` with a categorical color palette. Hovering over any segment triggers a tooltip showing the exact percentage for that rating category. The chart includes axes, a legend, and is rendered as SVG with data loaded from a CSV file.

Jul 11, 2023

IMDb Movie ratings

A stacked horizontal bar chart shows the distribution of IMDb ratings across six film genres, with each bar segment representing the percentage of movies within a rating band from “below 5.0” to “above 8.5.” Hovering over a segment dims it and displays a tooltip with the exact percentage. Built with D3 v7 loaded via UNPKG, the code uses `d3.stack()`, `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG elements. Data comes from the local `data.csv` file, and the chart includes a custom legend and axes.

Jul 11, 2023

Activity 8 Country

This example displays a map of India, rendered by extracting the country’s geometry from the World Atlas TopoJSON dataset. The map uses a Mercator projection, fitted to the viewport size with `d3.geoMercator().fitSize()`, and is drawn as an SVG path generated by `d3.geoPath`. The code loads geographic data via `d3.json()` and processes the TopoJSON features with the `topojson-client` library. The resulting visualization presents India as a single outlined shape on a blank canvas, with no additional styling or interactivity.

Network Graph

A social network graph visualizes friend connections between people, with each person as a circular node and their relationships as lines with arrow markers. The graph uses a force-directed layout via `d3.forceSimulation`, with `d3.forceLink` controlling link distances and `d3.forceManyBody` for repulsion between nodes. Node colors are uniform light green, and text labels display names. Users can drag nodes to reposition them, and hovering changes the node stroke. The data comes from a JSON file containing nodes and links, rendered as SVG elements.

MuscleCars tree

This example shows a hierarchical tree of muscle cars organized by manufacturer, with Ford and Dodge as the top-level brands and individual models like Mustang, Torino, Charger, and Challenger as leaf nodes. The tree uses a D3 v3 layout with color-coded rectangular nodes (grey for the root, blue for manufacturers, red for models, orange for sub-models) and animated SVG rendering. The visualization supports zooming and panning through d3.behavior.zoom, and each node has a dropdown shadow and arrow markers. The data is loaded asynchronously from a JSON file that defines the tree structure.

Activity 8 Map

This interactive world map displays country boundaries using a light green fill on a sky-blue sphere, with indigo strokes and a maroon hover effect. The visualization loads GeoJSON data from the world-atlas TopoJSON file via `d3.json`, converts it with `topojson.feature`, and renders paths using `d3.geoPath` with a `geoEquirectangular` projection. Users can pan and zoom through `d3.zoom`, which applies transforms to the SVG. The map is built with D3 v5 and styled through a linked CSS file.

Area Chart Activity 8

This area chart shows the cost of sales from 2000 to 2013, with a filled light-green region under a black curve and labeled axes. Data is loaded from a GitHub gist CSV, parsed, and rendered as an SVG using D3 v5. The visualization uses `d3.csv`, `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` for smoothing, plus `axisLeft` and `axisBottom` for ticks. A custom tick formatter displays values in abbreviated notation, and axis labels are styled in orange.

linechart

This line chart visualizes the cost of sales from 2000 to 2013, using data from a CSV file with yearly cost values. The chart renders as an SVG, with a light green line connecting data points. The visualization is built with D3 v7, utilizing `d3.csv` for data loading and parsing, `d3.scaleBand` for the x-axis, and `d3.scaleLinear` for the y-axis, with the line drawn using `d3.line`.

Pie Chart

This pie chart displays the count of students from each major at UNT, using a dataset fetched as CSV from a GitHub gist. The chart renders as an SVG via D3 v5, with pie and arc generators to create the segments, and a scaleOrdinal mapping section colors to student counts. Labels show values in thousands, while a legend lists each major alongside its corresponding count.

Activity 8

This example demonstrates a minimal D3.js v5 setup within VizHub, replacing the contents of a div with a static text message. It shows how to load D3 from a CDN, import functions like `select` directly from the `d3` module, and import a local ES6 module that exports a string constant. The rendered output is a single, large, centered “Hello VizHub!” message, styled via a linked CSS file. The code uses `select('#message').text(message)` to set the DOM content, highlighting basic module imports and DOM manipulation without any data or animation.

Fork of Hello VizHub

This example demonstrates how D3.js can initialize a simple text display within a web page, showing a static greeting message. The code loads D3 v5 from a CDN and uses the `select` API to target an HTML element by its ID, then sets its text content with the `text` method. It also showcases the use of ES6 modules by importing a string constant from a separate local file, which is then rendered through the D3 selection. The rendering approach relies on a minimal HTML structure with a single div, styled via CSS.

Activity 7

A bar chart displays the top ten countries by population in 2020, with horizontal bars sorted by country name and formatted population values in billions. Built with React and D3 v5, the visualization uses `scaleBand` for categorical y-axes, `scaleLinear` for numerical x-axes, and SVG `rect` elements rendered from CSV data loaded via `d3.csv`. Axes are constructed with custom React components, and tick labels are formatted using D3's `format` function.

Bubble chart

This bubble chart shows the correlation between average horsepower, average torque, and highway MPG for various car makes. Each circle is positioned by horsepower on the x-axis and torque on the y-axis, with its size encoding highway MPG and its color representing the car make. Built with d3.v7, the SVG visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for coloring, and `d3.interpolateTurbo` for the color palette. Interactive tooltips appear on mouseover, and a legend displays both bubble-size values and color-coded makes.

Fork of Scatter Plot with Shape

This example visualizes the Iris dataset as a scatter plot of sepal length versus petal length, with symbols distinguishing iris species. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to draw shapes, plus custom modules `axes.js` and `shapeLegend.js` for labeled axes and a legend. The CSV data is loaded via `fetch`, parsed with `csvParse`, and numeric fields are coerced before rendering.

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, comparing petal length on the x-axis against petal width on the y-axis. Each circle is colored by species—setosa in skyblue, versicolor in lightgreen, and virginica in orange—with the selected sepal measurements also encoded as circle radii. The visualization uses D3 v6 with SVG rendering, loading remote CSV data via `d3.csv`, scaling axes with `d3.scaleLinear`, and drawing circles via `d3.selectAll` and `.join`. Axis labels are added using SVG text elements.

Assignment 1

This example demonstrates the visualization of a CTG dataset by loading and displaying its first 10 rows as formatted JSON text on an HTML page. Using D3 v5’s `csv` and `csvFormat` functions via UNPKG, the code fetches external data from a GitHub gist and appends the result to the body as a `pre` element. The page also imports a local ES6 module for a static message, while a background US image and custom CSS styling enhance the presentation.

Jun 26, 2023

Activity 6 task 5

This example visualizes the relationship between age and average body mass index (BMI) using binned bar charts. It loads CDC survey data from a CSV file, calculates BMI from height and weight, and groups ages into bins before aggregating the mean BMI per bin. The visualization uses D3 v7’s `scaleLinear`, `axisBottom`, `axisLeft`, and `bin` APIs to construct axes and histogram bars in an SVG canvas. Styling is applied via CSS classes, with orange rectangles representing the binned averages.

Transforming Data

This example demonstrates a data transformation pipeline using the classic Iris dataset. It loads the CSV file containing sepal and petal measurements for three flower species, then uses `d3.csvParse` to parse the data and converts the numeric columns to numbers. The visualization calculates the average sepal length per species using `d3.flatRollup` and `d3.sum`, and displays the resulting summary as JSON text in a `<pre>` element. The code uses D3 v7's selection methods (`select`, `selectAll`, `join`) to manage the output.

Activity 6

This example loads a CSV file hosted in a GitHub gist and displays its raw contents in the browser. It uses D3 v5’s `csv` method to fetch and parse the data, then renders the first ten rows as a JSON string inside a `pre` element. The page also demonstrates ES6 module imports from a local file and D3’s `select` API for DOM manipulation.

Fork of Hello VizHub

5 Buddhas

Five Buddhas generates a dense, abstract composition of overlapping, randomly positioned and rotated diamond shapes, layered with intricate hand-drawn SVG paths of a figure. The piece uses React to render an SVG canvas, with nested `map` functions producing a matrix of colored polygons. Each polygon’s coordinates, fill color, and rotation are calculated using `Math.random()`. Dark background and high opacity create a vivid, psychedelic visual effect, pairing algorithmic chaos with structured Buddhist iconography.

Jun 7, 2023