S

sowbalas

@sowbalas·17 public vizzes

Loading thumbnail…

D3 Example

This example visualizes LeBron James’s basketball statistics across seasons, using stacked bar charts to compare metrics like points, assists, and rebounds per year. Built with D3 v3 in a React framework, it renders SVG elements with animation. The chart employs `d3.layout.stack` for layering, `d3.scale.ordinal` for categorical positioning, and `d3.legend.color` for the interactive color legend. Hovering over legend items filters the bars, while `d3-tip` provides detailed tooltips on mouseover. The data comes from a CSV file with season, stat category, and value columns.

Loading thumbnail…

Radial Dendrogram

This radial dendrogram visualizes the hierarchical structure of NBA teams, organizing conferences, divisions, and teams around a central root node. The code uses D3.js v3 to compute the tree layout and render SVG paths for links and circles for nodes. Clicking a node triggers an animated expansion or collapse of its subtree, with transitions smoothly adjusting the layout. The JSON data structure defines the hierarchy, and the styling separates nodes with white circles and steelblue strokes from gray links. The visualization runs in a React framework.

Loading thumbnail…

Untitled

This visualization shows the locations of soda franchises in four U.S. states—Arizona, Idaho, Nevada, and Utah—with an interactive slider that filters which stores appear based on their opening year. It uses d3.geoAlbersUsa projection with d3.geoPath to render state boundaries from GeoJSON, and appends SVG circles for each store, colored by company (Swig 'n Sweets, FiiZ, or Sodalicious). A range input controls year filtering, with d3's data join handling enter and exit transitions for the circles.

Loading thumbnail…

Untitled

This visualization shows the growth of soda franchise locations across four western U.S. states—Arizona, Idaho, Nevada, and Utah—over time, with each store colored by its parent company (yellow for Swig 'n Sweets, blue for FiiZ, red for Sodalicious). A range slider filters the map to display stores opened up to a selected year. The code uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from TopoJSON, and dynamically joins circles representing store locations from the CSV data into an SVG using D3’s data join and exit selection.

Loading thumbnail…

Interactive pie and bar

This interactive dashboard synchronizes a bar chart and a pie chart to explore categorical frequency distributions across multiple states. Hovering over a bar updates the pie chart and legend to show the breakdown of the selected state’s data into low, mid, and high segments, while moving the mouse away restores the overall totals. Built with React and D3.js v3, the visualization uses SVG for rendering and animated transitions to smoothly update the bar heights, colors, and labels, as well as the pie chart slices. The bar chart uses an ordinal scale for the x-axis, and the pie chart’s updates are driven by calling its `update` function with new data.

Loading thumbnail…

Untitled

A matrix of donut charts displays the population distribution across age groups for each U.S. state, with each donut's area scaled proportionally to the state's total population. The visualization uses a `d3.scaleSqrt` for radius and `d3.pie` with `padAngle` to generate the arcs. The code leverages `selection.each` to create a context where parent and child data—state totals and individual age-group values—are accessible simultaneously within each SVG rendering. Data is loaded via `d3.csv` from a local CSV file, and `d3.arc` handles the arc paths.

Loading thumbnail…

Radial pie - Player statistics

This radial pie chart visualizes player statistics across multiple categories, with each wedge representing a season and the radial extent encoding total values. The visualization uses stacked segments colored by performance metrics, with state labels rotated around the circumference. It employs d3-scale-radial for the radial axis, d3.arc for path generation, and d3.stack for segment composition. The chart includes circular gridlines, value labels, and a legend, all rendered as SVG within a React framework.

Loading thumbnail…

Smiley Face Part 1

This example shows the first step toward building a smiley face using React and D3.js, rendering a yellow circle with black eyes, a mouth, nose, and eyebrows as SVG paths. The visualization defines geometric parameters for each facial feature (radii, angles, and offsets) and uses D3's `arc()` API to generate path data for the mouth, nose, and eyebrows. The face is centered in a 960x500 SVG canvas, with the eyes positioned relative to the center using computed offsets. React manages the SVG element tree, while D3's arc generator handles the angular shapes, though the current arc angles for the nose and eyebrows may not accurately represent the intended features.

Loading thumbnail…

Locations of Datavis 2020 Students First Pass- my work

This visualization displays the approximate global locations of Datavis 2020 students based on their self-reported introductions in a Slack channel, with points representing centroids for broader regions. It uses a natural Earth projection via `d3.geoNaturalEarth1` and renders world landmasses, graticules, and interior boundaries using `d3.geoPath` within an SVG. City coordinates are geocoded and parsed from a CSV string using `d3.csvParse` and plotted as green circles, with styling defined in CSS for map elements and a title overlay. The world atlas data is fetched from a remote JSON file and processed with the `topojson` library.

Loading thumbnail…

Locations of Datavis 2020 Students First Pass- my work

This visualization displays the approximate global locations of Datavis 2020 students based on their self-reported introductions in a Slack channel, with points representing centroids for broader regions. It uses a natural Earth projection via `d3.geoNaturalEarth1` and renders world landmasses, graticules, and interior boundaries using `d3.geoPath` within an SVG. City coordinates are geocoded and parsed from a CSV string using `d3.csvParse` and plotted as green circles, with styling defined in CSS for map elements and a title overlay. The world atlas data is fetched from a remote JSON file and processed with the `topojson` library.

Loading thumbnail…

Car Report

This example displays a static HTML page titled “Car Report” that renders the text “Hello World” into a designated `pre` element. Although the code includes a React starter reference, the implementation itself is plain JavaScript, using `document.getElementById` to update the message element’s text content. The visualization is minimal, showing no charts or data processing; it serves as a basic React project scaffold or template.

Loading thumbnail…

Cars Report

This example presents a minimal "Cars Report" page, displaying only the title text in a large, centered font. The rendering is achieved with a simple HTML page that includes inline CSS for styling, and the entire visualization is a static text label without any data or interactive features. The code does not use any JavaScript libraries or frameworks, relying solely on plain HTML and CSS for its presentation.

Loading thumbnail…

Cars Report

This example renders a minimal HTML page displaying the text "Cars Report" in large, centered type, driven by a React setup. The page uses inline CSS to set the body font size to 13em and align the text, while the React framework handles the single-component rendering. The visualization itself does not include any charts or data—it simply presents the title as a static placeholder, relying on the browser’s default rendering of the styled HTML element. The code references no external visualization libraries, using only plain HTML and CSS within the React structure.

Loading thumbnail…

Cars Report

This example demonstrates a text-based report generator that loads car data asynchronously and filters it by price. The page shows a loading message before displaying a list of vehicles under a $2,000 threshold, formatted with year, make, model, and price. It uses a `getCars` function returning a Promise with a simulated delay, and a `generateReport` module that chains array filters and maps. The `formatCar` utility constructs the output string, while the DOM updates via `textContent` in the main script.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in large, centered type on a plain web page. It uses only standard HTML and CSS, with the body’s font size and alignment set via a style block, and no JavaScript. The page is a minimal starting point for web-based visualization projects, demonstrating how a bare HTML file can be styled and rendered in a browser.

Loading thumbnail…

Cars Report

This example demonstrates a text-based report generator that loads car data asynchronously and filters it by price. The page shows a loading message before displaying a list of vehicles under a $2,000 threshold, formatted with year, make, model, and price. It uses a `getCars` function returning a Promise with a simulated delay, and a `generateReport` module that chains array filters and maps. The `formatCar` utility constructs the output string, while the DOM updates via `textContent` in the main script.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, using horizontal bars without axes to emphasize the data. Built with React and rendered as SVG, it uses D3 v5's `scaleBand` and `scaleLinear` for positioning, and `format` for tick labels. The chart’s data comes from the United Nations World Population Prospects 2019, with tooltips providing population values. The minimalist design uses a Poppins font and a muted color palette to create a clean, modern aesthetic.