J

Jamestiberiuseanes

@Jamestiberiuseanes·17 public vizzes

Loading thumbnail…

Vis 725 Project - Global Warming and Sea Level Rise

This interactive map visualization explores the relationship between global warming, projected sea level rise, and household income across the Chesapeake Bay region. Users toggle KML layers showing income by zip code and select from 0 to 6 meters of sea level rise, while clickable markers reveal tide gauge charts in an embedded iframe. Built with the Google Maps JavaScript API, D3.js v3, and KML data from the author’s GitHub repository, the interface combines geospatial overlays with linked detail panels.

Loading thumbnail…

Vis Project - Sea Level Rise

This example maps projected sea level rise on a Google Map using KML layers. A dropdown menu lets the viewer select sea level increases from 0 to 6 meters, and the code updates the displayed overlay by swapping the KML file URL. It uses the Google Maps JavaScript API for rendering and event handling, while D3.js (d3.v3) is loaded but not actively used in the shown logic. Geographic polygons from the loaded KML files visualize the affected coastal or low-lying areas.

Loading thumbnail…

Income By ZipCode

This example shows a choropleth of income levels by zip code overlaid on a Google Map, centered on Virginia’s Northern Neck region. A Google Maps KmlLayer fetches a remote KML file containing the geographic boundaries and income data, while the map itself uses the TERRAIN map type for topographical context. The code directly integrates Google Maps’ JavaScript API with d3.v3, using d3 only to select the map container; no d3-specific data joins or scales are used for rendering. The visualization relies entirely on the KML file’s styling to color-code regions, with no additional D3 drawing or interaction logic.

Loading thumbnail…

Sea Level Rise

This example visualizes projected sea level rise by overlaying a KML layer onto an interactive Google Map. The map is centered on a specific latitude and longitude with terrain view enabled, zoomed to level 8. The code uses the Google Maps JavaScript API to create the base map and the KmlLayer to fetch and render geographic data from an external KML file. D3.js version 3 is included for utility functions, though the primary mapping and overlay rendering rely on the Google Maps API.

Loading thumbnail…

James Eanes - VI9

This scatterplot displays college quarterbacks by passing and rushing yards, initially showing only the top five ranked players with a button to expand the view to all quarterbacks. Dots are colored using a five-class ColorBrewer Blues ordinal scale based on rank, with hover tooltips revealing player details. The visualization is built with D3.js v3, using SVG rendering, linear scales, axes, and event handlers for interactive filtering and tooltip display.

Loading thumbnail…

James Eanes - VI8

This interactive scatterplot visualizes the relationship between passing and rushing yards for college football quarterbacks in the 2014 season, with each dot representing a player. The view groups teams by conference affiliation (Power Five, Group of Five, or Independent) using a categorical color scheme from `d3.scale.category10()` and the ColorBrewer palette. Built with D3 v3, the visualization renders as an SVG with animated tooltips on mouseover, displaying player details. Data comes from the included `passing-stats-2014.csv` file.

Loading thumbnail…

James Eanes - VI7 - Matrix View

This interactive adjacency matrix visualizes network connections between U.S. states, with each cell colored by the connected state's degree count. The SVG rendering uses D3 scales and ordinal bands to position rows and columns, while an animation transitions between sort orders (name, count, group) over 2.5 seconds. Hovering highlights the corresponding row and column labels. The data comes from the contiguous-usa.json file, containing 49 nodes and links defining state boundaries.

Loading thumbnail…

James Eanes - VI 7 - Node-Link

This example visualizes the adjacencies of 49 U.S. states and the District of Columbia as a node-link diagram, with each state represented as a circle and each shared border as a connecting line. The visualization uses D3’s force layout to position the nodes, applying charge and link distance parameters to simulate a physical network. Rendered as an SVG, the code loads data from a JSON file containing node names and edge indices, then draws circles and lines whose positions update on each tick of the force simulation.

Loading thumbnail…

James Eanes - VI5

This example contrasts an unjustified 3D Excel line chart with its standard 2D counterpart, using passing yards data from a football dataset. It demonstrates how the 3D version introduces perspective distortion and occlusion, making it harder to identify peak values despite adding no structural insight. The second chart, a plain Excel line graph, conveys the same data clearly and effortlessly. The visualizations are created entirely in Microsoft Excel, relying on its native charting capabilities rather than any external libraries.

Loading thumbnail…

VI4 - Identity as Spatial Region

Five labeled circles sit in a row, their radii encoding identity for five college teams. The example swaps color for spatial size, mapping each team’s name to a distinct radius value on an SVG canvas. Built with D3.js version 3.5.5, it binds an array of [name, value] pairs to circles, then sets each circle’s `r` attribute directly from the dataset. The fixed horizontal positions and vertical centering create a simple, clean comparison of spatial magnitude as a categorical identity cue.

Loading thumbnail…

VI4 - Identity as Color Hue

This example visualizes a small dataset of college football teams by encoding each team’s identity directly as a color hue. Five circles, one per team, are arranged horizontally, with each circle’s fill color matching a team-specific value from the dataset. The code uses D3.js (version 3.5.5) to select and append SVG circles, binding the data array that pairs team names with colors. The rendering approach relies on SVG attributes like `cx`, `cy`, `r`, and `fill`, with the fill determined by the second element of each data pair. The data source is a subset of a passing yards dataset, provided via gist.

Loading thumbnail…

VI4 - Magnitude as Area

This visualization demonstrates magnitude as area through a pie chart, showing passing yard totals for four quarterbacks with each slice’s size proportional to its count. The chart uses D3.js version 3.5.5, specifically the `d3.layout.pie` and `d3.svg.arc` APIs to compute and draw the arcs, while `d3.scale.category20b()` assigns slice colors. The data is a subset of week 3 passing yardage, rendered as an SVG element within the HTML page.

Loading thumbnail…

VI4 - Magnitude as Position on a Common Scale

A bar chart displays twenty numeric values as vertical bars positioned along a shared horizontal axis, with each bar’s height encoding the value on a common vertical scale. The bars are rendered in SVG using D3.js, with each rectangle’s x coordinate computed from its index, its y coordinate derived from the height, and its fill color set to a blue shade based on the value. The code uses d3.select and append to create the SVG container and rect elements, and the dataset is hardcoded within the script.

Loading thumbnail…

D3 SVG Tutorial + D3 Animations Tutorial

This example combines SVG rendering with D3 animations by generating 50 random data points and plotting them as circles on a scatterplot with linear scales and axes. The visualization uses D3.js version 3.5.5 to create SVG elements, including circles, axes, and scales, while a button triggers animated transitions of the circles across the chart. The code includes both the SVG tutorial’s static chart construction and animation commands, though the author notes difficulty combining the two sections. Rendering occurs entirely through D3’s SVG API with interactive button controls.

Loading thumbnail…

D3 SVG Tutorial

This example shows a static bar chart of a 20-point dataset rendered as an SVG, with each bar’s height and color intensity tied to its value. The code uses D3.js version 3.5.5, applying the `d3.select` and `data().enter()` pattern to append rectangles and text labels. Bars are positioned with arithmetic on the dataset length and fixed width/height variables, while fill colors are generated as RGB values scaled by data. The chart demonstrates basic SVG shape binding and data-driven styling without axes or interaction.

Loading thumbnail…

ICW2 - James Eanes

This visualization combines a scatterplot matrix and bar charts to explore college football passing and rushing statistics. The scatterplot matrix, generated with R’s base `pairs()` function, displays pairwise relationships between passing yards, passing touchdowns, passer rating, rushing yards, and rushing touchdowns. The horizontal bar chart, built with `ggplot2`, shows each player’s passing yards, using conference as a fill color via `aes(fill=stats$Conf)`. A third chart uses `stat_summary(fun.y="mean", geom="bar")` to display average passing yards per conference. Data comes from a CSV file (`passing-stats-2014.csv`).

Loading thumbnail…

D3 Tutorial

This example shows a simple bar chart built with D3, where 25 randomly generated numbers between 0 and 30 are each represented as a teal vertical bar. The chart uses `d3.select`, `.data()`, `.enter()`, and `.append("div")` to create the bars, with the `height` style set via a scaling factor of 5. The data is produced with JavaScript’s `Math.random()` in a loop, and the bars are styled with CSS classes. The page also includes a static R version of a barplot created with `barplot(data)` for comparison.