A

akshayms0

@akshayms0·49 public vizzes

Loading thumbnail…

Untitled

This example presents a minimal HTML page that uses CSS and JavaScript to render a visualization. The code relies on the React framework to structure the application, though the page itself is a bare-bones demonstration. It primarily showcases how to combine HTML, CSS, and JS to create a functional visual output, with the data and rendering approach based on the included source files. The visualization focuses on a basic, unadorned presentation of the underlying content.

Loading thumbnail…

purging tool activity

This example presents a file purge tool interface with a parameter-entry table for specifying file directories, masks, archive locations, and retention periods, alongside an archival activity log showing timestamps, actions, and filenames. The plain HTML page uses CSS for styling, tables for structured data layout, and JavaScript-driven buttons for browsing, loading, saving, and clearing inputs. The browser-based React starter framework supports user interactions, while the interface relies on standard HTML form elements and table markup rather than visualization libraries.

Loading thumbnail…

File Purging Tool

This interactive web tool displays a basic file management interface. It presents a title, a "Browse" button, a search input field, and a "Load" button, all styled with custom CSS. The interface uses simple HTML anchor tags for navigation to placeholder pages and a standard text input for search queries. The page contains no JavaScript; it relies entirely on static HTML and embedded CSS for its presentation. The layout and styling are defined entirely within the `<style>` block in the `index.html` file.

Loading thumbnail…

Fork of purge tool

This example demonstrates a JavaScript data-processing pipeline that filters a car inventory and formats the results into a text report. The code uses a hardcoded JSON array of car objects (year, make, model, price) as its data source, loaded asynchronously via a Promise with a 2-second delay. The `getCars` module parses the JSON, while `generateReport` filters cars under a $2000 price threshold and maps each to a formatted string using the `formatCar` function. The final output, a list of qualifying cars, is displayed in an HTML `<pre>` element with a "Loading..." placeholder shown before the Promise resolves.

Loading thumbnail…

Fork of Cars Report

This example demonstrates the interaction between asynchronous data loading and report generation in JavaScript. It shows a simple text-based report of cars under a specified price threshold, displayed in a large font after a two-second loading delay. The code uses the native `Promise` API and `setTimeout` in `getCars.js` to simulate fetching hardcoded JSON data, then the `generateReport` module filters, maps, and joins the array using `Array.filter`, `Array.map`, and `Array.join`. The final output renders in an HTML `<pre>` element via `document.getElementById`, with modules imported and bundled through Rollup.

Loading thumbnail…

File Purging Tool

This interactive file purging tool lets users assemble collections of parameters and assign them to processing targets through a drag-and-drop interface. The tool uses custom HTML elements (`vc-dragitem`, `vc-dragcontainer`) built on native HTML5 drag-and-drop APIs, with SVG shapes serving as sample data items. Users can create, delete, and collapse draggable collections, while buttons allow them to save and restore connection configurations. The SVG hints at geometric data representations, but the main focus is on managing and connecting file groups through direct manipulation.

Loading thumbnail…

selecting year on line chart

A line chart displays population trends over time for global regions, with a vertical black line marking a selected year. Moving the mouse across the chart updates this selection, recomputing the line’s position. The visualization uses d3.nest to group data by region, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. Data comes from UN population estimates (1950–2014) and medium-variant projections (2015–2100), rendered as SVG with a color legend for region identification.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays projected population trends over time for multiple world regions, with each region represented by a colored line and a corresponding color legend. The chart uses d3.line with curveBasis to create smooth paths, d3.nest to group data by region, and d3.scaleOrdinal with schemeCategory10 for coloring. Axis labels and gridlines are generated using d3.axisBottom and d3.axisLeft. The data comes from UN population estimates and medium-variant projections, which are processed and merged using d3.csv, d3.range, and d3.timeParse.

Loading thumbnail…

Making a line chart with multiple lines

This visualization depicts a week of temperature data for San Francisco, shown as a multi-line chart where temperature trends are traced over time. Using D3 v7, the code employs `scaleTime` and `scaleLinear` to map the temporal and temperature axes, while `nest` and `curveBasis` generate smooth lines for each city. A color legend, built with `colorLegend`, uses `scaleOrdinal` and `schemeCategory10`. Data comes from a CSV file, rendered as SVG with styled paths using `mix-blend-mode:multiply`.

Loading thumbnail…

Circles on Map

This example visualizes global population data by drawing semi-transparent circles on a natural Earth projection map. Each circle is positioned at a country's centroid using `d3.geoCentroid` and scaled in radius according to 2018 population figures via `d3.scaleSqrt`. Countries without data appear in light red, while others are gray. The visualization includes an interactive zoom feature using `d3.zoom` and two legends: a color legend for economy types and a size legend for population, built with custom React components and rendered as SVG. Data is loaded from CSV and TopoJSON files using `d3.csv` and `d3.json`.

Loading thumbnail…

Fork of scatter plot with menus

This visualization displays a scatter plot of automotive data from the auto-mpg dataset, with interactive dropdown menus that let users select which columns to plot on the x and y axes. The SVG renders circles positioned via d3.scaleLinear and transitions them into place using transition.attr. The dropdownMenu component uses d3 selection and event handling to trigger re-renders, while the scatterPlot module manages axes with d3.axisLeft and d3.axisBottom, updating labels and scales dynamically based on user selections.

Loading thumbnail…

scatter plot with menus

This interactive scatter plot displays relationships between numeric attributes of automotive data from the auto-mpg dataset. Users select which columns appear on the x- and y-axes via dropdown menus. The visualization uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.transition with delay to animate circles from the center to their positions. The svg rendering includes axis labels and grid lines, with the color and opacity defined in CSS.

Loading thumbnail…

Choropleth Map

This choropleth map displays global economic classifications, with countries color-coded by their income group using a spectral ordinal scale. Users can click legend items to highlight matching regions, which dims non-selected countries and increases their stroke width. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render GeoJSON from the world-atlas TopoJSON dataset, while d3.zoom enables interactive panning and zooming. A custom color legend with clickable circles and d3.scaleOrdinal drives the selection filtering, rendered entirely as SVG elements within a React framework.

Loading thumbnail…

choropleth map

A choropleth map colors world countries by their economy classification using a categorical ordinal color scale. Built with D3 v7 and TopoJSON, it renders geographic paths via `d3.geoPath` with a natural Earth projection, while zooming is handled through D3's zoom behavior. A custom legend component displays the color scale with SVG circles and text. Countries highlight red on hover, and the data merges World Atlas TopoJSON with TSV metadata to assign economy values.

Loading thumbnail…

Fork of choropleth map

This example displays a choropleth map of the world, coloring each country according to its economic classification using a spectral color scale. A legend with colored circles and labels explains the mapping. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render the map from TopoJSON data, and d3.scaleOrdinal with schemeSpectral for the color encoding. Countries highlight in red on hover, and the map supports zooming via d3.zoom.

Loading thumbnail…

Fork of color and size legends

This example demonstrates two reusable legend components rendered side by side in SVG: a color legend using an ordinal scale for fruit categories and a size legend using a square-root scale for numeric values. The color legend maps categorical data to colored circles, while the size legend scales circle radii proportionally and filters out zero values. Both legends use D3 v7 selection joins with enter/merge/exit patterns, and the size legend leverages `sizeScale.ticks()` to generate tick values for display.

Loading thumbnail…

color and size legends

This example demonstrates reusable D3.js legend components for mapping ordinal color scales and continuous size scales. The color legend displays four fruit categories using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to visualize values from 0 to 10 with proportional circle radii. Both legends render as SVG groups with circles and text labels, using a data-join pattern for enter/update/exit transitions. The `colorLegend` and `sizeLegend` functions illustrate how to build modular, configurable legend components for scatterplots or choropleth maps.

Loading thumbnail…

Fork of tree visualization of countries

This example displays a hierarchical tree visualization of countries organized by continent and subregion, with the root node labeled “World” and leaves representing individual nations. The data is loaded from a JSON file and rendered as an SVG using D3 v7’s `tree` layout, `hierarchy`, and `linkHorizontal` generators. Nodes are labeled with text whose font size decreases with depth, while curved links are styled with a teal stroke. Pan and zoom interactions are enabled via `d3.zoom`, and the layout adapts to the browser window dimensions.

Loading thumbnail…

tree visualization of countries

This tree visualization displays the hierarchical structure of countries organized by continent and subregion, using data from a JSON file. The visualization employs a D3 tree layout with hierarchical links rendered as horizontal paths. SVG text labels show country names with font sizes that decrease with depth. The chart supports zooming and panning through D3’s zoom behavior, while the styling uses CSS with subtle text shadows and a serif font for readability.

Loading thumbnail…

Making a map

This map displays the world’s countries as light green polygons on a dark blue sphere, with hover highlighting in red. It uses d3.geoPath with a d3.geoNaturalEarth1 projection to render geographic features from TopoJSON data, which is merged with country names from a world-atlas TSV file. The visualization supports pan and zoom interaction via d3.zoom, and all drawing is done as SVG paths.

Loading thumbnail…

Making a map

This example shows a world map rendered as an SVG, with countries filled in light green against a dark blue spherical background. It uses the D3.js library along with the topojson package to fetch and process geographical data from the `world-atlas` dataset, converting TopoJSON features into map paths. The `geoPath` and `geoNaturalEarth1` projection APIs generate the map, while the `sphere` class draws the ocean.

Loading thumbnail…

bowl of apples

A row of SVG circles represents fruit in a bowl, starting as five apples. A simple d3 data join (with keyed enter, update, and exit selections) animates the circles with `transition` on their radius and x-position. The scene changes over time: a fruit is eaten (removed), one apple turns into a lemon via a color scale, and another is filtered out. Mouseover and mouseout events update a selected fruit, applying a black stroke highlight. Code uses D3 v7's `scaleOrdinal` for color and radius values.

Loading thumbnail…

Fork of bowl of apples 87

Five apples are rendered as red circles that transition to their positions, with hover highlighting and removal animated by shrinking the radius. The code uses D3 v7 selections with data joins, `scaleOrdinal` for color and radius mappings, and `transition().duration()` for movement. Apples are removed and one changes to a lemon over timed updates.

Loading thumbnail…

Fork of HTML Starter14

This example displays a large, centered text message, “Hello HTML!”, directly on a webpage. It uses embedded CSS to control the font size and alignment of the message, while the HTML structure defines the content and the page layout. The code relies solely on standard HTML and CSS, with no JavaScript or external libraries, demonstrating a minimal static text rendering approach. The styling is applied via a `style` block within the `head` section, targeting the `message` class.

Loading thumbnail…

bowl of apples

A bowl of apples initially displays five red apples, animated through a sequence of data updates: one apple is removed, another becomes a lemon, and a third is filtered out. The visualization uses D3.js v7 with SVG rendering, binding fruit objects to group elements via `selectAll` and data joins. A `scaleOrdinal` maps fruit types to colors and radii, while `transition`-less updates immediately reflect state changes. The React framework is absent from the core logic, as the code directly manipulates the DOM through D3 selections.

Loading thumbnail…

apple lemon final script

This example presents a static web page titled “apple lemon final script” that displays the text “Hello HTML!” in a large, centered, 13-em font. Built with a bare minimum HTML structure, the page uses an embedded CSS style block to define the visual presentation of the message, while no JavaScript or external libraries are employed. The rendering relies solely on standard HTML and CSS, with no data source or interactive behavior demonstrated.

Loading thumbnail…

Fork of HTML Starter12

This example displays the text “Hello HTML!” centered on the page with a very large font size, styled via CSS. It is a minimal demonstration of a static HTML document that uses inline JavaScript and CSS within a single `index.html` file, with no external libraries or data sources. The rendering relies on standard HTML elements and CSS properties, such as `font-size` and `text-align`, to achieve the visual result. The page does not include any interactive or dynamic behavior.

Loading thumbnail…

Fork of HTML Starter10

This example displays the text “Hello HTML!” in a large, centered font. It demonstrates a minimal HTML page that uses inline CSS to style the message and contains no JavaScript logic. The code directly defines a single `div` element with a class of `message`, styled with a font size of 13em and centered alignment. No external libraries, data sources, or dynamic rendering are involved; the visualization relies purely on static markup and styling.

Loading thumbnail…

Fork of bowl of apples

A fork of a bowl of apples demonstrates a simple data join animation using D3 v7 within a React setup, rendering SVG circles. It shows five fruit objects, initially all apples, that are drawn in a row. After one second, an apple is removed from the end of the array, and the exiting circle exits. A moment later, the middle apple's type is changed to a lemon, which updates its color and radius via scaleOrdinal mappings. The code uses select, range, and scaleOrdinal to manage the visualization.

Loading thumbnail…

bowl of apples

Five apples render as red circles in a row. After one second, an apple is removed. After two more seconds, a middle apple becomes a lemon, changing its color and radius. The example demonstrates the data join pattern using D3 v7’s `selectAll`, `data`, `enter`, `merge`, and `exit` methods, with `scaleOrdinal` mapping fruit types to colors and radii in an SVG.

Loading thumbnail…

Fork of bowl of apples

This example demonstrates a simple update pattern for a bowl of apples visualization. Initially five red circles, representing apples, render in a horizontal row using D3’s `selectAll` and data joins. After a one-second delay, the code removes an apple from the data array and calls the render function again, causing D3’s exit selection to remove the corresponding circle. The SVG output is driven by React, with `d3.range` generating the fruit data and `d3.select` binding elements to the DOM.

Loading thumbnail…

bowl of apples

Five red circles sit in a row across an SVG canvas, representing a bowl of apples. The visualization uses the D3.js library, explicitly importing `select` and `range` functions from D3 v7, to build the scene. After one second, the final apple is removed from the array via `fruits.pop()` and re-rendered, demonstrating data-driven updates with SVG circle elements positioned by index-based `cx` attributes.

Loading thumbnail…

Making a area chart

This area chart visualizes world population growth from 1960 to 2021 using a line and fill. The chart uses D3.js v7 with SVG rendering, employing `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The area is generated with the `area` function and formatted with `curveBasis`. Axis ticks are customized with color and the population values are formatted from G to B for billions.

Loading thumbnail…

Fork of Making a line chart

This example shows a week of hourly temperature readings in San Francisco as a smooth, maroon line chart. The visualization uses D3 v7 to map time and temperature data from a CSV file onto an SVG canvas, with axes, grid lines, and clear labels. The code employs `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for scaling, and `d3.axisBottom` and `d3.axisLeft` for rendering axes. It also applies `d3.line` with a `curveBasis` for the smoothed path, and includes styled tick marks and titles.

Loading thumbnail…

Temperatures in san Francisco line chart

This line chart shows hourly temperature readings in San Francisco over one week in March 2015, with time on the x-axis and temperature in degrees on the y-axis. The visualization uses D3 v7’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth path. Data is loaded from a CSV file using `csv`, parsed into JavaScript `Date` objects and numbers, then drawn as an SVG with custom-styled axes and gridlines. The maroon line plot includes a title and axis labels.

Loading thumbnail…

Making a bar chart

This scatterplot shows the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses a linear scale for both axes and includes labeled axis ticks, gridlines, and a title. Built with D3 v7, the code loads CSV data from an external URL and renders SVG circles, leveraging `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Styling applies custom colors to tick marks, labels, and the title via CSS.

Loading thumbnail…

Scatter plot

This scatter plot displays the ten most populous countries in 2022, with population values on the x-axis and country names on the y-axis, based on data from World Population Review. Circles mark each nation’s population, scaled linearly and padded via d3.scalePoint, while axes use d3.axisBottom and d3.axisLeft with formatted tick labels converting values to billions. The SVG rendering applies green tick text, blue grid lines, and a red title, all styled through external CSS.

Loading thumbnail…

Customizing axes

This example shows how to customize axes in a bar chart of country populations, formatting tick labels to abbreviate billions as "B" and removing axis domain lines for a cleaner look. A vertical band scale positions countries, while a linear scale maps population values to bar widths. The code uses d3.csv to load data, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with SVG rendering and CSS styling for tick colors and font sizes.

Loading thumbnail…

Fork of Customizing axes3

This horizontal bar chart displays the top 10 most populous countries using a CSV dataset, with population values multiplied by 1000. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, with custom tick formatting converting values to billions via `.3s` and custom axis labels. The chart highlights styling through CSS classes, including colored ticks, axis label, and title, while removing default axis domains for a cleaner look.

Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values converted from raw numbers to thousands and formatted with abbreviated tick labels (e.g., “1.41B”) using D3’s `format` and `.replace('G','B')`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with custom axis styling applied via CSS classes like `.tick text` and `.axis-label`. Grid lines are created by setting `tickSize(-innerHeight)` on `d3.axisBottom`, while the y-axis’s domain and tick lines are removed. Data comes from a local CSV file, and the SVG rendering is driven by React and D3 v7.

Loading thumbnail…

customizing axes

A bar chart displays the population of the top ten countries in 2022, sourced from World Population Review. The chart uses a linear scale for the population axis, with values reformatted from millions to billions using the `format` function and a custom `replace` method. A band scale positions the country labels, and axes are drawn with `axisLeft` and `axisBottom`. The code imports functions like `scaleLinear` and `scaleBand` from d3 and renders the visualization as SVG via `select` and `csv` for data loading.

Loading thumbnail…

Fork of Making a bar chart1

This bar chart displays the population of the top ten countries in 2022, with countries on the y-axis and their population counts on the x-axis. It uses D3 v7's `scaleLinear` and `scaleBand` to map data, rendering as SVG rectangles with axis labels. Population values from the CSV are multiplied by 1000, and the chart visualizes data from World Population Review.

Loading thumbnail…

Making a bar chart

This example renders a static bar chart without axes or labels, showing population estimates for ten countries from a CSV file. It uses D3’s `select` to target the SVG element and the `csv` function to load and parse the data, converting the population strings to numbers by multiplying by 1000. The code then appends rectangles for each data row, but all bars are drawn with the same width and height (300 units), so the visual does not reflect the data values. The chart is rendered as SVG via D3, with no layout or scaling logic applied.

Loading thumbnail…

Making a bar chart

This example demonstrates how to build a bar chart from a CSV dataset of country populations. The page loads population data from `data.csv` using D3’s `csv` method, then converts the population values to numbers and multiplies them by 1,000. The chart renders in an SVG element using D3 v7, with the data being logged to the console. The visualization shows the comparative population sizes of ten countries, though the bars are not yet drawn, focusing instead on the initial data-loading and transformation steps.

Loading thumbnail…

Fork of lets make a face with d3.js

A smiling face is drawn with SVG circles, rectangles, and a path, using D3 v7 to construct each facial feature. The animations show the eyebrows rising and falling through chained `transition` calls, while the mouth is created with a `d3.arc` path. The `<svg>` element is selected and manipulated via `d3.select`, and all shapes are translated to the center of a 960×500 canvas.

Loading thumbnail…

lets make a face with d3.js

This example presents a static SVG canvas with a red background, created using the d3.js library (version 7.6.1) loaded from a CDN. It demonstrates basic DOM selection and styling by calling `d3.select('svg')` to target the SVG element and applying a background color. The page also includes a script that logs the d3 object to the console, confirming the library is loaded. The rendering is entirely SVG-based, with no additional data or dynamic behavior beyond the initial styling and console output.

Loading thumbnail…

Cars Report

This example displays the make of the first car from a small embedded dataset, rendering the text "honda" inside a `<pre>` element on an HTML page. The code imports car data from a separate `cars.js` module, where the data is stored as a JSON string and parsed into an array of objects. It uses React and JavaScript to access the first record and update the page’s DOM via `document.getElementById`, setting the `textContent` of the message element. The visualization demonstrates a minimal data-to-text output without any charts or graphical rendering.

Loading thumbnail…

Fork of HTML Starter 1

This example displays a large, centered “Hello HTML!” message on a blank page. It is a minimal demonstration of web fundamentals, using CSS to style the text’s font size and alignment. The page is a static HTML document with a single `<div>` element, illustrating the basic structure of a webpage without any dynamic data or interactive features. This is a starting point for building more complex visualizations.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page at a very large font size. It is a minimal demonstration of web fundamentals, using inline CSS within a `<style>` block to set the `.message` class properties for font sizing and alignment. The page consists solely of plain HTML and CSS, with no JavaScript or data processing involved, serving as a basic template for building more complex visualizations.