S

samemurk21

@samemurk21·19 public vizzes

Loading thumbnail…

Top 100 Songs w/ Menus + Color Legends + Filter

This interactive scatter plot visualizes the relationship between musical attributes of the top 100 Spotify songs of 2018, using dropdown menus to select the X and Y axes and a color filter. The code leverages React and D3 v5 APIs including `scaleLinear`, `scaleOrdinal`, and `extent` for scales, rendering SVG circles from the CSV data. A color legend highlights filtered values, and hovering over legend items fades non-matching data points, with tooltips showing exact values.

Loading thumbnail…

Top 100 Songs w/ Menus + Color Legends + Filther

This interactive scatterplot explores relationships between musical attributes of the top 100 Spotify tracks of 2018, plotting selected variables on the x- and y-axes via dropdown menus. A third dropdown filters points by color based on categorical attributes like key or mode, with a color legend that highlights matching points on hover. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles to render the data loaded from a CSV via `d3.csv`.

Loading thumbnail…

The top 100 songs of 2018

This scatterplot explores the relationship between danceability and duration (in milliseconds) for the top 100 songs of 2018, with each bar representing a track and colored by its musical mode (major or minor). Hovering reveals the song’s name. The visualization uses Vega-Lite API with D3.js to fetch CSV data from a GitHub gist, and applies a binned bar mark with semi-transparency, customized axes, and tooltip handling via vega-tooltip.

Loading thumbnail…

Top 100 Songs w/ Menus & Color Legends

This interactive scatterplot shows relationships between musical attributes of Spotify’s top 100 songs of 2018. Users can select any attribute—such as duration, energy, danceability, or tempo—for the x- and y-axes using React dropdown menus. Point color encodes each track’s mode (major or minor) via a d3.scaleOrdinal color legend. The visualization is built with React and renders as SVG using d3.scaleLinear for axes and custom React components for marks, axes, and legends. Data comes from a CSV file fetched with d3.csv.

Loading thumbnail…

Stylized Bar Chart - Top 100 Songs Of Spotify

This visualization displays the danceability scores of the top 100 Spotify songs from 2018, ranked by artist as horizontal bars. Each bar’s length encodes the numeric danceability value using d3.scaleLinear, while artist names are positioned along the y-axis with d3.scaleBand. The React components render SVG elements, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded via d3.csv from a GitHub-hosted dataset, and tooltips appear on hover using native SVG title elements.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays populations for the top 20 smallest countries using data from the United Nations World Population Prospects 2019, rendered as a React component with SVG. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with custom tick formatting converting values to billions via d3.format. The visualization depicts horizontal bars without axes, styled with the Poppins font and a uniform blue color scheme, and includes tooltips showing exact population values on hover.

Loading thumbnail…

Top 100 Songs w/ Menus

A scatterplot shows the relationship between two musical attributes for Spotify’s top 100 songs of 2018, with dropdown menus letting viewers select which attribute appears on each axis. The code uses React hooks (useState, useData) to manage selections, d3.scaleLinear and d3.extent for scales, and custom AxisBottom/AxisLeft components to render SVG ticks. Circles are drawn with d3.csv data, and ReactDropdown provides the menu interface.

Loading thumbnail…

Top 100 songs of 2018

A scatterplot maps the top 100 songs of 2018 by danceability on the x-axis and energy on the y-axis, with each point’s color encoding liveness and tooltips revealing song names. The visualization uses Vega-Lite API (vl) to define the circle marks and encodings, while D3.js (d3.csv) loads the dataset from a GitHub gist. The chart fills the browser viewport with a custom config adjusting axis and label styling.

Loading thumbnail…

Students Performance in Exams

This example displays metadata for the Students Performance in Exams dataset from Kaggle, showing its size in kilobytes, row count, and column count. The page loads and parses a CSV file using d3.csv, then formats the results into a large text message rendered in a <pre> element. It demonstrates both the promise-based d3.csv approach and an alternative async/await fetch method with d3.csvParse, though the fetch code remains commented out.

Loading thumbnail…

Top 100 Songs of 2018

This example displays summary statistics for the Top 100 Songs of 2018 dataset, showing the file size in kilobytes, row count, and column count. It loads the CSV data using `d3.csv` and formats the summary with `d3.csvFormat` to measure the byte size of the data. The code also includes commented-out alternatives using `fetch` with async/await and a promise-chain "pyramid of doom" approach, demonstrating different methods for loading and parsing CSV data in D3 v5.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basics of loading and parsing comma-separated values in the browser. It fetches a CSV file containing CSS named colors from a remote URL and uses d3.csv to parse the data, then displays a text summary of the file’s size in kilobytes, row count, and column count. The code also includes commented-out alternatives using the Fetch API with async/await and d3.csvParse, as well as nested promise callbacks, to illustrate different parsing approaches. The output is rendered as plain text inside a large <pre> element.

Loading thumbnail…

Student Performance Between Male & Female

This scatterplot compares male and female student performance by plotting math scores against writing scores, with gender encoded by color and parental education level available via tooltip. The visualization reveals that males tend to score higher in math, while females lead in writing and reading, with two notable female outliers from low-education backgrounds. Built with React and Vega-Lite API (vl), the code loads CSV data via d3.csv from a GitHub gist, uses a drop-down selector, and renders an interactive SVG with a custom dark theme and tooltip handler.

Loading thumbnail…

Untitled

This example presents a horizontal bar chart displaying the top 10 most populous countries, based on United Nations World Population Prospects 2019 data. The visualization shows population values through bar lengths, with a tooltip revealing the exact population on hover. Built with React, the chart uses d3.csv to load and parse the data, filtering the top 20 entries. The implementation comprises three components: AxisBottom renders x-axis ticks using xScale.ticks(), AxisLeft draws y-axis labels, and Marks generates the rectangular bars with widths proportional to population values. Notably, the chart includes axes but omits their tick labels, creating a deliberately sparse presentation.

Loading thumbnail…

Untitled

This bar chart displays the top 10 most populous countries in 2020, using horizontal bars to compare population sizes. The visualization loads data from a United Nations World Population Prospects 2019 CSV file via d3.csv, then renders it with React and SVG. The code uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.format to abbreviate tick labels (e.g., converting billions to "B"). Each bar includes a native SVG title tooltip showing the population value, with axes and labels rendered as custom React components.

Loading thumbnail…

Student Performance

This visualization compares student performance in math and reading scores, colored by gender, with tooltips revealing parental level of education. Each point represents an individual student from the Kaggle dataset, plotted without a zero baseline to emphasize score distribution. The chart is built using Vega-Lite API within a D3.js v5 framework, loading CSV data via d3.csv and rendering as an SVG with custom configuration for axis styling and tooltip formatting.

Loading thumbnail…

Graduate Admission

A horizontal bar chart ranks the statistical influence of six graduate admission criteria, with undergraduate GPA (40.20 percent) as the most significant factor and Statement of Purpose (0.05 percent) as the least. The visualization uses d3.v5 with SVG rendering, employing `scaleLinear` for the x-axis percentages and `scaleBand` for the categorical y-axis labels. Data comes from a UCLA graduate admissions dataset on Kaggle, loaded from CSV via `d3.csv`. The chart omits axis domain lines and tick marks for a cleaner presentation, while green bars and a title annotation highlight each requirement’s relative weight.

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data from the Auto MPG dataset, showing miles per gallon versus horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API in JavaScript, which programmatically constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously from a CSV URL using D3’s `csv` function, and the chart fills the viewport with a fit autosize scheme. Tooltips are enabled via the Vega Tooltip handler, and custom axis and label styles are applied through a shared configuration object.

Loading thumbnail…

Graduate Admission

This example loads a graduate admission dataset from a remote CSV file and displays basic metadata about it. Using d3.csv, it reads the data and reports the file size in kilobytes, the number of rows, and the number of columns. The interface is a simple HTML pre element that renders the statistics as plain text, with no chart or visual encoding. The code also includes a commented-out alternative using fetch, async, and await with d3.csvParse, though the active path relies on d3’s promise-based CSV loading.

Loading thumbnail…

Hey its Mircalin

A stylized smiley face rendered as an SVG in React, with yellow circular head, blue rectangular eyes, and pink-stroked details. The face is centered via a D3 translate transform, while blue eye shapes and a white-pupil overlay sit above a D3-generated mouth arc created with `arc()`. Static geometry uses fixed pixel offsets, with React constructing the SVG elements and D3 v5 providing the arc path calculation.