R

RainismZ

@RainismZ·16 public vizzes

Loading thumbnail…

English Premier League Visualization - Interactive

This interactive line chart tracks the weekly point totals of Arsenal and Tottenham in the 2003-04 English Premier League season, sourced from a football CSV dataset. Two SVG paths represent each team’s cumulative points across 38 weeks, with Arsenal in red and Tottenham in blue. Hovering over a line triggers a D3 event that increases its stroke width to emphasize the selected team, while the chart resizes responsively to the window. The visualization uses D3 v4’s `d3.select` and `d3.line` APIs, with axes scaled via `d3.scaleLinear`.

Loading thumbnail…

English Premier League Visualization - Resize

This line chart tracks the weekly cumulative league points for Arsenal and Tottenham across the 38-game 2003-04 English Premier League season, with Arsenal’s undefeated run finishing at 90 points versus Tottenham’s 45. The graphic uses D3 v4’s `d3.line` and `d3.scaleLinear` to map data from a CSV file, while the SVG elements and axes are redrawn on every window resize via a custom `redraw()` function attached to a `resize` event, updating paths through `enter`/`merge`/`exit` selections. The chart illustrates the widening gap between the two North London rivals throughout the season.

Loading thumbnail…

English Premier League Visualization

This line chart compares the weekly league points of Arsenal and Tottenham across the 38-game 2003-04 English Premier League season, highlighting Arsenal’s unbeaten run and their final 90-point tally against Tottenham’s 45. The graphic renders two distinct lines in red and steelblue, using d3.csv to load the precomputed weekly standings and d3.scaleLinear to map week numbers and points to the SVG canvas. The code builds paths with d3.line, applies axes via d3.axisBottom and d3.axisLeft, and styles the strokes in CSS, with the data sourced from a GitHub CSV.

Loading thumbnail…

D3 v4 - piechart

This donut chart displays the total number of Housing New York projects in each of New York City’s five boroughs, using data from the Department of Housing Preservation and Development. It renders an SVG pie chart with d3.pie and d3.arc, applying a categorical color scale via d3.scaleOrdinal and d3.schemeSet3. Labels are placed along the arcs using SVG textPath elements. The underlying data is loaded from a local CSV file containing borough names and project counts.

Loading thumbnail…

D3 v4 - piechart

This donut chart displays the total number of Housing New York projects in each of New York City’s five boroughs, using data from the Department of Housing Preservation and Development. It renders an SVG pie chart with d3.pie and d3.arc, applying a categorical color scale via d3.scaleOrdinal and d3.schemeSet3. Labels are placed along the arcs using SVG textPath elements. The underlying data is loaded from a local CSV file containing borough names and project counts.

Loading thumbnail…

LA visualization

This stacked bar chart visualizes the funding input for affordable housing projects across Los Angeles communities, broken down by funding source: HCIDLA funded, leverage, and tax-exempt conduit bonds. The chart is built with D3.js v4, using `d3.scaleBand` for the categorical community axis, `d3.scaleLinear` for the monetary value axis, and `d3.stack` to create the stacked segments. Data is loaded via `d3.csv` from a filtered CSV file derived from the HCIDLA Affordable Housing Projects Catalog. The visualization ranks communities by total funding and uses a rotated x-axis label to accommodate the many community names.

Loading thumbnail…

Re-create Marks & Channels Graphic

Four simple SVG shapes—a cross, circle, square, and triangle—stand in a diagonal line, each rendered as a symbol from D3's `d3.symbol()` API. The shapes demonstrate distinct mark types using the `d3.symbolCross`, `d3.symbolCircle`, `d3.symbolSquare`, and `d3.symbolTriangle` generators. Each path is positioned via a `transform` attribute that calculates x-coordinates from an array index and adds a slight vertical offset, while a fixed `size` of 50 by 50 keeps them uniform. The code binds the data array with `selectAll` and `enter`, then applies attributes using `attrs` from d3-selection-multi, running entirely with D3 v4 in an SVG container.

Loading thumbnail…

Basic Scatter Plot

A basic scatter plot displays NBA player statistics from the 2016-17 season, plotting assists per 36 minutes on the x-axis against total rebounds per 36 minutes on the y-axis. Player position—guard, forward, or center—is encoded using color, with a legend included. The visualization is built with D3 v4, using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.legendColor` to render SVG circles and axes. Data comes from a local CSV file containing per-36-minute stats.

Loading thumbnail…

Data Summary

This example displays a text-based summary of a dataset about affordable housing projects in Los Angeles, sourced from DataLA. It lists the total number of rows, columns, and file size, followed by a per-column statistical breakdown. The code loads the CSV data using `d3.csv`, then employs Datalib's `dl.format.summary` function to generate the analysis. The resulting text is rendered into a `<pre>` element using `d3.select` and `append`.

Loading thumbnail…

Data Summary

This example displays a plain-text summary of a tabular dataset, listing the row count, column count, file size, and a per-column statistical breakdown. A CSV containing New York City housing development records is loaded with `d3.csv`, then processed by the `dl.format.summary` method from Datalib to generate the column descriptions. The resulting text is rendered inside a `pre` element appended to the body using standard D3 selections in version 4.

Loading thumbnail…

Data Summary

This visualization displays a plain-text summary of an English Premier League dataset from the 2003–04 season, including row count, column count, file size, and per-column statistics. It loads the CSV with d3.csv and uses Datalib’s format.summary to generate the column breakdown, then renders the result as a <pre> element and logs it to the console. The source data contains match dates, team names, and final and half-time scores.

Loading thumbnail…

Data Summary

This example displays a plain-text summary of a car dataset from the UCI Machine Learning Repository, showing the total row count, column count, file size in kilobytes, and per-column statistics like type, min, max, and mean. The code loads the CSV with `d3.csv`, formats the data with `d3.csvFormat`, and uses Datalib’s `dl.format.summary` to generate the statistical breakdown. The result is rendered in a `<pre>` element and also logged to the browser console.

Loading thumbnail…

Data Summary

This example loads a CSV file of English Premier League match data and displays a text-based summary of the dataset’s structure. It computes and prints the total number of rows, columns, file size, and a per-column statistical overview using the Datalib library’s `format.summary` function. The page renders the summary inside a `<pre>` element via D3 v4’s `d3.csv` and `select().append()`, while also logging the same output to the browser console. The code is designed to be reusable with any CSV by simply changing the file path.

Loading thumbnail…

Data Summary

This visualization presents a plain-text data summary of the Auto MPG dataset, listing the table’s number of rows, columns, and file size before displaying per-column statistical summaries. It loads the CSV using `d3.csv` and formats the output with Datalib’s `dl.format.summary` API, rendering the result as a `<pre>` element on the page. The example works entirely through text, providing a quick structural overview of the data without any graphical charts.

Loading thumbnail…

Data Summary

This example displays a plain-text summary of a car dataset from the UCI Machine Learning Repository, showing the total row count, column count, file size in kilobytes, and per-column statistics like type, min, max, and mean. The code loads the CSV with `d3.csv`, formats the data with `d3.csvFormat`, and uses Datalib’s `dl.format.summary` to generate the statistical breakdown. The result is rendered in a `<pre>` element and also logged to the browser console.

Loading thumbnail…

analysis of ages of visitors

This bar chart visualizes the age distribution of Disneyland visitors in Shanghai in 2016, with percentages for four age brackets from under 25 to over 46. The chart renders as horizontal bars with animated width transitions, using D3 v4's scaleLinear and scaleBand for positioning. Each bar shows its percentage label alongside, and the visualization draws from a Statista-inspired dataset. The SVG is built entirely with D3 selections and transitions, with a purple bar color and white text labels for the age groups.