vaynexie

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

treemap-Video Game Sales

This interactive treemap visualizes the top 100 best-selling video games, grouped by gaming platform, with each tile’s size and color representing sales value and platform category. Hovering over a tile displays a tooltip with the game’s name, platform, and sales figures. The visualization uses D3 v4’s `d3.treemap()` and `d3.hierarchy()` to layout the hierarchical data, which is loaded as JSON from an external source, and renders to SVG.

Untitled

This example displays a treemap visualization of hierarchical data, with the current view showing video game sales grouped by platform, or movie and Kickstarter data sets selectable via links at the top. It uses the d3 v4 API, specifically `d3.treemap()`, `d3.hierarchy()`, and `d3.scaleOrdinal` with the `schemeCategory20` color palette, to render the nested rectangles. The SVG output includes tooltips on mouseover, which display the name, category, and value of each tile using data attributes.

Hello VizHub

This example demonstrates how to set up a minimal VizHub project, rendering the text “Hello VizHub!” from an ES6 module into the center of the page. It uses D3.js’s `select` function to target the `#message` div and update its text content. The project structure shows local CSS and JavaScript imports, with D3 v5 loaded from a CDN in the HTML. It highlights basic module export/import patterns and DOM manipulation with D3.

United States Educational Attainment

A choropleth map of the United States displays the percentage of adults aged 25 and older with a bachelor's degree or higher, using data from the USDA Economic Research Service (2010-2014). County polygons are rendered via `topojson.feature` and `d3.geoPath`, colored by a threshold scale with the `d3-schemeGreens` palette. A tooltip, built with D3's `d3.select` and `d3.map`, shows each county’s area name, state, and percentage on mouseover. The map includes a legend generated with `d3.axisBottom` and a matching color scale.

Monthly Global Land Surface Temperatures

This visualization displays monthly global land surface temperatures from 1753 to 2015, with each cell’s color representing variance from the 1951–1980 average. A hover tooltip reveals the exact month, year, and temperature anomaly. The SVG chart uses d3.scaleTime for the x-axis, d3.scaleQuantize for color mapping, and d3.json to load the FreeCodeCamp dataset. Animated transitions appear only in the tooltip’s opacity changes, while a gradient legend is built with d3.scaleLinear and linearGradient stops.

Hello VizHub

This example demonstrates a minimal setup for building a data visualization with D3.js within the VizHub environment. It renders a static text message, “Hello VizHub!”, into a styled HTML div using the `select` function from D3’s API. The page structure is defined in `index.html`, which loads D3 v5 from a CDN and links an external stylesheet. ES6 modules are used to import the message string from `myMessage.js`, while `bundle.js` bundles the JavaScript code. The visualization highlights the integration of HTML, CSS, and modular JavaScript with D3 for basic DOM manipulation.

Cars Scatter Plot

This visualization displays global surface temperature changes since the 1700s using a heatmap of monthly temperature variances. Each cell represents a year and month, colored on a gradient from mint to dark red based on temperature deviation from a baseline. The code loads data from a JSON file via `d3.json`, renders SVG rectangles with scales created using `d3.scale.linear`, and includes interactive tooltips. The visualization also incorporates D3 axes, a time scale for month labels, and computed color thresholds for temperature ranges.

Loading CSV

This example demonstrates loading a CSV dataset by fetching the Iris Dataset from a remote URL and displaying its raw JSON structure in the browser. The code uses d3.json to retrieve the data, then chains a promise to append a `<pre>` element to the body, formatting the response with JSON.stringify and indentation. The visualization itself is minimal, focusing solely on the data-loading workflow rather than rendering charts or graphs. It relies on D3 v5’s `json` method and standard DOM selection via `select`, making the asynchronous data-fetching pattern explicit.

Untitled

This visualization is a heatmap showing monthly property crime counts in San Francisco from 2005 to 2015. Each cell represents a month and year, colored on a viridis scale from low to high crime totals, with years on the y-axis and months on the x-axis. The code uses d3.nest and d3.map to aggregate the CSV data, d3.scaleBand for axes, and d3.scaleSequential with d3.interpolateViridis for the color encoding. A gradient legend with a d3.axisBottom is rendered using an SVG linearGradient.

Jan 5, 2020

Doping in Professional Bicycle Racing

This scatter plot visualizes doping allegations in professional bicycle racing, with each circle representing a rider’s race time (y-axis) plotted against the year (x-axis). The color distinguishes riders with doping allegations from those without, and a tooltip reveals the rider’s name, nationality, year, time, and doping details on hover. Built with D3 v5, it uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, `scaleOrdinal` with `schemeCategory10` for colors, and `timeFormat` for time labels. Data comes from a FreeCodeCamp JSON file, rendered as SVG with a custom legend and tooltip.

Jan 5, 2020

Scatter Plot with Color Legend

This example displays a scatter plot of cycling race data from the FreeCodeCamp ProjectReferenceData repository, plotting year on the x-axis and race time on the y-axis. The visualization uses D3 v5 scales and axes, with a time format for the y-axis and a linear scale for years. React 16.9 renders the interface, while D3’s `json` loads the dataset. The code includes both a React-based color legend component and circle marks, though the main chart uses D3’s append pattern within a single SVG.

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing how sepal and petal measurements vary across three flower species. The visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal with schemeCategory10 for color encoding, and React components to structure the SVG rendering. Each circle represents a flower sample, with color indicating species and a color legend displaying the categorical mapping. The axes are generated using d3.axisBottom and d3.axisLeft, while circle elements include tooltip titles for hover details.

Scatter Plot with Color Legend

This scatter plot visualizes 35 fastest times up Alpe d'Huez in professional bicycle racing, plotting year against race time in minutes and coloring each dot to indicate whether the rider faced doping allegations. The chart uses d3.scaleLinear for the x-axis, d3.scaleTime for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. An interactive tooltip displays rider details, nationality, year, time, and doping information on hover. The visualization renders as SVG, using React 16 and D3 v5 to load data from a JSON file and generate axes with d3.axisBottom and d3.axisLeft.

United State GDP

This D3.js v4 visualization displays the quarterly gross domestic product of the United States from 1947 to 2015 as a series of vertical bars. An interactive tooltip reveals the exact date and GDP value in billions of dollars for each quarter. The chart uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Data is sourced from the FreeCodeCamp GDP-data JSON file hosted on GitHub. Animated transitions enhance the tooltip and overlay effects.

Monthly Deaths in Syria

This visualization of monthly deaths in Syria uses a bar chart with a red color scheme and interactive tooltips. It aggregates data from the Violations Documentation Center in Syria, summing recorded deaths per month from 2011 to June 2019. The chart renders as SVG using D3.js v5, with axes, gridlines, and labels styled via CSS. Hovering over a bar reveals the exact month and death count through a d3-tip tooltip. The y-axis label is rotated for readability, and the chart resizes to fit the browser window.

Untitled

This visualization shows the monthly aggregated death toll in Syria from 2011 to June 2019, plotted as a bar chart over time. The chart uses D3.js to render an SVG with axes, bars, and a tooltip that appears on hover. Data is sourced from the Violations Documentation Center in Syria via a scraping script. The visualization also includes a dynamic title and a responsive layout styled with CSS, with the y-axis and x-axis drawn using D3’s axis components.

Monthly Deaths in Syria

This visualization displays monthly death tolls in Syria from 2011 to June 2019 as a bar chart, with each bar representing the aggregated count of deaths per month. The chart uses a red color scheme with hover effects that display a tooltip showing the exact month and number of deaths. The visualization is rendered as an SVG using D3 v4, with data sourced from the Violations Documentation Center in Syria, aggregated by month and updated responsively to fill the browser window.

United States GDP

A bar chart displays quarterly United States GDP growth from 1947 to 2015, with each bar’s height representing billions of dollars and hovering revealing a tooltip with the exact value. The visualization uses D3 v5 to load JSON data from FreeCodeCamp’s GitHub repository, scales the GDP values with `d3.scaleLinear`, and renders axis ticks via `d3.axisBottom` and `d3.axisLeft`. Bars are appended as SVG `rect` elements, animated through mouseover and mouseout transitions that show an overlay and tooltip.

Monthly Deaths in Syria

A monthly bar chart displays the number of recorded deaths in Syria from 2011 through June 2019, with each bar representing one month of casualties. The visualization uses a red color scheme, hover tooltips from d3-tip to show exact values, and resizes responsively to the browser window. Data is aggregated from the Violations Documentation Center in Syria using a Node.js script, then processed with datalib and rendered with D3 v4's SVG scales and axes.

Monthly Deaths in Syria

This visualization shows monthly deaths in Syria as a red bar chart, with each bar representing the total number of deaths for a given month. A tooltip, powered by the d3-tip library, displays the exact month and death count on hover. The code aggregates the raw data using the datalib library’s `groupby` and `summarize` methods, then renders the chart as an SVG using D3 v4, with `d3.scaleTime` and `d3.scaleLinear` handling the axes and `d3.axisBottom` and `d3.axisLeft` drawing the ticks.

Circles on a Map

Circles on a Map visualizes global population by country, where the area of each circle corresponds to the 2018 population from UN data. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render world map features, with circles positioned at country centroids using d3.geoCentroid. It supports pan and zoom via d3.zoom, hover tooltips via SVG title elements, and includes a d3.scaleSqrt-based size legend. Countries missing data appear in a distinct pink color.

Dec 30, 2019

Choropleth Map

A choropleth map colors countries by their economic classification using an ordinal color scale with a spectral scheme. The visualization loads world geometry from TopoJSON and country metadata from TSV, joining them by ISO numeric codes, and renders with D3’s `geoNaturalEarth1` projection and `geoPath`. A custom `colorLegend` displays the scale, while zooming and panning are enabled via `d3.zoom`. Hovering highlights countries, and tooltips reveal name and economy class.

Color and Size Legends - Component Experiment

This example demonstrates two reusable legend components rendered with SVG: an ordinal color legend for categorical fruit data and a square-root size legend for a numeric 0–10 scale. Using d3.scaleOrdinal and d3.scaleSqrt, it assigns colors and circle radii, while the legends derive their tick marks from the scale’s domain and d3’s `ticks` method. The code follows the “Towards Reusable Charts” pattern by assigning configuration properties directly onto each component function before invoking it with `selection.call`. The resulting graphic shows both legends side-by-side with distinct spacing, text offsets, and transparent circle fills.

World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and subregion, using a left-to-right layout with curved links. It renders country and region names as text nodes, with font size decreasing by depth. Built with D3 v5, it uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute the layout and paths, while `d3.zoom` enables panning and zooming. The data comes from a JSON file, and the SVG output is styled with a custom serif font and teal link strokes.

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport, serving as a minimal canvas with no data or marks rendered. The SVG element is dynamically sized to match the window dimensions using the D3v5 `select` API, and a single `rect` is appended with a 40-pixel corner radius. The complete visual result is a simple, frameless field, demonstrating basic SVG construction with D3’s selection and attribute-chaining methods against a fixed-position, full-screen body.

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js, showing how data joins handle entering, updating, and exiting elements as fruits are added, removed, or modified. Animated transitions move apples and lemons across an SVG canvas, with circles and text labels updating their positions and colors. The code uses d3.select, data joins with key functions, and transition().duration() to animate changes. Fruit types are mapped to colors and radii via scaleOrdinal, with a static bowl rendered as a rectangle.

Dec 28, 2019

Bowl of Fruit - General Update Pattern

This visualization demonstrates the general update pattern in D3, showing how a data-driven SVG scene responds to changes in an array of fruit objects. Initially, five red apples appear in a row, and the example sequentially removes items, mutates an object's type from apple to lemon, and filters out another element, with each change triggering a re-render via a custom `fruitBowl` function. The code uses D3's `select`, `range`, and `scaleOrdinal` to map fruit types to colors and radii, while `enter()` and `exit()` methods handle the creation and removal of circles.

Dec 27, 2019

Making a Bar Chart (Outtake)

This example shows a horizontal bar chart of continental populations in 2018, with each continent labeled with its total population. The chart renders as SVG rectangles sized by a `d3.scaleLinear` x-axis and positioned by a `d3.scaleBand` y-axis, with text labels added via SVG `<text>` elements. Data is parsed from an embedded CSV string using `d3.csvParse`, with population numbers cleaned via string replacement and numeric conversion. The data originates from Wikipedia’s list of continents by population.

Let's make a face with D3.js!

A D3.js code example builds a yellow smiley face from SVG primitives, including a circular head, eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The face is centered via a translated group, and the eyebrows are rectangles that move up and down using chained `transition()` calls with a two-second duration each. The demo relies on D3 v5's selection methods (`select`, `append`, `attr`) to construct the shape and animate its parts directly in the browser.

HTML Cars Report

This example displays a simple cars report as a bulleted list of vehicles with prices. It shows three car listings, with the first entry, "2012 Nissan Leaf: $1800," highlighted in red text. The page uses basic HTML structure with an unordered list and a CSS stylesheet to control the layout. The body applies a large monospace font, while a specific `.highlighted` class changes the text color of one item, demonstrating fundamental HTML and CSS styling without any JavaScript libraries.

Cars Report

This example displays a simple text report of used cars priced under $2,000, generated from a local JSON array. It shows how to parse the data with `JSON.parse`, filter and map it using array methods, and format each entry with a template literal. The `generateReport` function returns a newline-separated string, which is inserted into the page via `document.getElementById`. The code demonstrates modular JavaScript with `export` and `import` statements, and uses a Promise with `setTimeout` in one module to simulate asynchronous data fetching.

Cars Report

This example demonstrates a text-based car report generated from an in-memory JSON dataset of five vehicles. It shows filtered results, listing cars priced under $2000 as formatted strings combining year, make, model, and price. The implementation uses JavaScript arrays, objects, destructuring, and template literals, with `Array.filter`, `Array.map`, and `Array.join` to transform the data. The report displays in an HTML `<pre>` element, while separate modules (`cars.js`, `formatCar.js`, `generateReport.js`, and `getCars.js`) illustrate modular code organization and a simulated asynchronous `getCars` promise.