J

jay

@jay1502·25 public vizzes

Loading thumbnail…

Cars Scatter Plot with menus

This visualization displays the relationship between horsepower and weight for a dataset of cars, with each car represented as a circle. A dropdown menu above the chart lists all data columns, but the code only logs the selected option to the console; it does not change the chart axes. The scatter plot is rendered using D3 v5 with SVG, using the `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct axes and `csv` to load the auto-mpg dataset from a remote URL. A reusable `dropDownMenu` module handles the menu creation with D3 data joins.

Loading thumbnail…

Cars Scatter Plot with menus

This visualization displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each car represented by a red semi-transparent circle. Users can select different columns from a dropdown menu to change the variable of interest. The scatter plot uses D3 v5’s scaleLinear, axisBottom, axisLeft, and extent functions to compute scales and render SVG axes. The dropdown menu is implemented via a reusable function that appends select elements and handles change events, while the data is loaded as CSV and parsed to numeric values.

Loading thumbnail…

Cheap Tricks for Interaction

A world choropleth uses color to encode each country's income economy, with a linked ordinal legend. Clicking a legend category filters the map's visual emphasis, dimming unselected countries and allowing a click again to clear the filter. Built with D3 v5, it combines `d3.geoPath` and `geoNaturalEarth1` projection for geographic shape rendering, `scaleOrdinal` and `schemeSpectral` for the color scale, and `d3.zoom` for pan and zoom. Data comes from the World Atlas TopoJSON and TSV datasets.

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive map exploration using D3.js version 5, visualizing world economies with a color legend and zoom functionality. The map renders countries as SVG paths via `d3.geoPath` and `geoNaturalEarth1` projection, colored by economic classification using `scaleOrdinal` with the `schemeSpectral` palette. Hovering highlights countries in red, while a zoom behavior enables pan and scale transformations. Data comes from the World Atlas TopoJSON and TSV files, with a custom color legend component showing the categorical scale.

Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive world map built with D3.js version 5 and TopoJSON, using a natural Earth projection rendered as SVG. It displays country boundaries from the world-atlas dataset, with hover states that highlight each nation in red and tooltips showing country names via SVG title elements. The visualization implements d3.zoom for pan and zoom interactions, applying transformations to a group element containing all geographic paths. The sphere background uses a distinct blue fill, while the code loads both TSV metadata for country names and TopoJSON geometry through Promise.all.

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend patterns for encoding data. A color legend uses a d3.scaleOrdinal to map categorical fruit names to colored circles, while a size legend employs d3.scaleSqrt to represent numeric values through circle radius, with tick marks generated via sizeScale.ticks. Both legends are built with D3 v5 data joins, appending SVG groups, circles, and text elements with configurable spacing and offsets, rendering in a standalone SVG canvas.

Loading thumbnail…

Color and Size Legends

Two customizable legends demonstrate how D3 v5 encodes data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to represent numerical values through circle radii. Both legends are constructed through reusable functions that bind data to SVG groups, with legends rendered as circles and text labels. The color legend applies `attr("fill", colorScale)`, while the size legend filters zero values from its ticks and spaces circles vertically.

Loading thumbnail…

Color and Size Legends

This example demonstrates how to build a color legend using D3 v5, displaying categories apple, lemon, limes, and orange with distinct colors and circular markers. The visualization uses a custom `colorLegend` function that binds ordinal scale domain values to groups, appending circles and text labels with specified spacing and offsets. The code imports `select` and `scaleOrdinal` from D3, applies the legend to an SVG canvas, and sets explicit styling for text, circles, and background in CSS.

Loading thumbnail…

Let's make a face with D3.js!

The visualization displays a world map rendered with SVG paths, where each country is filled in green with black borders against a dark blue background. It demonstrates fundamental DOM manipulation by using D3.js to load GeoJSON data from the `world-atlas` package, project it with `d3.geoMercator()`, and generate paths via `d3.geoPath()`. The code also imports `topojson` for feature extraction, but the interactive smiley face with moving eyebrows described in the README is not present in the visible implementation.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins, showing how circles representing fruit enter, update, and exit with animated transitions. A sequence of timeouts removes fruit, changes an apple to a lemon, and filters out another item, while clicking a fruit selects it with a black stroke. The code uses d3.scaleOrdinal for color and radius, selection.merge, and transition().duration() with attribute tweens. Rendering is SVG with d3.select and range from the v5 library.

Loading thumbnail…

Bowl of Fruit - General Update Pattern (Before Animation)

Five fruit circles in a bowl animate through data changes, showing apples fading out, one apple changing into a lemon, and a fruit being removed. This example demonstrates the general update pattern with enter, update, and exit selections. It uses D3 v5's `scaleOrdinal` for color and radius mapping, SVG rendering, and `selection.merge` to handle transitions between data states.

Loading thumbnail…

Bowl of Fruit - General Update Pattern (Before Animation)

Five fruit circles in a bowl animate through data changes, showing apples fading out, one apple changing into a lemon, and a fruit being removed. This example demonstrates the general update pattern with enter, update, and exit selections. It uses D3 v5's `scaleOrdinal` for color and radius mapping, SVG rendering, and `selection.merge` to handle transitions between data states.

Loading thumbnail…

Bowl of Fruit - General Update Pattern (Before Animation)

This example demonstrates the general update pattern in D3 before applying animation, showing how data changes—removing an apple and changing another to a lemon—update SVG circles. The visualization uses D3 v5’s `selectAll`, `data`, `enter`, `merge`, and `exit` to handle circle creation, updates, and removal. Fruits are represented as circles with ordinal scales for color (`scaleOrdinal`) and radius, mapping apple to red and lemon to yellow. The initial state renders five apples, then a pop after one second removes one, and a type change after two seconds alters a circle’s appearance.

Loading thumbnail…

Making a Bar Chart

This example demonstrates the basics of building a bar chart without axes, showing the top 10 most populous countries with bar lengths proportional to population. Using D3 v5, it employs the `select` and `range` APIs to generate fruit-like circles that animate size and position via `transition()`, while the `scaleOrdinal` API maps categories to colors and radii. The data comes from the United Nations World Population Prospects 2019, loaded from a CSV file, and the visualization updates through a series of timeout-driven state changes.

Loading thumbnail…

Making a Bar Chart

This example uses the D3.js v5 join pattern to animate a collection of fruit as circles. An initial bowl of five apples shrinks as they are eaten, and one apple transitions into a yellow lemon, demonstrating data joins with `selection.enter`, `selection.merge`, and `selection.exit`. The circles use a `scaleOrdinal` for color and radius, and each transition applies a 1-second duration to position, size, and removal. The bar chart title references the United Nations population data, but the code itself focuses on the fruit-bowl animation.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The chart uses D3 v5’s scaleLinear, axisBottom, and axisLeft to construct the axes, while the SVG circles are rendered with a fixed radius and partial opacity. Data is loaded as CSV from VizHub’s auto-mpg dataset and parsed into numbers before plotting. Grid lines, axis labels, and a title are added via D3’s selection and append methods.

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of the top 10 most populous countries, using circles sized by population instead of traditional bars. The chart loads data from a CSV file and renders as an SVG. The code uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to build the visualization, with custom tick formatting and a title.

Loading thumbnail…

Making a bar chart

This example visualizes the populations of the world’s ten most populous countries as a horizontal bar chart, with circles rendered per country using SVG. D3’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs load the data, map population counts to bar lengths, and position country labels along the y-axis. The code removes default axis domain lines, formats tick labels with `format('.3s')` (replacing “G” with “B” for billions), and applies custom CSS styling. Data comes from `data.csv`.

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the UCI Auto MPG dataset displays the relationship between horsepower and weight for 392 cars, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v5’s scaleLinear for axes, axisBottom and axisLeft for ticks, and SVG circles for data points. Labels for both axes and the title are rendered as SVG text elements. The data is loaded as CSV and parsed numerically before being bound to the visualization.

Loading thumbnail…

Making a Bar Chart - JAY

This example visualizes the relationship between engine cylinders and horsepower across automotive models, with each data point represented as a rectangle in a scatterplot-style bar chart. The chart uses D3 v5 to load CSV data, applies linear scales for both axes, and renders the visualization as SVG elements. Axes are generated using the `axisLeft` and `axisBottom` APIs. The data comes from the auto-mpg dataset, with numeric fields parsed via JavaScript’s unary plus operator. The bars are styled with a steelblue fill, though the chart lacks a traditional bar layout.

Loading thumbnail…

Making a Bar Chart - JAY

This bar chart displays the frequency of credit score categories, showing the distribution across five groups from High to Low and NA. The chart uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis frequency scale and `d3.scaleBand` for the categorical y-axis, with `d3.axisLeft` and `d3.axisBottom` for labels. Data comes from a local CSV file, where frequency values are multiplied by 1000. The visualization is titled “Credit Score Categories” and lacks axes labels beyond the category names.

Loading thumbnail…

Making a Bar Chart - JAY

This bar chart displays the distribution of credit score categories, showing the frequency of each category as horizontal bars. The chart includes axes and a title, with data loaded from a CSV file. The code uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render the axes. SVG is used for rendering, with each category represented by a rectangle whose width corresponds to its frequency value.

Loading thumbnail…

Making a Bar Chart - JAY

This bar chart visualizes the frequency of credit score categories across five groups, with the raw data scaled by 1000 for display. It uses D3 v5 to render SVG graphics, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` for axes. The chart is titled "Credit Score Categories," with bars styled in a dark blue fill. Data comes from a local CSV file.

Loading thumbnail…

Making a Bar Chart - JAY

This example displays a horizontal bar chart of credit score categories by frequency, with the data scaled to thousands and sorted by the provided CSV values. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to render the axes. The SVG rendering is driven by `csv()` to load the data, and bars are appended as `rect` elements with a title text. The chart highlights the distribution of frequencies across five credit score categories.

Loading thumbnail…

Making a Bar Chart - JAY

This example displays the frequency of credit score categories—Medium-High, Medium-Low, High, Low, and NA—as a horizontal bar chart. It loads data from a CSV file using d3.csv, then scales it by 1000. The visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the x-axis frequency values. Bars are rendered as SVG rect elements, with axes added via d3.axisLeft and d3.axisBottom. The chart includes a title but no explicit data source attribution.