T-Reiser

@T-Reiser·14 public vizzes

Scatter Plot with Menus of Top 5000 TMDB Movies showing various correlations

This interactive scatter plot visualizes correlations among the top 5,000 TMDB movies, with dropdown menus letting users select budget, popularity, revenue, runtime, or vote average for either axis. Semi-transparent, colored circles reveal overlapping data points and density clusters. D3 v6 handles the scalable axes, animated transitions, and menu-driven updates, while SVG renders the chart.

Dec 8, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between a vehicle's acceleration and its horsepower. Each point in the scatter plot represents a car model, with tooltips revealing the car's name. Built using Vega-Lite's API for declarative charting, the visualization loads auto-mpg.csv data via d3.csv. The chart is rendered to SVG with custom axis styling and configured to fit the browser window.

Oct 28, 2021

Loading thumbnail…

Scatter Plot with Menus Including Species

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements as well as species categories. Two dropdown menus, built with a reusable D3 `menu` module, let viewers change which quantitative or categorical attribute appears on the x-axis and y-axis. The chart uses D3 v6 with SVG rendering, implementing a reusable `scatterPlot` function that dynamically rescales axes using `scaleLinear` or `scalePoint` depending on data type, and animates circle positions and radii via `transition` and `selection.join`. Data loads from a GitHub-hosted CSV file.

Oct 28, 2021

Loading thumbnail…

Brushable bar chart of total Olympic Medals from 2020 Tokyo Olympics

This brushable bar chart displays the total Olympic medals earned by each country at the 2020 Tokyo Olympics. It uses a mini overview to brush a range of medal counts, which in turn highlights the corresponding bars in the main chart, providing a focused comparison of top-performing nations. The visualization is built with D3.js v3 and rendered as SVG, using `d3.scale.linear` for axial scaling and `d3.svg.axis` for axes. Data is loaded from a CSV file, and the chart is inspired by an example by Ming Liu.

Oct 21, 2021

Loading thumbnail…

Improved D3 Scatter Plot of Top 5000 TMDB Movies showing Runtime(X) vs. Budget(Y)

This D3 v6 scatter plot visualizes the top 5000 TMDB movies, comparing runtime on the x-axis against budget on the y-axis using SVG circles. It uses `d3.scaleLinear` for both axes and `d3.scaleSequential` with the PuRd interpolator to color the semi-transparent points, revealing density where overlapping data occurs. The axes are generated with `axisLeft` and `axisBottom`, with margins adjusted to display full y-axis values. Data is loaded as CSV and parsed with numeric runtime and budget values.

Sep 28, 2021

Loading thumbnail…

Loading and Parsing TopTMBD.csv

Loading a TMDB movie dataset from a gist, this example uses d3.csv to parse comma-separated values and display the file size, row count, and column count in a large text element. The code also includes commented alternatives using fetch with async/await and nested promises. The data includes quantitative fields like budget and revenue, categorical genres, and release dates, while the visualization highlights parsing results rather than plotting the attributes themselves.

Sep 28, 2021

Loading thumbnail…

Bar Chart of Top Video Game Sales

This bar chart displays the top 20 video games by global sales in millions, ranking them from highest to lowest. It uses d3.scaleLinear for the x-axis (sales) and d3.scaleBand for the y-axis (game names), with axes rendered via d3.axisLeft and d3.axisBottom. Data is loaded from a CSV file using d3.csv, and the chart is drawn as SVG rectangles. The code formats sales ticks with d3.format and labels the chart with a title and x-axis caption.

Sep 21, 2021

Loading thumbnail…

D3 Scatter Plot of Flavors Of Cocoa showing CocaoPercent (X) vs. Rating (Y)

A D3 scatter plot visualizes the relationship between cocoa percentage and flavor rating for chocolate bars, with each circle representing a sample. The x-axis maps the cocoa percentage while the y-axis shows the ratings, revealing potential correlations. Built with d3.v6, the code uses d3.csv for data loading, d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.axisLeft/axisBottom for rendering. Data comes from the FlavorsOfCacao.csv dataset, rendered as SVG circles sized with a fixed radius of five pixels.

Sep 15, 2021

Loading thumbnail…

D3 Scatter Plot of Top Video Game Sales showing Release Year (X) vs. Global Sales in Millions (Y)

This D3 scatter plot visualizes top video game sales, mapping release year on the x-axis against global sales in millions on the y-axis. Each circle represents a game, with its position determined by the `scaleLinear` scales and `extent` functions, while `axisLeft` and `axisBottom` render the axes. The SVG is sized to the browser window, and data is loaded from a CSV via `d3.csv`, with rows parsed to convert numeric strings to numbers. The plot fills the viewport, allowing exploration of sales trends across gaming history.

Sep 15, 2021

Loading thumbnail…

D3 Scatter Plot of Top 5000 TMDB Movies showing Runtime(X) vs. Budget(Y)

This scatter plot visualizes the relationship between runtime and budget for the top 5000 TMDB movies, sourced from a CSV file loaded via the `d3.csv` API. Each circle represents a movie, with its x-position mapped to runtime and y-position to budget, using `d3.scaleLinear` and `d3.extent` to compute scales. The SVG rendering uses `d3.select` to append the chart, along with `d3.axisLeft` and `d3.axisBottom` for axes. The plot fills the browser window, with axis tick labels sized at 24 pixels for readability.

Sep 15, 2021

Loading thumbnail…

Loading and Parsing VGSales.csv

This example loads and parses the VGSales.csv dataset, displaying the raw file size, row count, and column count in large text. It shows how D3 fetches and parses CSV data to summarize its structure. The code uses `d3.csv` to load the remote file, then formats the data with `d3.csvFormat` to calculate its size. An alternative approach using `fetch`, `async/await`, and `d3.csvParse` is also included. The dataset, sourced from Kaggle, contains video game sales metrics across global regions.

Sep 7, 2021

Loading thumbnail…

Loading and Parsing FlavorsOfCacao.csv

This example shows a minimal loading and parsing routine for a CSV file containing chocolate bar ratings. It fetches the FlavorsOfCacao.csv dataset from a remote Gist URL and uses the D3 v5 `d3.csv` method to asynchronously ingest the data, then displays the file size in kilobytes, the row count, and the column count as large text in an HTML `<pre>` element. The code also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`, illustrating different parsing approaches.

Sep 7, 2021

Loading thumbnail…

Tyler's Fork of SVG Fundementals

This example shows a stylized tracked vehicle with a sword, constructed from overlapping geometric shapes in SVG. It demonstrates basic SVG fundamentals including circles, rectangles, lines, and a complex path that forms the sword’s blade and handle. The code uses native SVG elements with attributes for fill, stroke, stroke-width, and path data, without any JavaScript libraries. The design appears hand-coded, with the path generated using the SVG path editor tool mentioned in the README.

Aug 31, 2021

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape construction using only native SVG elements—circles, lines, and paths—without additional libraries. It shows two overlapping red and green circles, a navy diagonal line, a curved path fill, and a stroked polyline path on a 960-by-500 canvas. The circles render sequentially, with the green one covering the red center, while commented-out rectangle code remains inactive. The rendering relies directly on SVG’s coordinate system and attributes like `cx`, `cy`, `r`, `stroke-width`, and path `d` syntax, with no JavaScript or data binding involved.

Aug 30, 2021