J

JCarpenter-WPI

@JCarpenter-WPI·22 public vizzes

Loading thumbnail…

Two Scatter Plots: Corporate Engagement, Pricing and Earnings

This visualization presents two scatter plots depicting the relationship between corporate engagement levels (Tier) for NACRO member institutions and their associated pricing and earnings, using data from the College Scorecard dataset. The upper plot shows price against tier, while the lower plot displays earnings against tier. Built with React and D3 v5, it renders as an SVG using a dual-axis layout, with circles representing individual organizations. Interactive hovering triggers a filtering effect, dimming non-hovered points to highlight the selected institution's position across both charts.

Loading thumbnail…

NACRO Membership: Corporate Engagement

This visualization maps the geographic distribution of NACRO member institutions, with each circle representing an institution’s location and colored by its membership tier. It also encodes the total number of corporate partners on campus, revealing regional patterns in corporate engagement. The map uses a Vega-Lite layer combining a `markGeoshape` for U.S. state boundaries from TopoJSON with a `markCircle` projection via `albersUsa`. Data is loaded asynchronously with `d3.csv` from a GitHub Gist containing the 2019 NACRO member survey.

Loading thumbnail…

NACRO Membership by Institution

This visualization displays the geographic distribution of NACRO member institutions across the United States, with circle size representing the number of members at each location. It uses Vega-Lite API with d3.v5 to layer an Albers USA projection over a TopoJSON map of US states, pulling data from a CSV of member coordinates sourced from the College Scorecard dataset. The chart encodes longitude and latitude fields directly, and tooltips reveal institution names.

Loading thumbnail…

NACRO Membership by Office Type with Menus

This interactive bar chart visualizes NACRO membership counts by office type, filtered through three dropdown menus for enrollment size, Carnegie classification, and public/private status. The visualization uses React for the interface and d3-scale for axes and bar positioning, rendering as SVG. Data comes from the 2018 NACRO member survey, with counts aggregated from the CSV source. The dropdowns filter the displayed data, though the filtering logic in the provided code is incomplete, with the chart currently showing fixed counts up to 82.

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with cities of populations exceeding 50,000, using sized points to represent population magnitude. Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` render landmasses, graticules, and country interiors from TopoJSON data. Circles are positioned through projection of latitude and longitude coordinates, with radius determined by a square-root scale (`d3.scaleSqrt`) mapping population values to a maximum radius of 15 pixels. The React-based implementation loads city data from a CSV using `d3.csv` and renders all elements as SVG marks.

Loading thumbnail…

NACRO Membership by Office Type with a Menu

This interactive bar chart shows NACRO membership counts by office type, filtered by institutional enrollment category through a dropdown menu. The React-based visualization uses D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, with axes built from custom AxisBottom and AxisLeft components. Data comes from the 2018 NACRO member survey, loaded via d3.csv, and the menu selection updates the x-value attribute for the displayed bar lengths.

Loading thumbnail…

Polished Scatter Plot with Menus: College Scorecard Data

This interactive scatter plot visualizes relationships among variables from the College Scorecard dataset, focusing on institutional characteristics like average SAT scores and net price for public universities. The visualization uses React with D3.js scales and axes to render SVG circles, with each point representing a college. Users can dynamically select which attributes to plot on the x- and y-axes through dropdown menus. The D3 data loading via `d3.csv` parses the remote CSV file, while the `d3.scaleLinear` API handles continuous axis scaling.

Loading thumbnail…

Polished Scatter Plot with Menus

This scatter plot displays the Iris dataset, showing relationships between sepal and petal measurements for different flower species. Users can select which attributes appear on the x- and y-axes using two dropdown menus. The visualization is built with React components and d3.v5 scales, rendering circles as SVG marks. Data loading uses d3.csv, while axis generation and tick formatting rely on d3’s scaleLinear, extent, and format functions.

Loading thumbnail…

NACRO Membership by Office Type

This horizontal bar chart displays the breakdown of National Association of Corporate Relations Officers (NACRO) membership by office type, based on the 2018 member survey. Each bar represents a category from the CSV data, with lengths proportional to member counts. Built with React and d3.v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. SVG rectangles render the bars, with tick marks formatted using d3’s `format` function, and tooltips appear on hover.

Loading thumbnail…

NACRO Members by Office Type

This bar chart displays the number of NACRO members by office type, using horizontal bars sorted by category. The visualization uses React with D3 v5, rendering SVG elements through scaleBand and scaleLinear to position bars and axes. Member counts come from the NACRO Member Survey 2018-2019 dataset, loaded via d3.csv. Tooltips appear on hover using the SVG title element, while custom AxisBottom and AxisLeft components build the tick marks and labels.

Loading thumbnail…

NACRO Membership by Region

This bar chart shows the number of NACRO member institutions per region, using a count aggregation on the REGION field. The visualization is built with Vega-Lite and rendered through the vega-lite-api library, with data loaded asynchronously from a CSV file using d3.csv. The chart employs a custom configuration that disables axis domain lines and adjusts label and title font sizes for improved readability, while the view is fit to the full window dimensions.

Loading thumbnail…

Loading and Parsing CSV Data: NACRO Member Survey Data

This example demonstrates loading and parsing CSV data from a remote file, displaying the file size, row count, and column count as large text. It uses the D3.js v5 `d3.csv` method to fetch and parse the data, along with `d3.csvFormat` to compute the raw size in kilobytes. The source is the NACRO Member Survey data from 2018 and 2019, hosted as a GitHub gist. An alternative approach using `fetch` and `d3.csvParse` is included but commented out.

Loading thumbnail…

Loading and Parsing CSV Data: College Scorecard Outcomes Data

This example demonstrates loading and parsing a CSV file from the College Scorecard Outcomes dataset. It displays the raw data size in kilobytes, the number of rows, and the number of columns as large text on a blank page. The code uses the `d3.csv` method with a promise callback to fetch and parse the remote CSV, then reports the results via `d3.csvFormat` to calculate the file size. An alternative commented-out approach uses `fetch`, `async`/`await`, and `d3.csvParse`.

Loading thumbnail…

Loading and Parsing CSV Data: College Scorecard Data

This example demonstrates loading and parsing a CSV file from the College Scorecard dataset, displaying the file size in kilobytes, the number of rows, and the number of columns as large text. It uses the D3.js library (v5) and its `d3.csv` method to fetch and parse the remote CSV data asynchronously. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, as well as a pyramid-of-doom nested fetch approach. The data is sourced from a GitHub-hosted CSV of selected Department of Education variables.

Loading thumbnail…

Vega-Lite API: NACRO Survey Data

This chart visualizes NACRO membership distribution by age, with results from the NACRO Member Survey rendered as a bar chart of participant counts per age category. Built with the Vega-Lite API, it uses `markBar`, `x().fieldN('Age')`, and `y().count()` to encode the data, while D3’s `csv` function loads the remote survey dataset. The visualization is generated as SVG, with the display size fitted to the viewport and a custom configuration adjusting font sizes and axis styling for improved readability.

Loading thumbnail…

Vega-Lite API: College Scorecard Price

This visualization shows the relationship between average SAT scores and the net price of public institutions using College Scorecard data. A circular mark plots each institution, with hover tooltips revealing the institution name. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` method to load the dataset. The chart is configured with custom axis styling in `config.js` and automatically fits to the full window size.

Loading thumbnail…

Vega-Lite API: College Scorecard Outcomes

This visualization plots the relationship between entering students' median household income and their earnings six years after enrolling, with each point representing a college or university. The scatterplot uses a circular mark with 50% opacity, revealing overlapping institutions as darker clusters. It relies on the Vega-Lite API, a declarative grammar built atop Vega and Vega-Lite, with data fetched from a CSV hosted as a GitHub Gist. The code configures axis styling, tooltips, and a fit-based autosize using the d3.csv loader.

Loading thumbnail…

Harvard/MitX Video Views

This bar chart displays the distribution of video views in Harvard/MITx courses by student status. The visualization uses a single bar mark, with student-status mapped to the x-axis and the count of records on the y-axis. Built with vega-lite-api and rendered through Vega-Lite, the view fetches a CSV from a GitHub gist via d3.csv, and applies custom axis styling from a config file. The chart auto-fits to the window dimensions.

Loading thumbnail…

Homework #1: Another work in progress

A simple emoticon face rendered as a purple circle with black outlines, two eyes, and a mouth, drawn using React and SVG. The face is centered in a 960×500 viewport, with the mouth created by a d3.arc path and a thick black line. The code uses ReactDOM.render to mount the component, and d3’s arc helper to generate the mouth shape. No external data is used; all geometry is defined by fixed constants.

Loading thumbnail…

Homework #1: Work in Progress 2

A static SVG cartoon face is rendered in a purple circle with black outlines, featuring two offset eyes and a mouth drawn as an arc with a straight line beneath it. Built with React and D3 v5, the visualization uses D3’s `arc` generator to define the mouth’s path, while SVG primitives like `circle`, `line`, and `path` are composed inside a translated group. The layout is computed from fixed variables for dimensions and offsets, with React managing the DOM updates.

Loading thumbnail…

Homework #1: Work in Progress

This example shows a simple smiley face rendered as an SVG graphic using React and D3. The face consists of a yellow circle with a black stroke, two black eyes, and a mouth drawn as an arc. The code uses React to create SVG elements and the `arc` function from d3-shape to generate the mouth path. The components are positioned using React JSX, with explicit dimensions and offsets defined in the script.

Loading thumbnail…

Hello HTML

This example demonstrates the absolute minimum structure required for any HTML document, displaying a blank page with the title “Hello HTML” in the browser tab. The page contains no content or visualizations. Built from a single `index.html` file, it uses the standard HyperText Markup Language (HTML) with a `<head>` and `<body>` section, employing no external libraries, data sources, or scripts. The example serves as a starting point or sanity check for rendering a basic web page.