R

Robert Johnson

@rgjohnson98·51 public vizzes

Loading thumbnail…

NASCAR Dashboard IV- Dropdowns, Different Plots

This dashboard displays four NASCAR visualizations: a map of track locations, bar charts of driver starts before first wins and top winners, and a scatter plot of starting positions among winners. Each visualization includes an independent dropdown menu and interactive tooltips, with points and bars resizing based on selections. Built with d3.v5 and the Vega-Lite API, the visualizations use `vl.selectSingle` with a menu binding for filtering, `markGeoshape` and `markCircle` for the map, and `markBar` for histograms. The data is loaded via D3’s `csv` from GitHub gists, with tooltips handled by Vega Tooltip.

Loading thumbnail…

NASCAR Dashboard III- Dropdowns Added

This dashboard displays four NASCAR statistics visualizations: a U.S. track map, a bar chart of starts before first wins, a scatterplot of starting positions among winners, and a car maker finishes chart. Each view includes its own dropdown menu that filters by track name, implemented with `selectSingle` and `bind.menu` from vega-lite-api. Points and bars reset with a click, and hovering reveals tooltips via vega-tooltip. Data is loaded asynchronously with d3.csv from GitHub gists.

Loading thumbnail…

NASCAR Dashboard II- Different Plots

This dashboard presents four interactive visualizations of NASCAR statistics. A map of the United States displays race tracks colored by name, with a scatter plot showing racing starts before a driver’s first win. A circle plot visualizes winners by year and starting position, with point size encoding track length. A point chart shows car maker finishes. The visualizations use the vega-lite-api with D3.js for data loading. Interactive selections allow clicking on tracks to filter displays. The map uses topojson data for U.S. states, while CSV datasets provide track locations and race statistics.

Loading thumbnail…

Nascar Dashboard I- Just Plots

This dashboard presents four NASCAR data plots: a map of track locations, a bar chart of starts before first wins, a stacked bar chart of top drivers by track, and car maker finishes. It uses the Vega-Lite API with `vl.markCircle`, `vl.markBar`, and `vl.layer` to render the visualizations. The map uses an Albers USA projection from a topojson file, while other plots pull data from remote CSVs. Interactive multi-selection via `vl.selectMulti` filters points and bars by track name, adjusting opacity for highlighted marks.

Loading thumbnail…

NASCAR Most Starts Before First Win, Dropdown Added

This bar chart displays NASCAR drivers ranked by the number of starts before their first career win, with bars colored by the track where that win occurred. A dropdown menu allows filtering to show only drivers who won at a selected track, with non-matching bars faded via opacity. Hovering reveals tooltips with the driver, track, and start count. The visualization uses the vega-lite-api library with vega, vega-lite, and a d3.csv loader, sourcing data from a gist of NASCAR race records from 1975 to 2003.

Loading thumbnail…

NASCAR Winners by Starting Position, Dropdown Added

This scatterplot shows NASCAR winners’ starting positions across race years from 1975 to 2003, with each point colored by track name and sized by track length. A dropdown menu filters the view to a single track, dimming non-selected points. The visualization is built with Vega-Lite and D3 v5, using `vl.selectSingle` and `vl.menu` for the interactive filter, and it loads data from a CSV via `d3.csv` to encode categorical colors and quantitative positions.

Loading thumbnail…

NASCAR Car Maker Finishes, Dropdown Added

This scatterplot visualizes NASCAR car maker finishes from 1975 to 2003, with circles sized by count of instances for each finish. A dropdown menu allows filtering by individual track, changing point colors to match track-specific palettes from other visualizations. The chart uses Vega-Lite API with `vl.selectSingle` and `vl.menu` for interactive filtering, `vl.markPoint` for rendering, and `vl.tooltip` for hover details. Data is loaded from a CSV via `d3.csv`.

Loading thumbnail…

NASCAR Track Map

This map shows the locations of 27 NASCAR tracks that hosted races between 1975 and 2003. Each circle marks a track, colored by a categorical scale, and hovering reveals the track’s name, type, length, status, and driver with the most wins. The visualization uses Vega-Lite and vega-lite-api to layer an Albers USA projection of U.S. states with a circle mark layer, and includes a dropdown menu for filtering by track name. Data is loaded from a CSV via d3.csv.

Loading thumbnail…

Plot of NASCAR Winners by Starting Position

This scatterplot visualizes NASCAR winners from 1975 to 2003 by starting position across race years, with points colored by track name and sized by track length. Larger dots, such as Talladega Superspeedway, reveal patterns where winners start further back compared to shorter tracks like Martinsville. The visualization uses vega-lite-api with d3.v5 to load CSV data, while a single-selection brush and tooltip displaying driver and track enhance interactivity. The config.js file customizes axis and label appearance for improved readability.

Loading thumbnail…

NASCAR Car Maker Finishes, Frequency- Filter WIP

This scatterplot shows NASCAR car makes and their race finishes from 1975–2003, with circle size encoding the frequency of each finish count for a given make. Using vega-lite-api and d3.v5, it loads external CSV data and renders points with a tooltip detailing finish value and count. The markup includes commented filter and color encodings for future track selection, and the visualization is built through Vega-Lite’s markPoint and encoded size, x, y, and tooltip channels.

Loading thumbnail…

Fork of Fork of Boston Housing Dataset Part I

This dashboard visualizes NASCAR statistics through five linked views: a U.S. map of track locations, a bar chart of starts before first wins, a stacked bar chart of top winners split by track, and car maker finish distributions. The visualizations use the vega-lite-api to construct marks like `markCircle`, `markBar`, and `markGeoshape` with `vl.longitude()`, `vl.latitude()`, and `vl.topojson`. Data is loaded asynchronously via `d3.csv` from remote gist URLs. A legend is explicitly hidden using `.legend(null)`.

Loading thumbnail…

Fork of NASCAR Car Maker Finishes, Frequency- Filter WIP

This scatterplot displays NASCAR car makes and their race finishes from 1975 to 2003, with circle size indicating frequency of each finish. The visualization uses Vega-Lite API with d3.csv for data loading, encoding track names as colors through a scale with custom domain and range. A tooltip provides detailed counts of each finish per make. The code prepares for interactive filtering by track, where selecting a track would recolor the dots to match that track's designated color across other visualizations.

Loading thumbnail…

Plot of Top 10 NASCAR Winners colored by Track

This bar chart visualizes the top 10 NASCAR drivers by total wins between 1975 and 2003, with each bar segmented and colored by the specific tracks where those wins occurred. A tooltip reveals the track name and win count for each segment. The visualization uses Vega-Lite API with d3.v5 to fetch CSV data, filter for top drivers via an `IsInTop10` field, and apply a custom color scale for each track. The chart’s stacked bars highlight the distribution of victories across different racetracks for each driver.

Loading thumbnail…

Fork of NASCAR Most Starts Before First Win

A fork of the NASCAR Starts Before First Win visualization, this bar chart shows the number of race starts each driver took before their first victory. Each bar is colored by the track where the driver won, and hovering reveals the driver, track, and start count in a tooltip. Clicking a track selects all bars associated with it, dimming non-matching bars through Vega-Lite’s selectMulti and opacity encoding. The chart uses Vega-Lite v4, D3 for CSV loading, and the vega-tooltip handler, with data sourced from a NASCAR race dataset covering 1975-2003.

Loading thumbnail…

NASCAR Statistics Dashboard

This dashboard presents a comprehensive view of NASCAR race statistics from 1975 to 2003, combining multiple visualization types to explore driver performance, track characteristics, and car manufacturer finishes. The interface integrates a scatter plot with interactive dropdown controls for examining different race metrics, a color-coded map showing track locations, stacked bar charts displaying top winners, and additional bar and point charts. Built with React and D3, the visualizations use SVG rendering, with the map employing d3.geoPath for geographic display and Vega-Lite APIs for several chart types. The scatter plot includes hover interactions on its color legend to highlight specific tracks, while tooltips provide detailed race information.

Loading thumbnail…

NASCAR Scatterplot With Dropdown, Filter

This interactive scatterplot displays NASCAR race winner statistics from 1975 to 2003, plotting year on the x-axis against a user-selectable y-axis metric, including starting position, payout, caution flags, lead changes, and winning time. A dropdown menu from ReactDropdown enables switching between these attributes, while points are colored by track name using a d3.scaleOrdinal color scale. Hovering over the color legend highlights data points for a selected track and fades others to 12% opacity. The visualization uses d3.scaleTime and d3.scaleLinear scales, renders SVG circles via React components, and loads CSV data with d3.csv.

Loading thumbnail…

NASCAR Most Starts Before First Win

This bar chart shows the number of NASCAR race starts each driver needed before achieving their first win, with bars colored by the track where that victory occurred. Hovering over a bar reveals the driver’s name, the specific track, and the start count. Built with Vega-Lite and d3.v5, the visualization loads CSV data from a GitHub Gist and uses a custom color scale with tooltips via vega-tooltip. The chart is configured to filter bars by selected track when integrated into a dashboard.

Loading thumbnail…

NASCAR Dashboard Legend

This dashboard legend lists 27 NASCAR track names, each paired with a colored dot to ensure consistent color mapping across other visualizations in the dashboard. The SVG rendering uses d3.scaleOrdinal with a manually defined color array to assign distinct fills to the circles, while text labels display the track names in black. The code appends the colored circles and labels as separate selections, positioning them with incremental y-coordinates inside a white rectangular frame with a black border.

Loading thumbnail…

Grid Idea 1

This dashboard mockup outlines a NASCAR statistics interface with a header spanning the full width above six equal-sized placeholder panels arranged in a grid. Using CSS Grid’s `grid-template-rows` and `grid-template-columns` set to three equal fractions, the layout assigns the first child a `grid-column: span 3` to create the wide title bar. The remaining plot and legend divs fill the cells with flexible `1fr` spacing, though the code contains no interactive functionality or data bindings.

Loading thumbnail…

Grid Idea 2

This example demonstrates a responsive CSS Grid layout that organizes seven placeholder visualization areas into a structured dashboard. On larger screens, the grid uses named template areas to arrange a header, main content regions, and navigation blocks across three columns and three rows. At narrower viewport widths, a media query reflows the layout into a single column, stacking all sections vertically. The implementation uses pure HTML and CSS Grid properties including `grid-template-areas`, `grid-template-rows`, `grid-template-columns`, and media queries, with no JavaScript or external libraries.

Loading thumbnail…

Fork of Scatter Plot with Menu for ILINet Flu Surveillance Data

This interactive scatter plot displays ILINet flu surveillance data, showing state-level weekly observations from 2015 onward. Each point represents a state in a given week, with the x-axis fixed to week of the year and the y-axis determined by a user-selected field (ILI percentage, ILI total, providers, or total patients). Color encodes the year, while circle size maps to the number of ILI patients, revealing seasonal patterns where larger points cluster during flu season. Built with D3.js and React, the visualization uses SVG rendering with scales for position, size, and ordinal color, plus a dropdown menu to switch the y-axis attribute. Data originates from the CDC FluView Interactive dataset.

Loading thumbnail…

NASCAR Winners Plot with Menu

This interactive scatter plot displays NASCAR race statistics, comparing race years against selectable metrics such as start position, payout, track length, or caution flags. A dropdown menu updates the y-axis attribute dynamically, while circle color encodes track name and size encodes race length. Built with React and D3 v5, it uses scaleLinear, scaleOrdinal, and CSV-loaded race data with SVG rendering for marks and axes.

Loading thumbnail…

Fork of Vega-Lite API Template 8

This visualization uses a Vega-Lite API spec to render two scatter plots of UCI Auto MPG data, with points colored by vehicle class. The main chart (drawn via vega-lite-api) maps the fields "8" and "10" to axes, while a second, smaller repeat-plot cycles through columns and rows for facet exploration. The interface includes a config for dark axis labels and a tooltip handler from vega-tooltip. Data is loaded asynchronously via `d3.csv`, and both charts are embedded in a wrapper using SVG rendering.

Loading thumbnail…

Fork of Scatter Plot with Menu for ILINet Flu Surveillance Data

This interactive scatter plot displays ILINet flu surveillance data, showing state-level weekly observations from 2015 onward. Each point represents a state in a given week, with the x-axis fixed to week of the year and the y-axis determined by a user-selected field (ILI percentage, ILI total, providers, or total patients). Color encodes the year, while circle size maps to the number of ILI patients, revealing seasonal patterns where larger points cluster during flu season. Built with D3.js and React, the visualization uses SVG rendering with scales for position, size, and ordinal color, plus a dropdown menu to switch the y-axis attribute. Data originates from the CDC FluView Interactive dataset.

Loading thumbnail…

Fork of Line Chart for ILINet Flu Surveillance Data

This interactive visualization explores ILINet flu surveillance data across U.S. states using multiple coordinated views. A scatter plot maps weekly ILI percentages against weeks of the year, using color to distinguish years and circle size to encode total patient counts. A U.S. map, bar chart, and curve chart provide additional perspectives on regional and temporal patterns. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, `scaleBand`, and `geoPath` to render SVG marks, with dropdown menus to select different data attributes. The data is loaded from a CSV source via d3.csv.

Loading thumbnail…

Fork of Fork of Fork of Fork of Plot of NASCAR Winners by Starting Position

This visualization displays NASCAR winners’ starting positions as a bar chart, filtered to show only Daytona International Speedway, with bars sized by win count and colored by track name. It uses Vega-Lite API through d3.v5, loading data from a CSV file, and encodes the x-axis by driver, y-axis by count of wins, and tooltips for additional detail. The chart is rendered with Vega and Vega-Lite, configured with custom axis styling and a fixed bar size.

Loading thumbnail…

Plot of NASCAR Winners by Payout

This scatterplot displays NASCAR race winners from 1975 to 2003, plotting the year of the race against the payout amount. Points are colored by track name and sized by track length, revealing patterns such as larger superspeedways producing winners from further back in the field. The visualization uses d3.v5 for data loading via `d3.csv` and the Vega-Lite API to encode the marks, with a custom tooltip showing driver and track information. The data comes from a GitHub-hosted winners.csv dataset.

Loading thumbnail…

Fork of Plot of NASCAR Winners by Starting Position

A scatterplot shows NASCAR winners' starting positions over time, with each point colored by track name and sized by track length, revealing that larger tracks like Talladega Superspeedway allow winners from farther back in the field than short tracks like Martinsville. The interactive visualization, built with Vega-Lite and the vega-lite-api framework, uses brush selection on the x-axis and click filtering on color to explore subsets, while data is loaded via D3's `csv` from a GitHub-hosted NASCAR dataset spanning 1975 to 2003.

Loading thumbnail…

Plot of NASCAR Winners by Starting Position

This scatterplot displays NASCAR race winners from 1975 to 2003, plotting each winner’s starting position against the race year. Points are colored by track name and sized by track length, revealing patterns such as larger ovals like Talladega producing winners from farther back in the field, while short tracks like Martinsville reward front-runners. The visualization uses d3.csv to load the winners dataset and builds the chart with Vega-Lite API, encoding positions, colors, sizes, and tooltips. A custom config ensures axis and label styling for readability.

Loading thumbnail…

Plot of NASCAR Winners by Number of Lead Changes

This visualization plots NASCAR race winners by year and number of lead changes, with each circle colored by track name and sized by track length. The scatterplot uses Vega-Lite’s API for encoding, with `vl.x().fieldN('Year')`, `vl.y().fieldQ('Lead Changes')`, and `vl.size().fieldN('Length')` to differentiate track dimensions. Data is loaded asynchronously from a CSV via D3’s `csv` function, then rendered using Vega’s SVG view. The tooltip, built with `vega-tooltip`, displays the driver and track name on hover. Colors and sizes reveal patterns, such as larger ovals enabling more overtaking than short tracks.

Loading thumbnail…

Plot of NASCAR Drivers by Payout

This scatterplot shows NASCAR winners by payout across years, with each point representing a driver’s finish, colored by track name and sized by track length. The visualization reveals patterns such as larger tracks yielding winners from farther back in the field, using d3 and vega-lite’s API to encode data fields for position, payout, track, and length. The code loads CSV data via d3.csv, renders circles with markCircle, and supports tooltips for driver and track details, drawing from a NASCAR dataset spanning 1975 to 2003.

Loading thumbnail…

Fork of Fork of Fork of NASCAR Car Maker Finishes, Frequency

This scatterplot displays the distribution of NASCAR finishing positions for each car manufacturer. Each point represents a single race finish, with the x-axis showing the make and the y-axis showing the position. The visualization uses a Vega-Lite specification via the `vega-lite-api` and renders with the `d3` library. The data is loaded from a CSV file using `d3.csv`. Point size encodes the frequency of finishes at each position for a given make.

Loading thumbnail…

Fork of Fork of NASCAR Car Maker Finishes, Frequency

A scatterplot displays NASCAR car maker finishes, with each point sized by the frequency of that finish value. The visualization encodes the categorical car maker on the x-axis and the quantitative finish position on the y-axis, while point size represents frequency. Built with Vega-Lite API and D3, it loads CSV data from a GitHub gist and renders a full-window SVG plot with customized axis and label styling for improved readability.

Loading thumbnail…

Fork of NASCAR Starts Revised - Hover Capability Added

This bar chart displays the number of races each driver competed in before achieving their first NASCAR win, using data spanning from 1975 to 2003. The visualization, built with D3 v5 and rendered as SVG, enhances a prior version by adding interactive hover tooltips via the `d3.tip` library. When hovering over a bar, a tooltip shows the driver's starts, win year, and track. A scale band maps drivers along the x-axis, while a linear scale maps starts on the y-axis.

Loading thumbnail…

Fork of NASCAR winners by starting position, split by year

This visualization plots NASCAR race winners by their starting position across years, with each circle representing a win. The y-axis shows the starting position, while the x-axis spans the years, with track names encoded by color. A tooltip reveals the driver and track on hover. The code uses the Vega-Lite API with the `vl.markCircle` method, configured through the `viz.js` file, and loads CSV data asynchronously via d3’s `csv` function. Rendering is handled by Vega-Lite in SVG mode, with custom styling applied through the `config.js` file.

Loading thumbnail…

NASCAR Stats Dropdown (WIP)

A bar chart displays career statistics for ten NASCAR drivers, ranked by a metric chosen from a dropdown menu (Starts, Wins, Top 5s, Top 10s, or Poles). The chart updates the bars and x-axis label when the selection changes. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and CSV data loaded via `d3.csv`.

Loading thumbnail…

Fork of NASCAR Car Maker Finishes, Frequency

This fork visualizes NASCAR car maker finishes as a scatterplot, with each circle representing a finish position for a specific make. The color and size of each circle encode frequency, revealing which manufacturers dominate top finishes. The visualization uses Vega-Lite API with a d3.csv loader to fetch the data from a GitHub gist. Rendering is handled through vega-lite’s markCircle encoding, with custom config for axis styling and a tooltip handler from vega-tooltip.

Loading thumbnail…

Baseball Scatter Plot, Hits and Homeruns, Brushing Added

This scatter plot visualizes the relationship between hits and home runs for baseball players, colored by league (red for AL, blue for NL, gold for FL). Viewers can brush horizontally along the x-axis to zoom into specific ranges of hits, triggering smooth transitions that rescale the axis and reposition circles. Built with D3 v4, the example uses `d3.brushX`, `d3.scaleLinear`, and `d3.axisBottom` to implement interactive zooming over the CSV dataset. The SVG rendering includes clipping to contain brushed selections within the plot area.

Loading thumbnail…

Baseball Scatter Plot, Hits and Homeruns, Iterated

This scatter plot visualizes the relationship between hits and home runs in baseball, with each dot representing a player-season. The chart displays data from three leagues—American, National, and Federal—distinguished by color and identified in a legend. Using D3.js (v6) with SVG rendering, the visualization loads a CSV dataset via `d3.csv`, then maps hits and home runs to linear scales with `scaleLinear`. Points are drawn as semi-transparent circles, and axes are generated using `axisLeft` and `axisBottom` to display the quantitative values.

Loading thumbnail…

Interactive Baseball Batting Scatterplot

This interactive scatterplot visualizes over a century of batting statistics from the Baseball Dataset (1900–2015), letting users explore relationships between offensive metrics. Dropdown menus powered by ReactDropdown dynamically select which attribute appears on each axis, with points colored by league (AL, NL, FL). The visualization uses React with D3 v5’s `scaleLinear` and `extent` for axes, rendering SVG circles via custom React components that leverage D3’s `csv` loader for data parsing.

Loading thumbnail…

NASCAR Car Maker Finishes, Frequency

This visualization shows the frequency of finishes for NASCAR car makers, with each circle representing a finish position and its size and color encoding the frequency of that result. Built with Vega-Lite and the vega-lite-api wrapper, it plots car makers on the x-axis against finish positions on the y-axis, using a circle’s size and color intensity to convey how often each maker achieved a given finish. The data is loaded from a remote CSV via d3.csv, and the chart is rendered as an SVG, with custom axis and label styles defined in a config object to improve readability.

Loading thumbnail…

NASCAR winners by starting position, split by year

This visualization shows NASCAR race winners’ starting positions across years, with each dot representing a single race and its driver’s grid position. A circular mark with 50% opacity encodes each race, while tooltips reveal the driver and track name. The data comes from a CSV file loaded via `d3.csv`, and the chart is rendered using Vega-Lite’s API. The visualization uses `vl.markCircle`, `vl.x().fieldN('Year')`, and `vl.y().fieldQ('Start')` to map the fields, with color fixed to a constant red and the chart configured for full-window fit via `autosize`.

Loading thumbnail…

NASCAR Starts Revised - Hover Capability Added

This bar chart shows the number of races each NASCAR driver competed in before their first win, using data covering 1975–2003. The chart uses a linear scale for the y-axis and a band scale for drivers on the x-axis, with each bar representing a driver. Hovering over a bar triggers a tooltip built with the d3-tip library, displaying the driver’s start count, win year, and track name in an SVG context. The visualization is rendered with D3 v5.

Loading thumbnail…

NASCAR Bar Chart, Starts Before First Win

This bar chart visualizes the number of race starts each NASCAR driver accrued before achieving their first career victory, using a dataset spanning 1975 to 2003. The horizontal bars are sorted by count, with Michael Waltrip requiring 463 starts, dramatically exceeding all others. Built with D3 v5, the visualization uses d3.csv to load precomputed data from a CSV file, then applies d3.scaleLinear for the x-axis and d3.scaleBand for the categorical driver names on the y-axis, rendering bars as SVG rectangles.

Loading thumbnail…

Baseball Scatter Plot Showing Hits and Homeruns

A scatter plot visualizes the relationship between hits and home runs for baseball players, with each dot colored by league affiliation: red for the American League and blue for the National League. The plot uses D3's `csv` loader to fetch data from a GitHub gist, `scaleLinear` for the axes, `extent` to set domains, and SVG circles with opacity for rendering. Axis labels are added via `axisLeft` and `axisBottom`, with custom text annotations for "Hits" and "Homeruns".

Loading thumbnail…

NASCAR Scatter Plot Showing Finishing Position by Make

This scatter plot shows the finishing position of NASCAR drivers by car make, with each circle representing a race result. The x-axis lists ten car manufacturers, while the y-axis displays finishing position, with lower points indicating better outcomes. The visualization uses semi-transparent circles to reveal the density of results for each make, making performance patterns visible across the 1975-2003 dataset. The chart is built with D3 v6, using `scalePoint` for the categorical axis, `scaleLinear` for position, and `axisLeft` and `axisBottom` to render the axes.

Loading thumbnail…

Post Office Scatter Plot

This scatter plot displays the latitude and longitude of thousands of US post offices, with each semi-transparent circle representing a single location. Built with D3 v6 and SVG, it maps the dataset’s geographic coordinates onto linear scales using `d3.scaleLinear` and `d3.extent`, rendering circles with a radius of two pixels. The axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the data is loaded asynchronously from a CSV file hosted in a GitHub gist. The visualization reveals the density of post offices across the continental United States, with clusters forming along the East and West coasts.

Loading thumbnail…

Loading and Parsing Baseball Data

This example demonstrates loading and parsing MLB batting statistics from 1901 to 2015, displaying the dataset’s size in kilobytes, row count, and column count in large text. It uses `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to measure the raw data length. The visualization is minimal, with the parsed results rendered inside a `<pre>` element using D3.js v5.

Loading thumbnail…

Loading and Parsing NASCAR Data

This example demonstrates how to load and parse NASCAR race data from a CSV file using the D3.js library. It displays the dataset’s size in kilobytes, the number of rows, and the number of columns in large text on a web page. The code uses `d3.csv` to fetch the remote CSV file, `d3.csvFormat` to calculate the data size, and accesses the dataset’s `length` and `columns` properties. The result is presented in a `<pre>` element styled with a large font size.

Loading thumbnail…

Loading and Parsing Post Office Data

This example displays a summary of a parsed dataset of historical United States post office locations, showing the data’s size in kilobytes, the number of rows, and the number of columns. Using the D3.js library (version 5), the code loads a CSV file from a GitHub raw URL via `d3.csv`, then computes the formatted size with `d3.csvFormat`. The results are rendered as plain text inside a `<pre>` element, with the font size enlarged via CSS.

Loading thumbnail…

SVG First Attempt Fork, inpired by the Windows 95 Logo

This example recreates the Windows 95 logo using only colored SVG `<rect>` elements positioned and rotated on a darkcyan background. The rectangles form the iconic four-pane window and a staggered pixel-like grid of colored and black squares, suggesting the logo’s waving flag effect. The code uses raw SVG attributes (`x`, `y`, `width`, `height`, `fill`, and `transform="rotate(-67)"`) within an inline `<svg>` container, with no JavaScript or external libraries. It demonstrates a beginner’s manual approach to geometric composition and pseudo-3D perspective through rotation.