F

forcox43

@forcox43·41 public vizzes

Loading thumbnail…

Working with Time Connected dots

This example visualizes temperature readings over a week in San Francisco, plotting a smooth line through connected time-series data points. The chart uses D3 scales (`scaleTime` and `scaleLinear`) to map timestamps and temperatures, while React components render the SVG axes and marks. The `Marks` component builds a natural curve path using `d3.line` with `curveNatural`, which only draws the line without individual numeric labels for each point. Data is loaded asynchronously from a CSV file using D3’s `csv` parser, and the resulting graphic includes labeled axes, a title, and a clean, minimal styling with a teal stroke.

Loading thumbnail…

Working with Time

This example displays a time series of temperature readings for a week in San Francisco, with each data point plotted as a circle. The chart uses a time-based x-axis and a linear y-axis for temperature. The visualization is built with React and D3 v6, leveraging D3's `scaleTime`, `scaleLinear`, and `timeFormat` APIs to handle axis scaling and tick labels. Data is loaded asynchronously via D3's `csv` function from a remote CSV file. The SVG rendering includes custom axes and interactive tooltips that show the date on hover.

Loading thumbnail…

Stylized scatter plot of the Iris Dataset

A stylized scatter plot visualizes the Iris Dataset, displaying petal length along the x-axis and sepal width along the y-axis. The chart is built with React and D3 v6, using SVG rendering for crisp, scalable graphics. Data is loaded and parsed from a CSV file via a custom React hook that converts string values to numbers. The visualization employs D3's scaleLinear for axis scaling and extent functions, while custom React components handle axis tick rendering and show tooltips with formatted values.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population, using the UN Population 2019 dataset. Each horizontal bar is rendered as an SVG rectangle, with country names on the y-axis and population values on the x-axis, formatted using d3.format. The chart prominently features a large title and axis labels styled with the Poppins font. Built with React and D3 v6, it uses scaleBand and scaleLinear to position bars and generate ticks, while the d3.csv loader parses the data and scales population values by 1000.

Loading thumbnail…

Refactored Bar Chart

This example visualizes the top 10 countries by population in 2020 using a horizontal bar chart. The chart displays a linear x-axis for population values and a categorical band scale for country names, with bars rendered as SVG rectangles. Built with React and D3 v6, the code separates concerns into reusable components for axes and marks, and loads data from a CSV file using the `csv` function. The scaleLinear and scaleBand APIs handle the mapping, while React hooks manage the asynchronous data fetching.

Loading thumbnail…

Axes with React and D3

This example visualizes the top 10 countries by 2020 population as horizontal bars, displaying the data as text labels and bars using React components and D3 scales. The code builds SVG elements from scratch, using `scaleBand` for the y-axis country labels and `scaleLinear` for the x-axis population values, with axis ticks rendered manually. It loads UN population data from a CSV file via `d3.csv` and uses React hooks like `useState` and `useEffect` to fetch and render the data, with the final chart presented as an interactive SVG graphic.

Loading thumbnail…

The Margin Convention

This example demonstrates the “margin convention” for bar charts, displaying the top 10 most populous countries in 2020. The visualization uses React to manage state and render SVG rectangles, while D3.js v6 handles data loading via `d3.csv` and scales for positioning. The chart applies explicit top, right, bottom, and left margins to define an inner plotting area, translating the SVG group accordingly. The data comes from a UN population CSV file, and the y-axis uses `scaleBand` for country labels, while `xScale` is a linear scale for population values.

Loading thumbnail…

Rendering Pathetic Bar Chart data with React and D3 number 3

This example loads UN population data from a CSV file and renders the ten most populous countries as horizontal bars in an SVG using React and D3. The React component manages the data state with hooks, while `d3.csv` parses the dataset and `scaleBand` and `scaleLinear` map country names and population values to screen coordinates. The bars are drawn as SVG `<rect>` elements, with no axes or labels beyond the chart title. The code demonstrates a minimal integration of React’s declarative rendering with D3’s scales and data loading utilities.

Loading thumbnail…

Rendering data with React and D3 number 2

This example shows the CSS Named Colors dataset rendered as a donut chart, where each slice represents a named color. Using React for component structure and D3 v6 for data loading and shape generation, the code loads CSV data via `d3.csv`, computes pie angles with `pie()`, and draws arcs with `arc()`. The SVG paths are filled with each color’s RGB hex value, producing a colorful circular visualization. React state and hooks manage the asynchronous data loading, displaying a loading message until the data arrives.

Loading thumbnail…

Rendering data with React and D3

This example visualizes CSS named colors as a radial pie chart of 148 colored arcs, with each arc’s fill mapped from the dataset’s RGB hex values. Using React hooks (useState, useEffect) to load CSV data via d3.csv, it renders SVG paths with d3.arc, computing start and end angles from array indices. The visualization demonstrates integrating React’s declarative component model with D3’s shape generators for data-driven rendering.

Loading thumbnail…

Rendering data with React and D3

The example shows a React application that loads and renders CSS named colors from a CSV file as a vertical stack of 4-pixel-tall color swatches. It uses the `useState` and `useEffect` hooks to asynchronously fetch the data with `d3.csv`, then maps each row to a styled `div` element whose background color is set from the `RGB hex value` column. The code also includes a separate plain D3 version that parses the same CSV and reports its size, row count, and column count using `d3.csvParse` and `d3.csvFormat`.

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between acceleration and horsepower, with tooltips revealing car names on hover. Created using the Vega-Lite API, it loads CSV data from a GitHub gist via d3.csv, then renders the visualization through Vega-Lite’s markPoint encoding. The code registers vega, vega-lite, and the vega-tooltip handler, applies a custom dark-themed configuration for axes and labels, and embeds the result in the browser window.

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and parse CSV data within a React application using D3. The app fetches a dataset of CSS named colors, then displays a summary message showing the data’s size in kilobytes, row count, and column count. The code combines React’s `useState` and `useEffect` hooks with the `d3.csv` function to asynchronously fetch and parse the data. It also includes an alternative implementation using the `fetch` API with `d3.csvParse` and a comparison of different asynchronous patterns.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in D3.js v6, showing the size, row count, and column count of a CSS Named Colors dataset. It uses `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to compute the data size in kilobytes. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`, illustrating different approaches to asynchronous data loading in D3.

Loading thumbnail…

Melting Data for Multiple Lines with D3.js!

This visualization shows population projections from 1950 to 2100 for multiple world regions, with each region represented as a colored line. The chart uses D3.js 5.16 within a React framework, loading data from UN population estimate CSV files via `d3.csv`. The code demonstrates data “melting” from wide to long format, then uses `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with a category-10 color scheme. Axes, legends, and labels are drawn in SVG, with a custom color legend component and styling via CSS.

Loading thumbnail…

Selecting a Year on a Line Chart with D3.js!

This example presents a line chart of global population estimates from 1950 to 2100, with lines colored by region. A vertical black line marks the selected year, and moving the mouse over the chart updates this line to the nearest year. The visualization is built with D3.js (v5) using the `select` API, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generators, with data loaded from CSV files. The line chart and color legend are implemented as reusable components (using `selection.enter` and `merge`) within a React framework, rendering to SVG.

Loading thumbnail…

Line Chart with Multiple Lines with D3.js!

This visualization displays a week of temperature data from multiple cities worldwide, using distinct colored lines to represent each city’s temperature changes over time. Built with React and D3.js (v5), it employs scales like `scaleTime` and `scaleLinear`, a `line` generator with `curveBasis`, and nested data via `nest` to group readings by city. A custom `colorLegend` component renders the legend. The data originates from Data Canvas – Sense Your City, presented as an SVG.

Loading thumbnail…

Circles on a Map with D3.js!

This visualization displays world population estimates for 2018 as semi-transparent circles positioned at country centroids on a Natural Earth projection map. Circle size encodes population magnitude, while a color legend categorizes countries by income group. The code uses D3.js v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus TopoJSON data from world-atlas and UN population CSV data. Interactive zooming is implemented via `d3.zoom`, with SVG rendering and custom color and size legends.

Loading thumbnail…

Cars Scatter Plot with menus with D3.js!

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing viewers to explore relationships between car attributes like weight, horsepower, and acceleration. Two dropdown menus let users select which columns to plot on the x and y axes. Built with React and D3.js version 5, the visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and animated transitions for circles that move to their new positions when the selected variables change.

Loading thumbnail…

Choropleth map with Interactive Filtering in D3.js!

A choropleth map of world countries colored by economic category supports interactive filtering: clicking a legend swatch dims all countries not in that category, with a highlighted stroke on the selected group. Built with React and SVG, the map uses `d3.geoPath` with the `geoNaturalEarth1` projection and `d3.scaleOrdinal` with the `schemeSpectral` palette. Data is loaded from the world-atlas TopoJSON and TSV files, and zooming is handled via the d3 `zoom` event.

Loading thumbnail…

Choropleth map with D3.js!

This choropleth map visualizes world countries colored by income group using D3.js. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with country boundaries loaded from TopoJSON world-atlas data and income classifications joined from a TSV file. A color legend built with `scaleOrdinal` and `schemeSpectral` displays the categorical color scale. Interactive zooming is implemented through `d3.zoom`, and hovering over a country highlights it in red while a tooltip reveals its name and income group.

Loading thumbnail…

Color and size legends with D3.js!

This example demonstrates how to build custom color and size legends using D3.js v5 in a React application. It shows an ordinal color scale mapping fruit names to distinct colors, alongside a square-root size scale with five ticks rendered as proportionally sized circles. The code defines reusable legend components that use selection joins with `merge()` and `exit().remove()` to manage SVG groups dynamically. Both legends render as SVG, with circles and text positioned using transform attributes and spacing parameters.

Loading thumbnail…

World Countries Tree with D3.js!

This visualization presents a hierarchical tree of world countries, organized by continent and sub-region based on a nested JSON data structure. The tree renders as an indented horizontal layout using SVG paths and text elements, with the D3.js library managing the layout calculations. The code leverages D3's `tree`, `hierarchy`, and `linkHorizontal` APIs to position nodes and draw connecting lines, while a zoom interaction via `d3.zoom` allows panning and scaling. The styling uses a custom serif font and white text shadows for readability.

Loading thumbnail…

BLANK CANVAS with D3.js!

A blank canvas fills the browser viewport with a rounded rectangle, demonstrating a minimal setup for D3.js visualization. The code imports the `select` function from D3 and uses `document.body.clientWidth` and `clientHeight` to size an SVG element dynamically. It appends a single `rect` with rounded corners via the `rx` attribute, styled through a fixed-position CSS body that removes margins and hides overflow. This example shows how to create a full-screen drawing surface using D3 v5 with SVG rendering in a React environment.

Loading thumbnail…

Cheap tricks with interaction with a map with D3.js!

This example displays a natural Earth projection of the world map, rendered as SVG paths filled with light green and hover effects that turn countries red. It loads country boundaries from the world-atlas TopoJSON and TSV data on unpkg, joining IDs to names. The visualization implements zooming and panning through the `d3.zoom` API, applying the interaction transform to all country paths. Code uses `d3.geoPath` with the `geoNaturalEarth1` projection, the `topojson` feature extraction library, and React-style imports from `d3` and `topojson`.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered with an equal-area natural Earth projection, with each country filled in light green and outlined with subtle black strokes against a blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the `feature` function from TopoJSON. The map is drawn as SVG paths generated with D3's `geoPath` and `geoNaturalEarth1` projection APIs, demonstrating a minimal React-free D3 mapping workflow.

Loading thumbnail…

Bowl of Fruit - Hoover to select events with D3.js!

This example demonstrates interactive selection in a data visualization using D3.js within a React application. Animated SVG circles represent fruits in a bowl—apples and lemons—which appear, disappear, and change type over time. Users can hover over a circle to highlight it with a black stroke, triggering a selection event that updates the visualization's state. The implementation uses D3's `select`, `scaleOrdinal`, and transition APIs to manage animated enter, update, and exit states for the circles, driven by a `setSelectedFruit` callback.

Loading thumbnail…

Bowl of Fruit - Click events with D3.js!

An interactive bowl of fruit visualizes how D3.js handles click events and dynamic data updates. The SVG scene renders apples and lemons as colored circles, with a black stroke highlighting the currently selected fruit. Clicking any circle triggers a callback that updates the selection state and redraws the visualization. The code uses `selection.enter()`, `merge()`, and `exit()` to manage data joins, while `transition().duration(1000)` animates circle positions and radii. Data changes occur through scheduled `setTimeout` calls that remove items or change fruit types, demonstrating React and D3 integration.

Loading thumbnail…

Bowl of Fruit - Click to select! with D3.js!

This example shows a bowl of fruit rendered as SVG circles and labels, where apples and lemons are distinguished by color and size. The visualization updates over time as fruits are removed or replaced, demonstrating how D3.js 5 with React-like merge and exit operations handles dynamic data changes. Using `scaleOrdinal` for color and radius mappings, the code appends groups with circles and text, adjusting their positions and attributes as the fruit array mutates.

Loading thumbnail…

Bowl of Fruit - General Update Pattern with labels! with D3.js!

This example demonstrates the general update pattern in D3.js, showing how a static bowl of fruit changes over time as items are eaten or replaced. The visualization uses SVG rendering with React, where circles represent apples and lemons, colored and sized via `scaleOrdinal` encodings. The code animates through three distinct transitions—removing an apple, swapping an apple for a lemon, and filtering out another—using `selectAll`, `enter`, `merge`, and `exit` to manage dynamic data updates. The fruit bowl itself is a rounded rectangle, and text labels appear below each fruit, all orchestrated through the custom `fruitBowl` function called sequentially with setTimeout.

Loading thumbnail…

Bowl of Fruit - General Update Pattern with D3.js!

This example demonstrates the general update pattern in D3.js through a bowl of fruit rendered as SVG circles. Apples and lemons are represented with color and radius scales, and the visualization cycles through enter, update, and exit transitions over time. Using D3’s `selectAll`, `.data()`, `.enter()`, `.merge()`, and `.exit()` methods, the code animates circle arrival, position shifts, type changes, and removal with `transition().duration(1000)`. The render loop triggers state changes via `setTimeout`, showcasing how data joins handle dynamic modifications smoothly.

Loading thumbnail…

World Population Area Chart with D3.js!

This area chart visualizes world population trends over time using a smooth, filled path. The chart leverages D3.js v5 within a React scaffold, encoding time on the x-axis and population on the y-axis via `scaleTime` and `scaleLinear`. Data is loaded from a CSV using `d3.csv`, and the area is generated with `d3.area` and `curveBasis`. The SVG rendering includes axes from `axisBottom` and `axisLeft`, with data sourced from United Nations World Population Prospects 2017.

Loading thumbnail…

Temperature in SF Line Chart with D3.js!

This area chart visualizes one week of temperatures in San Francisco, using a smooth curve to show temperature changes over time. The data comes from Data Canvas - Sense Your City, with timestamps and Celsius readings plotted on time and linear scales. The code uses d3.area, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.curveBasis to generate the SVG path and axes, with a maroon fill for the area and styled tick labels.

Loading thumbnail…

Temperature in SF Line Chart with D3.js!

A line chart displays a week of temperature data for San Francisco, using timestamps on the x-axis and temperature in degrees Celsius on the y-axis, with data sourced from Data Canvas - Sense Your City. The example uses D3.js functions including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, `axisLeft`, and `axisBottom` to render the SVG chart. The visualization includes grid lines, labeled axes, a title, and a maroon smoothed line path, all styled via CSS within a React framework.

Loading thumbnail…

Temperature in SF Scatter Plot with D3.js!

This scatter plot visualizes a week of temperature data in San Francisco, displaying temperature in degrees Celsius over time. The code imports functions from D3.js, including `select`, `csv`, `extent`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom`, to render an SVG chart. Data is loaded from a CSV URL and parsed, with the plot featuring labeled axes, grid lines, and steelblue circles. The chart includes axis labels and a title, with styling applied via external CSS.

Loading thumbnail…

Cars Scatter Plot with D3.js!

This scatter plot visualizes the relationship between horsepower and weight for cars in the UCI Machine Learning Repository’s Auto MPG dataset. Using React and D3.js, the code calls `csv` to load data and `scaleLinear`, `axisLeft`, `axisBottom`, `extent`, and `format` to render axes and circles as SVG elements. The chart includes labeled axes, gridlines via tick sizes, and semitransparent red circles, with a title displayed above the plot.

Loading thumbnail…

Scatter Plot with D3.js!

This scatter plot displays the population of the top ten most populous countries in 2018, with each circle positioned along a point scale for country names and a linear scale for population values. The visualization uses D3.js v5 within a React framework, rendering SVG elements via `select`, `scaleLinear`, `scalePoint`, and `axisBottom`/`axisLeft` to create labeled axes with custom tick formatting (converting billions to B). Data comes from the United Nations World Population Prospects 2017, loaded from a CSV with `d3.csv`, and the chart includes gridlines and axis titles styled through CSS.

Loading thumbnail…

Making a Bar Chart with D3.js!

This bar chart displays the population of the top 10 most populous countries, using data from the United Nations’ 2017 World Population Prospects (2018 estimates). The population values are multiplied by 1,000 to reflect actual counts. Built with React and D3.js, the visualization renders as an SVG. It uses D3’s `scaleLinear` and `scaleBand` for axes, with `axisBottom` and `axisLeft` to draw ticks, and formats large numbers via `format('.3s')`. The chart’s bars are represented as circles, with original tick lines and axis domains removed for a cleaner aesthetic.

Loading thumbnail…

Making a Bar Chart with D3.js!

This visualization uses D3.js to render a horizontal bar chart of the top ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart displays population figures (in thousands) along the x-axis and country names along the y-axis, with steel-blue bars and formatted tick labels (using abbreviations like "B" for billions). The code employs D3’s `csv` loader, `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes, all rendered as SVG within a React framework.

Loading thumbnail…

Making a Bar Chart with D3.js!

This visualization uses D3.js to render a horizontal bar chart of the top ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart displays population figures (in thousands) along the x-axis and country names along the y-axis, with steel-blue bars and formatted tick labels (using abbreviations like "B" for billions). The code employs D3’s `csv` loader, `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes, all rendered as SVG within a React framework.

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.