B

brodyoneal10@gmail.com

@brodyoneal·17 public vizzes

Loading thumbnail…

ICE8- Network

A force-directed network chart maps relationships between movies and actors, with blue nodes representing films and coral nodes representing people. Edges connect actors to the movies they appeared in, revealing shared cast members across productions. The graph uses D3.js force simulation with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` to position nodes, while `drag` interactions let users explore the topology. The SVG rendering uses `d3.select` and `attr` to draw links, circles, and labels.

Loading thumbnail…

Fork of ICE8- Tree

This example visualizes the taxonomic hierarchy of the animal kingdom as an interactive, layered tree diagram. Using D3.js, the visualization shows four distinct depth levels—Kingdom, Phylum, Class, and Order—with each layer encoded by a unique color, from purple at the root to coral at the leaf nodes. The flat parent-child input data is transformed into a hierarchical structure using `d3.stratify()`, with node positions computed by `d3.tree()` and curved edges rendered via `d3.linkVertical()` and an SVG canvas.

Loading thumbnail…

ICE8- Map

This choropleth map shows the population of each U.S. state using 2020 Census data, with states colored according to their population totals and a tooltip revealing the state name on hover. The visualization loads US states from the us-atlas TopoJSON file and renders them using d3.geoPath with the d3.geoAlbersUsa projection. Population values are mapped to a color scale, while the SVG states respond to mouse events for interactive inspection.

Loading thumbnail…

Fork of HTML Starter

This dashboard analyzes semiconductor manufacturing sensor data from the UCI SECOM dataset, visualizing fault detection with a dark-themed layout. It combines four Chart.js (v4.4.1) canvas charts: two donut charts showing class balance and feature quality, a horizontal bar chart ranking top sensors by Cohen's d effect size, and a distribution chart for the strongest feature. The code dynamically loads Chart.js from a CDN and uses custom legends, HTML/CSS stat cards, and responsive grid styling.

Loading thumbnail…

ICE7 Q4

This stacked area chart displays the distribution of employees across three roles—Engineer, Project Management, and Finance—by age. The visualization uses d3.csv to load data from a remote gist, d3.rollups to aggregate counts, and d3.stack with d3.area to render the stacked regions. Axes are generated via d3.axisBottom and d3.axisLeft, with a d3.scaleOrdinal color scale and a custom legend. The SVG output highlights employee demographics as a function of age in a selected subset of job categories.

Loading thumbnail…

ICE7 Q3

A line chart visualizes average salary against age, using aggregated employee data from a CSV file linked in the script. The D3.js code computes the mean salary for each distinct age value with `d3.rollups` and `d3.mean`, then sorts the results by age. The chart is rendered as an SVG, with axes created via `d3.axisBottom` and `d3.axisLeft`, and the trend line drawn using a `d3.line` generator. Points, a legend, and labels are added as SVG elements, with the chart's visual identity defined in the `styles.css` file.

Loading thumbnail…

ICE7 Q2

This visualization shows the distribution of employees by role using a pie chart, with each slice labeled and a legend displaying role names and employee counts. The chart is built with D3 v7, using `d3.pie` and `d3.arc` to generate the slices and `d3.scaleOrdinal` with `schemeTableau10` for colors. Data is loaded from a remote CSV file via `d3.csv`, aggregated with `d3.rollups`, and rendered as SVG elements with the `enter` selection pattern.

Loading thumbnail…

ICE7Q2

This example is a minimal HTML starter page that displays the static text “Hello HTML!” in large type. The visualization is rendered entirely through CSS, using a `.message` class with a `font-size` of `12em` and `text-align: center` to center the message on the page. The code consists of a basic `index.html` structure, a `styles.css` file for styling, and an `index.js` script that only logs “hello world” to the console. No data source or rendering library is used; the page’s visual output is purely typographic and relies on standard HTML and CSS.

Loading thumbnail…

ICE7 Q1

A scatterplot shows employee salaries plotted against age, with points colored by job role across six categories. The chart renders as an SVG using D3 v7, with a reusable `scatterPlot` module employing `scaleLinear`, `axisLeft`, and `axisBottom` for axes. A D3 data join renders circles, while a legend and dark-themed styling with Share Tech font present the salary distribution and role comparisons.

Loading thumbnail…

ICE7-Q1

This animated scatter plot cycles through four Iris dataset variable pairs on the x-axis—petal width, sepal width, petal length, and sepal length—while keeping sepal length fixed on the y-axis. It uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with `scaleOrdinal` and `schemeCategory10` coloring points by species. A `setInterval` updates the chart every two seconds by re-binding the x-value accessor and label, demonstrating reusable chart composition via a custom `scatterPlot` function. The visualization renders as SVG with a full-window layout.

Loading thumbnail…

ICE6 - Combined bar+line chart

This dashboard visualizes employee salary trends by age using two synchronized SVG charts. The first chart displays multi-series lines for average, minimum, and maximum salaries, while the second combines bars for employee counts with an overlaid line for average salary. Built with D3.js v7, the visualization loads CSV data, groups records by age, and uses `d3.rollups` for aggregation, `d3.line` for path generation, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. Gridlines and legends are rendered programmatically, with salary values parsed from formatted strings.

Loading thumbnail…

ICE6- ScatterPlot

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width for three species of iris flowers. Each point is colored by species using `d3.scaleOrdinal`, with a legend identifying the categories. The chart is rendered as an SVG using D3 v7, with linear scales from `d3.scaleLinear` mapping data to coordinates. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the data is loaded via `d3.csv` from a remote gist.

Loading thumbnail…

ICE6 - Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping sepal length against sepal width for 150 samples. The visualization uses a React frontend with D3 v7, leveraging `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. Circles are rendered with d3’s data join, featuring interactive click selections that highlight the chosen data point with white fill and black stroke. The SVG output includes labeled axes and animated transitions on circle styling, with data loaded from a CSV file and parsed into numeric values.

Loading thumbnail…

ICE6-BarChart

This visualization shows average salaries by employee role as horizontal-free vertical bars, with a color-coded bar for each role and corresponding value labels above them. The data comes from a CSV file hosted in a GitHub gist, and the code uses D3 v7 to load and process the data. The visualization uses `d3.rollups` to compute mean salaries per role, `d3.scaleBand` for the x-axis positioning, `d3.scaleLinear` for the y-axis, and `d3.schemeTableau10` for color encoding. It renders as an SVG with gridlines, rotated x-axis labels, and axis titles, all created via D3's selection and axis APIs.

Loading thumbnail…

Employee Salaries - DataViz Assignment 5

This example summarizes employee salary data from an external CSV file using D3 v7. It loads the data with `d3.csv`, cleans salary strings, and computes summary statistics such as average age, average salary, highest and lowest salary, and employee counts per role via `d3.mean`, `d3.max`, `d3.min`, and `d3.rollup`. The results appear in a styled HTML summary box, alongside a static SVG rectangle with a text label. The page uses plain D3 selections and updates the DOM dynamically, rendering all output as SVG and HTML.

Loading thumbnail…

Employee Salaries Dataviz assignment 5

This example demonstrates a simple HTML and CSS starter page, displaying a large, centered greeting message. The visualization uses only fundamental web technologies—HTML for structure, CSS for styling via the `.message` class, and vanilla JavaScript that logs "hello world" to the console. There is no data source, chart, or interactive element present; the focus is purely on a static text rendering and basic script initialization.

Loading thumbnail…

Assignment 5 DataViz

This example displays a text-based summary of employee salary data, including total employee count, average age, average salary, highest and lowest salaries, and a breakdown of employees per role. It loads a CSV file from a gist using `d3.csv`, parses and cleans the salary strings, and computes summary statistics with `d3.mean`, `d3.max`, `d3.min`, and `d3.rollup`. The results are rendered as HTML inside a styled summary box, alongside a static SVG rectangle graphic.