Skip to main content
Log in
J

jordanwolfe2@my.untdallas.edu

@jwolfe972·16 public vizzes

Loading thumbnail…

Task_9_Question_2

This area chart displays the closing price of Google stock (GOOGL) over time, with the area under the line filled in steel blue. The visualization uses D3 v7 with an SVG rendering approach. The code loads CSV data from a GitHub repository using `d3.csv`, parses dates with `d3.timeParse`, and constructs the area with `d3.area()`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while scales are set with `d3.scaleTime` and `d3.scaleLinear`.

Apr 24, 2024
Loading thumbnail…

Task_9_Question_1

A pie chart displays the distribution of pitch types in baseball, with each slice representing a pitch name and sized by its total pitch count. The chart uses a D3 v6 selection to append SVG paths and text labels, with a d3.scaleOrdinal color scheme for slice differentiation. Data is loaded from a remote CSV file via d3.csv, and the pie layout (d3.pie) and arc generator (d3.arc) calculate the slice geometry, with labels positioned at arc centroids.

Apr 24, 2024
Loading thumbnail…

Task 9 Wolfe

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis while keeping petal width on the y-axis. Colored circles represent three species (setosa, versicolor, virginica), with a legend and axis labels updating automatically. Built with D3 v6, it uses reusable chart modules (`scatterPlot`) and D3 selections to render SVG elements, with `setInterval` driving the animation loop. The code employs scale functions and axes from D3's scale and axis modules.

Apr 24, 2024
Loading thumbnail…

Task 9 and 10 wolfe

This animated scatter plot cycles through the four dimensions of the classic Iris dataset, sequentially swapping which measurement appears on the x-axis. Points are colored by species—setosa, versicolor, and virginica—with a static legend. The visualization uses D3.js (v6.7.0) via UNPKG, loading data with `d3.csv` and rendering SVG circles. A `setInterval` loop updates the plot's x-value mapping and redraws the chart, demonstrating reusable chart functions and dynamic axis relabeling.

Apr 24, 2024
Loading thumbnail…

Task_8_Activity_4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for different car makes. Each circle’s position encodes horsepower and torque, its radius represents highway MPG, and its color distinguishes the make. The chart is created using D3 v7 with SVG rendering and transitions. It includes interactive tooltips on hover and legends for both bubble size and color categories. Data is loaded from a CSV file and visualized using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` for color mapping.

Apr 14, 2024
Loading thumbnail…

Task_8_Activity_4_Question_4

This bubble chart visualizes the correlation between win percentage, run differential, and home runs for 2022 MLB teams, with each circle representing a team. The x-axis shows run differential, the y-axis win percentage, and circle size scales with home run totals, while colors distinguish league divisions. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color encoding. Interactive tooltips appear on mouseover, and the chart includes size and color legends rendered as SVG elements.

Apr 14, 2024
Loading thumbnail…

Task_8_Activity_3_Question_3

This scatter plot visualizes the relationship between MLB run differentials and winning percentages for teams from 2010 to 2022. It uses color-coded circles to represent different league divisions (NL West, AL East, etc.), with each point positioned by its run differential (x-axis) and win percentage (y-axis). The visualization is built with D3 v6, loading CSV data from a GitHub repository and rendering SVG circles. The code uses D3's scaleLinear, extent, axisLeft, and axisBottom APIs alongside custom color-mapping logic to distinguish league divisions.

Apr 14, 2024
Loading thumbnail…

Task_8_Activity_3_1

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three flower species color-coded as skyblue, lightgreen, and orange circles. The code loads CSV data via d3.csv, uses d3.scaleLinear for axes, and renders SVG circles with d3-selection joins. The plot displays axis labels for petal length and sepal length, with axes generated using d3.axisLeft and d3.axisBottom.

Apr 14, 2024
Loading thumbnail…

Task_8_Activity_3_2

This example displays the classic Iris dataset, plotting sepal length against petal length as a scatter plot and encoding the three iris species using distinct D3 symbols. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.symbolsFill` to map species to shapes, and `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded as CSV from a remote GitHub repository and parsed with `d3.csvParse`, with a custom legend function rendering the shape-keyed species labels.

Apr 14, 2024
Loading thumbnail…

Task_8_Activity_2_Question_2

A stacked bar chart displays 2022 home run percentages across MLB league divisions, with each bar divided into five color-coded team segments. The visualization uses d3.stack() to compute stacked series, d3.scaleBand for the y-axis categories, and d3.scaleLinear for the x-axis percentages. Interactive tooltips appear on hover, showing the specific team and percentage value. The SVG chart includes axis labels, a title, and a custom color scale applied via d3.scaleOrdinal, with data loaded from a local CSV file.

Apr 14, 2024
Loading thumbnail…

Task_8_Activity_2

This visualization shows the percentage distribution of IMDb movie ratings across six genres, with each genre displayed as a horizontal stacked bar chart. The bars are divided into five rating categories ranging from "below 5.0" to "above 8.5." The code uses D3 v7 with d3.stack() to create the stacked segments, d3.scaleBand() for the y-axis, and d3.scaleLinear() for the x-axis. Interactive tooltips appear on mouseover to display exact percentage values using d3.format().

Apr 14, 2024
Loading thumbnail…

Fork of Task_8_Activity_2_Question_1

This example visualizes IMDb movie rating distributions across six genres using a stacked bar chart. Each bar shows the percentage of films falling into five rating brackets, from below 5.0 to above 8.5, with color-coded segments for each bracket. The chart uses D3 v7’s `d3.stack()` to compute the stacked series, `d3.scaleOrdinal` for colors, and `d3.scaleBand` and `d3.scaleLinear` for axes. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment per genre. Data is loaded from a local CSV file.

Apr 14, 2024
Loading thumbnail…

Task8_Wolfe_Jordan_Question_2

This example shows a horizontal bar chart of the top 20 countries by population in 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, and d3.csv to load the dataset from a GitHub repository. The bars display a tooltip with the formatted population value on hover, while axes are generated from d3.ticks and formatted using d3.format with a custom suffix replacement.

Apr 14, 2024
Loading thumbnail…

Task8_Wolfe_Jordan_Question_1

This example displays a horizontal bar chart of country populations in 2000, sourced from a CSV file, with population values scaled to thousands. Built with React and D3 v5, it uses `scaleBand` for the country axis and `scaleLinear` for population, while custom components render SVG axes and marks. The bars are red with hover tooltips showing formatted values, and the chart includes a "POPULATION-2000" axis label. Data loading uses React hooks with D3's `csv` function, and the code demonstrates local ES6 module imports alongside direct D3 imports.

Apr 14, 2024
Loading thumbnail…

Task8_Wolfe_Jordan

This example visualizes the 2020 populations of 30 countries as a horizontal bar chart, with red bars sorted by country name on the y-axis and population on the x-axis. It uses D3’s `scaleBand` and `scaleLinear` to map the categorical and quantitative variables, with axes rendered via custom `AxisBottom` and `AxisLeft` components. The chart is built with React, using the `useData` hook to load a CSV from GitHub, and formatting population values with `d3.format` (converting gigas to billions). SVG rendering includes tooltips showing the formatted population on hover.

Apr 14, 2024
Loading thumbnail…

5 Buddhas (5320 class)

Five Buddhas overlap in a dense, luminous field, each figure rendered as a flattened outline of bezier paths. The work presents a sea of repeated forms, shifting through a palette of variable RGB fills, creating a chaotic, layered mandala effect. Using the React framework with `ReactDOM`, the visualization generates its geometry via nested `A.map()` loops, drawing thousands of rotated SVG `<polygon>` elements and `<path>` data. The code employs random number generation to scatter vertices, while static SVG paths define the primary Buddha silhouettes, all set against a black background.

Mar 23, 2024