Ajayyy

@Stroked·20 public vizzes

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Population values are formatted with d3.format and rendered as horizontal SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. The visualization is built with React components that encapsulate the axes and marks, while d3.csv loads and processes the dataset. The chart features a clean Poppins typography, light gray grid lines, and teal bars with native SVG tooltips.

May 23, 2020

Loading thumbnail…

Scatter Plot with Color Menu

This interactive scatter plot displays automobile data from the auto-mpg dataset, allowing users to select which numeric columns appear on the x- and y-axes and which categorical column controls point color via three dropdown menus built with the custom `dropdownMenu` function. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and d3.axisLeft/axisBottom for tick marks. Points animate in with a 2-second `transition().duration(2000)` when axes change, while a color legend is rendered using the custom `colorLegend` module. SVG is used for all rendering.

May 21, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js v5 SVG visualization can respond dynamically to browser window resizing. It draws a green X composed of two thick lines whose coordinates are recalculated on every resize event. The code uses `clientWidth` and `clientHeight` to measure the chart container’s CSS-computed dimensions, then updates the SVG’s `width` and `height` attributes accordingly. A window `resize` event listener triggers the `redraw` function, which re-renders the lines based on the new size, showing a simple pattern for responsive data visualizations.

May 21, 2020

Loading thumbnail…

New Draw - Adding group

A grouped bar chart visualizes stock movement data, showing the duration of activities across different routes (e.g., "Elevador," "SD-10") over time. Each bar’s length represents a duration value, with groups positioned by timestamp and route category. The visualization uses D3 v5 with SVG rendering, employing `scalePoint` for the time axis, `scaleBand` for route grouping, and `scaleLinear` for bar lengths. Data is loaded from a JSON file, and axes are customized using `axisBottom` and `axisLeft`, with rotated time labels for readability.

May 21, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes like horsepower and weight. Users dynamically reassign axes via dropdown menus, triggering a two-second animated transition where circles grow and reposition using D3’s `transition()` and `delay()`. Built with D3 v5, the SVG visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, with all numerical columns parsed from CSV. The example demonstrates reusable menu components and animated updates for exploring multivariate relationships.

May 21, 2020

Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart of the top 10 most populous countries, based on 2018 United Nations estimates. It highlights customized D3 axes: the bottom axis uses tick formatting that abbreviates large numbers (e.g., converting millions to "B"), while the left axis removes its domain and tick lines for a cleaner look. The chart is rendered as SVG using d3.scaleLinear, d3.scaleBand, axisBottom, and axisLeft, with gridlines via tickSize(-innerHeight) and a custom title and axis label.

May 21, 2020

Loading thumbnail…

Customizing Axes

This visualization displays a bar chart of estimated billionaire populations from 2018 United Nations data, comparing the top 10 countries by wealth. The chart customizes D3 axes by removing default domain lines, using a custom tick format that converts abbreviations like 'G' to 'B', and adding axis labels and a title. It uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom from D3 v5, with SVG rendering and CSS styling for tick text, lines, and labels. The margins and inner dimensions are computed to position the chart within a 960×500 SVG canvas.

May 21, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which measured attribute (sepal length, sepal width, petal length, petal width, or species) appears on the x- and y-axes via dropdown menus built with React Dropdown. The plot uses React hooks (useState, useEffect) to manage selections and load data asynchronously via d3.csv, with d3.scaleLinear for positioning and custom React components (AxisBottom, AxisLeft, Marks) rendering SVG circles and axes with D3’s scale ticks and formatting. Data spans from a public GitHub gist by Curran.

May 21, 2020

Loading thumbnail…

Temperature in Different Cities

This visualization presents a small multiples area chart tracking temperature readings across seven cities over one week in 2015, using data from the Sense Your City project. The design intentionally demonstrates an ineffective approach to data visualization: color encoding is arbitrary, the area under each curve holds no quantitative meaning, and comparing values across the separate faceted charts proves difficult. Built with Vega-Lite 2.0 and D3 v4, the code constructs the specification programmatically, loading CSV data via `d3.csv` and rendering the output through `vegaEmbed`. Each city occupies its own row, with temporal timestamps on the x-axis and temperature in degrees Celsius on the y-axis, while grid lines are disabled to simplify the display.

May 21, 2020

Loading thumbnail…

Moon Calendar 2020

The Moon Calendar 2020 displays the moon’s phase for every day of the year in a grid, with months on the y-axis and days on the x-axis. Each moon is rendered as an orthographic projection of a circle using `d3.geoPath` and `d3.geoOrthographic`, with phase computed from a simple lunar-cycle formula. Clicking anywhere highlights the current day’s moon with a fading red ring, animated via `transition`. The visualization uses `d3.scaleLinear` for days, `d3.scalePoint` for months, and `d3.timeDays` to generate the date sequence.

May 21, 2020

Loading thumbnail…

Responsive Axes

This example demonstrates how a D3 chart can remain responsive as the browser window resizes, with the axes and tick density adjusting dynamically. The visualization uses D3 v5 with an SVG rendering approach, explicitly calling `d3.axisBottom` and `d3.axisLeft` in conjunction with `d3.scaleLinear`. The code listens for the window `resize` event and re-renders the axes, recalculating tick counts based on the available `innerWidth` and `innerHeight` using a custom `marginConvention` helper. The chart displays a simple empty rectangular plot area with labeled X and Y axes.

May 21, 2020

Loading thumbnail…

Religions of Largest 20 Countries

A stacked bar chart displays the estimated 2010 religion breakdown for the 20 most populous countries, using data from the Pew Research Global Religious Landscape. Hovering over bars reveals tooltips via d3-tip, while hovering over the color legend highlights specific religions by fading the background bars and re-rendering a foreground layer. The visualization uses D3.js 3.5.5 for scales, axes, and stacking via d3.layout.stack, with d3.legend for the color legend. SVG renders the chart, with axes formatted using a custom SI tick format.

May 21, 2020

Loading thumbnail…

ScaterPlot

This example visualizes the top 10 most populous countries in 2018, using a scatter plot where each circle’s vertical position encodes the country name and the horizontal position encodes population size. D3.js v5 APIs handle the entire rendering: `csv` loads the data, `scaleLinear` and `scalePoint` map values to coordinates, and `axisBottom` and `axisLeft` generate the axes with custom tick formatting using `format`. The data originates from the United Nations World Population Prospects 2017, with populations multiplied by 1000 for display.

May 20, 2020

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, showing petal length against sepal width with points colored by species. A color legend on the right highlights points of a selected species by dimming all others to 20% opacity when the mouse hovers over a legend entry. The visualization is built with React and d3.v5, using d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv to load the data. SVG rendering handles both the marks and legend interactions.

May 20, 2020

Loading thumbnail…

Video Dependency Graph

This example displays a dependency graph of video tutorials from a data visualization course, showing each video as a node with its title and duration. The initial state renders the raw JSON data as text in a `<pre>` element, demonstrating the dataset structure with empty links. The code uses D3 v5’s `json()` method to asynchronously load `videos.json` and then appends a formatted string via `JSON.stringify`. No visualization is drawn yet, as the implementation focuses on data loading and inspection.

May 20, 2020

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 as semi-transparent teal circles overlaid on a natural Earth projection map. The map uses a light gray sphere background, with countries colored light gray or pink to indicate missing data. Circle radius encodes population magnitude using a square-root scale, with a legend showing tick marks for population values. The example uses D3 v5 APIs including `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, and `geoCentroid`, loading data from the UN population estimates CSV and a TopoJSON world atlas. Hovering a country reveals its population in a tooltip.

Mar 1, 2019

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic data using a color scale, with a legend allowing viewers to filter the map by clicking a specific economic category. The map uses a natural Earth projection through `d3.geoNaturalEarth1` and `d3.geoPath`, rendering country boundaries as SVG paths. Filtering dims non-selected countries and highlights the chosen one, while the legend’s interactive ticks use `d3.scaleOrdinal` and `schemeSpectral` for colors. Data is loaded from the world-atlas TSV and TopoJSON files, with interactive zoom via `d3.zoom`.

Sep 30, 2018

Loading thumbnail…

Hello VizHub!

This example displays a large, centered “Hello VizHub!” message on a dark background using the Ubuntu font. It demonstrates a basic D3.js setup, importing the `select` function from D3 to set the text of an HTML element. The message itself is defined in a separate local ES6 module, `myMessage.js`, while the styling is handled by an external CSS file. The code also defines a `Random` utility class with seed-based random and Gaussian distribution generators, though this is not used in the visualization itself.

Sep 28, 2018

Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a left-to-right layout. The code employs D3 v5’s `tree` layout and `hierarchy` to structure the JSON data, while `linkHorizontal` draws the connecting paths. Text labels are positioned based on the tree’s node coordinates, with font size varying by depth. Pan and zoom functionality is implemented via D3’s `zoom` behavior on the SVG container. The styling uses a serif font and teal-colored links, with a white text shadow to improve label readability over the paths.

Sep 24, 2018

Loading thumbnail…

World Countries Hierarchy!

World Countries Hierarchy! displays a single, prominent "Hello VizHub!" message centered on a dark background using the Ubuntu font. The visualization is constructed with D3.js version 5, specifically using the `select` API to target the message div. The styling applies a 12em font size and light text color for contrast. The example demonstrates a minimal D3 setup where an ES6 module exports the message string, which is then inserted into the page. The code relies on standard HTML, CSS, and JavaScript module imports to create this straightforward text-based output.

Sep 24, 2018