paulphillips@my.unt.edu

@pcp0019·10 public vizzes

Fork of Blank Slate with Hot Reloading

A multi-line chart tracks home values over time for multiple regions, with each region’s path colored uniquely and labeled in a legend. The visualization uses D3.js (v3) with `d3.csv` to load `final_data_with_population.csv`, then groups the data by `RegionName` via `d3.group`. Lines are drawn using `d3.line` and scales from `d3.scaleLinear`; axes rely on `d3.axisBottom` and `d3.axisLeft`. The SVG output is generated inside a `draw()` function that appends to an existing `#chart` element.

Nov 30, 2024

Loading thumbnail…

activity9

This animated scatter plot cycles through four Iris flower measurements, showing petal length, petal width, sepal length, and sepal width on both axes. The visualization uses D3.js to render SVG circles colored by species, with a legend and rotating axis labels. Data comes from a CSV file loaded via `d3.csv`, and the plot updates every few seconds using `setInterval` to change which measurement is displayed, creating a looping exploration of the dataset.

Nov 3, 2024

Loading thumbnail…

tutorial7

This example demonstrates a minimal D3.js setup that displays the text “Hello VizHub!” in the center of the page. It loads D3 v5 from a CDN and uses the `select` function to target a div element, setting its text content with a custom message imported from a local ES6 module. The page also includes basic styling via CSS, showing how to combine external libraries, local modules, and stylesheet imports in a single visualization.

Oct 30, 2024

Loading thumbnail…

Activity6_task3

This visualization displays a scatter plot of the Iris dataset, plotting petal length against petal width, with points colored by species (setosa, versicolor, or virginica). The chart uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while SVG circles are sized by sepal length and width via the `rx` and `ry` attributes, creating an ellipse-like marker. Data is loaded asynchronously from a remote CSV using `d3.csv`, and the plot fills the browser window with margins configured for axis labels.

Oct 21, 2024

Loading thumbnail…

Activity6_Task3

This example demonstrates how VizHub enables a minimal D3.js project to load external libraries and utilize local ES6 modules. The page displays the text "Hello VizHub!" centered on the screen, styled via CSS. The code imports the `select` function from D3 to target the `#message` element and sets its text content. A separate local module, `myMessage.js`, exports the string used as the message, showcasing modular code organization within the template. The example uses D3 v5 loaded from UNPKG and relies on a bundled JavaScript file for execution.

Oct 21, 2024

Loading thumbnail…

activity6_task2

This example visualizes apple quality ratings using a stacked horizontal bar chart, where each bar represents a sample and segments show the proportion of attributes like size, weight, sweetness, and acidity. The visualization uses D3 v7 with an SVG rendering, loading data from a CSV file. It employs d3.stack for stacking, d3.scaleLinear and d3.scaleBand for axes, and d3.axisBottom for the x-axis, with interactive tooltips on hover.

Oct 21, 2024

Loading thumbnail…

activity6_task2

This example shows the distribution of IMDb movie ratings across different genres as a stacked horizontal bar chart, where each bar segment represents the percentage of movies within a rating range. The chart uses D3 v7 to load the data, build stacked bars with the `d3.stack` layout, and apply ordinal color scales. It includes interactive tooltips that appear on hover to display the exact percentage for each rating category, along with custom axis labels and styling defined in the accompanying CSS. The data comes from a CSV file with six genres and five rating brackets.

Oct 20, 2024

Loading thumbnail…

activity 6_Task_1.2

This example shows a horizontal bar chart ranking 20 countries by their 2010 population, with country names on the y-axis and population values on the logarithmic x-axis. The visualization is built using React with D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` for data loading. The chart renders bars as SVG rectangles with hover tooltips showing formatted population values, and loads its data from a GitHub-hosted CSV file.

Oct 20, 2024

Loading thumbnail…

activity 6_Task_1

This visualization displays the populations of ten countries in the year 2000 using a horizontal bar chart, sourced from a CSV file. Built with React and D3 v5, it renders chart elements as SVG components, including bottom and left axes. The code employs D3's `scaleBand` and `scaleLinear` to map data to positions, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) structure the visualization. Population values are formatted using D3's `format` API, converting large numbers into abbreviations like “1.2B”.

Oct 20, 2024

Loading thumbnail…

Assignment 5

This example visualizes a decorative overlapping Buddha figure composed of colored geometric shapes, rendered on a black background with a large centered message below. The scene uses React to manage the UI structure and render the main layout, while the visual composition is generated through JavaScript canvas drawing routines. The code builds layered forms using repeated coordinate transformations and color fills, with no external data or simulation—the patterns emerge purely from procedural shape construction. The page loads React and ReactDOM from external CDN links and runs entirely in the browser.

Oct 13, 2024