J

Jason-Manbodh

@Jason-Manbodh·28 public vizzes

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map displays world countries colored by income group using an ordinal color scale, with a zoomable, panning natural Earth projection. Clicking a legend swatch filters the map by highlighting matching countries and dimming others. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for map interaction, while a custom colorLegend component handles click-driven filtering. Data comes from the world-atlas TopoJSON and TSV files, with countries rendered as SVG paths and hover effects changing fill color.

Loading thumbnail…

Cloropleth Map

This choropleth map visualizes countries by income group, using color to encode each nation's categorical data. The map shows the geographical distribution of these groups across the world, with a color legend positioned on the left. It is built with D3 v5, using `d3.geoPath` with a `geoNaturalEarth1` projection to render world shapes from TopoJSON data loaded via the `world-atlas` package, which also provides TSV metadata for country names and income groups. A `scaleOrdinal` with a spectral color scheme drives the fill, while zooming and hover effects enhance interaction.

Loading thumbnail…

Cloropleth Map

This choropleth map visualizes countries by income group, using color to encode each nation's categorical data. The map shows the geographical distribution of these groups across the world, with a color legend positioned on the left. It is built with D3 v5, using `d3.geoPath` with a `geoNaturalEarth1` projection to render world shapes from TopoJSON data loaded via the `world-atlas` package, which also provides TSV metadata for country names and income groups. A `scaleOrdinal` with a spectral color scheme drives the fill, while zooming and hover effects enhance interaction.

Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

Loading thumbnail…

Bowl of fruit - general update pattern

Five apples appear as red circles in an SVG, arranged horizontally above a bowl. Following a timed script, the visualization removes an apple, changes an apple to a yellow lemon, and removes another, demonstrating D3’s general update pattern. The code uses `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` with a `transition().duration(1000)` to animate radius and x-position changes, while `scaleOrdinal` maps fruit types to colors and sizes.

Loading thumbnail…

world countries tree

This is an interactive, hierarchical tree visualization that displays a global breakdown of countries, organized by continent and region, with the root node labeled "World". The data is rendered as a horizontal tree layout, with labeled text nodes and connecting lines. The implementation uses D3.js to build the tree structure, with `d3.hierarchy` and `d3.tree` computing the layout, and `d3.linkHorizontal` generating the connecting paths. The visualization supports zooming and panning via the `d3.zoom` module, and text styling uses the Raleway font.

Loading thumbnail…

world countries tree

This is an interactive, hierarchical tree visualization that displays a global breakdown of countries, organized by continent and region, with the root node labeled "World". The data is rendered as a horizontal tree layout, with labeled text nodes and connecting lines. The implementation uses D3.js to build the tree structure, with `d3.hierarchy` and `d3.tree` computing the layout, and `d3.linkHorizontal` generating the connecting paths. The visualization supports zooming and panning via the `d3.zoom` module, and text styling uses the Raleway font.

Loading thumbnail…

world countries tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with the root node at "World." The layout uses a horizontal tree structure in which continent and subregion branches extend outward to individual country names. Rendered in an SVG canvas, the chart connects parent nodes to children with curved paths, and each country appears as a text label. The implementation relies on the D3.js library, specifically using the `tree`, `hierarchy`, and `linkHorizontal` functions to compute the layout and generate edge paths, while loading the hierarchical data from a local JSON file.

Loading thumbnail…

world countries tree

This example shows a hierarchical tree of world countries, organized by continent and subregion, with each country name displayed as a text label. The visualization renders an SVG using D3.js v5, leveraging the `tree` and `hierarchy` layouts to compute node positions and `linkHorizontal` to draw curved paths between parent and child nodes. Data is loaded from a local JSON file, and text labels are offset with a dy attribute for readability.

Loading thumbnail…

blank canvas

A full-screen rounded rectangle serves as the sole visual element, rendered as an SVG rect that dynamically fills the browser viewport based on measured client dimensions. The example demonstrates a minimal D3 v5 setup using `select` to target the SVG element and setting width and height attributes directly from `document.body` parameters. With rounded corners applied via the `rx` attribute, the visualization creates a simple, frameless canvas effect while showcasing basic SVG manipulation and responsive sizing in a fixed-position layout.

Loading thumbnail…

Cheap tricks for interaction

This example shows an interactive world map rendered in SVG using D3 v5, where countries appear in light green against a dark blue spherical background. Users can zoom and pan the map via a d3.zoom handler that applies SVG transforms to the map group. Natural Earth projection is applied through d3.geoNaturalEarth1, with country boundaries drawn via d3.geoPath. Country names come from a TSV file joined to TopoJSON geometry using topojson.feature, and hovering highlights a country in red via a CSS :hover rule.

Loading thumbnail…

Cheap tricks for interaction

This example shows an interactive world map rendered in SVG using D3 v5, where countries appear in light green against a dark blue spherical background. Users can zoom and pan the map via a d3.zoom handler that applies SVG transforms to the map group. Natural Earth projection is applied through d3.geoNaturalEarth1, with country boundaries drawn via d3.geoPath. Country names come from a TSV file joined to TopoJSON geometry using topojson.feature, and hovering highlights a country in red via a CSS :hover rule.

Loading thumbnail…

Let's make a map

This map of the world uses a dark blue sphere as a background, with light green countries rendered on top. The visualization is built with D3 and the topojson library, using `geoPath` and the `geoNaturalEarth1` projection to draw the geographical features. Country boundaries come from the world-atlas dataset loaded as 50m JSON, and the map is rendered as SVG paths.

Loading thumbnail…

Bowl of fruit - general update pattern

Five apples appear as red circles in an SVG, arranged horizontally above a bowl. Following a timed script, the visualization removes an apple, changes an apple to a yellow lemon, and removes another, demonstrating D3’s general update pattern. The code uses `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` with a `transition().duration(1000)` to animate radius and x-position changes, while `scaleOrdinal` maps fruit types to colors and sizes.

Loading thumbnail…

Area chart

This area chart displays world population trends over time, with the x-axis representing years and the y-axis showing population counts in billions. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth filled path, while `axisBottom` and `axisLeft` render gridlines and tick labels. Data is loaded from an external CSV file via `d3.csv`, with population values formatted using `d3.format`. The visualization includes rotated axis labels and a centered title, all rendered as SVG elements.

Loading thumbnail…

Area chart

This area chart displays world population trends over time, with the x-axis representing years and the y-axis showing population counts in billions. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth filled path, while `axisBottom` and `axisLeft` render gridlines and tick labels. Data is loaded from an external CSV file via `d3.csv`, with population values formatted using `d3.format`. The visualization includes rotated axis labels and a centered title, all rendered as SVG elements.

Loading thumbnail…

Area chart

This area chart displays daily temperature readings in San Francisco over a week, with a smooth curved path filled in maroon against a clean grid. The visualization loads CSV data from a GitHub gist and uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.area with a basis curve to generate the SVG rendering. Axis labels and a title annotate the chart, while tick lines extend across the plot area for readability.

Loading thumbnail…

Line chart

This line chart displays temperature trends in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The visualization uses d3.csv to load weather data, d3.scaleTime and d3.scaleLinear for scales, and d3.line with curveBasis to generate a smooth path. SVG rendering includes labeled axes with gridlines and a title, all styled via CSS classes for font and stroke properties.

Loading thumbnail…

Temperature in San Francisco

This scatter plot visualizes daily temperature variations in San Francisco over a week, with date on the x-axis and temperature on the y-axis. Built with D3.js (v5), it uses `scaleTime` and `scaleLinear` to map the data to SVG coordinates, and `axisLeft` and `axisBottom` with adjusted tick sizes and padding to create gridlines. The chart title and axis labels are added as SVG text elements with custom styling. Data is loaded as CSV from a remote GitHub source.

Loading thumbnail…

Scatter plot

This scatter plot shows the relationship between horsepower and weight for cars in the auto-mpg dataset, with each circle representing a vehicle. The data reveals a positive correlation between the two variables, as heavier cars tend to have higher horsepower. The visualization uses D3 v5's `csv` loader to fetch the dataset, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` with tick lines to render the axes. SVG circles are positioned using the computed scales, with styling applied through CSS for opacity and fill.

Loading thumbnail…

Scatter plot

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned along a linear population scale on the x-axis and a point scale for country names on the y-axis. The visualization uses d3.csv to load data from a CSV file, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisLeft and d3.axisBottom to render axes with grid lines. The SVG rendering applies a custom tick format to abbreviate large numbers, converting billions to "B".

Loading thumbnail…

Customizing axes

This visualization displays the top 10 most populous countries as horizontal bars, using a bar chart with custom axes. The chart is rendered as SVG with D3 v5, using `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population scale. The code customizes both axes: it removes the y-axis domain and tick lines, and applies a tick format function using `d3.format('.3s')` to abbreviate population values, replacing 'G' with 'B'. The x-axis includes tick lines spanning the chart height and a custom axis label, while a title annotates the top of the visualization.

Loading thumbnail…

Making a bar chart

A horizontal bar chart displays population estimates for ten countries, ordered from largest to smallest and read from a CSV file. The chart uses D3 v5’s `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative population axis. SVG rectangles are bound to the data, with width mapped to population and height set by the band scale’s `bandwidth`. Axes are rendered using `axisLeft` and `axisBottom`, with margins applied via an SVG group transform.

Loading thumbnail…

Lets make a face with D3.js

A simple D3.js visualization renders a yellow face with black eyes and a curved mouth as SVG shapes. The code uses `d3.select` to target the SVG element and `d3.arc` to generate the mouth path, while circles define the head and eyes. The face is centered using viewport dimensions, with fixed offsets for eye spacing and placement. The visualization demonstrates basic shape construction and positioning with the D3 v3 library, outputting static SVG elements without interaction or data binding.

Loading thumbnail…

HTML cars report

A minimal HTML page lists three used cars with model names, years, and prices, drawing attention to a single 2012 Nissan Leaf with red text. It reads no external data, using plain HTML list items styled by a linked CSS stylesheet that sets a large monospace body font and a red color class for the highlighted entry. No JavaScript libraries or canvas APIs appear; the visualization is purely static markup with CSS presentation.

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small JSON dataset, rendering the text "Honda" prominently on the page. The visualization consists of a single static text element, populated by parsing an embedded JSON array with `JSON.parse` and accessing the first object’s `make` property. The code uses the native `document.getElementById` API to set the text content of a `<pre>` element, with no charting or animation libraries involved. The design highlights a minimal, data-driven text output rather than a graphical representation.

Loading thumbnail…

cars report

This example displays a plain-text report of car listings, showing each vehicle's make, model, year, and price in a large, centered format. The React app imports car data from a local JSON file and renders it directly into the page body, using a simple `pre` element for output. The visualization relies on React’s `render` method to inject the parsed data, with styling controlled by inline CSS. It demonstrates a minimal scaffolding approach using the React starter template and a static dataset.