Skip to main content
SimilarExport ZIP
100%

D3 & Font-Awesome

✓ Published0🌍 Public
CCurran Kelleher
Last edited May 11, 2015
Created on May 11, 2015

This example shows a row of social media icons rendered with Font Awesome and D3, where each icon responds to mouse interactions by changing background color. The code binds an array of icon names to D3 selections, appending `<i>` elements with Font Awesome classes and applying styles dynamically. It uses D3’s `.on()` method to handle mouseover, mouseout, mousedown, and mouseup events, toggling between default, hovered, and clicked styles. The data source is a hardcoded list of icon identifiers, and the rendering relies on Font Awesome’s CSS classes for glyph display.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 & Font-Awesome

This example demonstrates how to combine D3 with Font Awesome to create an interactive row of clickable social media icons. It shows a static, horizontally arranged set of six square brand icons—including Twitter, Facebook, LinkedIn, YouTube, GitHub, and Google Plus—that respond to user mouse events. The visualization uses D3’s data join to bind an array of icon names to newly appended `<i>` elements, while Font Awesome supplies the glyphs via CSS classes. Hovering changes the background color to light gray, clicking turns it gray and logs the icon name to the console, and releasing restores the hover state. The code relies on D3’s selection and style methods, plus Font Awesome’s CSS framework, with no external data source.

FFrissAnalytics
90% match
Loading thumbnail…

SVG Icons in JS

This example demonstrates how to embed SVG icons directly in JavaScript code as template strings, avoiding the need for separate image files. It displays three icons from heroicons.com—an arrow path, an external link, and a gear—centered in a flexbox layout. Using D3.js, the code maps over the icon keys and injects the SVG markup into div elements via the `.html()` method, then resizes each icon to 250 pixels wide. The approach highlights a clean, dependency-light way to manage icons in web visualizations.

CCurran Kelleher
68% match
Loading thumbnail…

rendering Data with React & D3 with mouse over

This example renders CSS named color data as a donut chart using React and D3. It loads the dataset with `d3.csv` and stores it in React state, then uses a `pie` layout and `arc` generator to draw SVG paths. Mouse over and move handlers on the SVG update a tooltip via `d3.select` and `d3.pointer`, though the tooltip text and visibility behavior are only partially implemented. The chart positions each slice by its color’s hexadecimal value, with all slices given equal weight.

Sseanowh
68% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays CSS named colors as a horizontal stacked bar chart, where each color appears as a thin stripe in sequence. The visualization uses React to manage component state and rendering, while D3’s `csv` utility loads the color data from a remote GitHub gist. Data is fetched asynchronously with React’s `useEffect` and `useState` hooks, and the hex color values directly set each stripe’s background color. The code also includes commented-out logic for computing radial arcs using D3’s `arc` and `pie` functions, though the active rendering uses simple divs.

Bbart
68% match
Loading thumbnail…

Rendering Data with React & D3

This example demonstrates loading CSS named colors data from a GitHub Gist and rendering it with React, using D3 utilities for data parsing and arc geometry. The code uses `d3.csv` to fetch and parse the dataset, then passes it to React state via `useState` and `useEffect` hooks. A D3 arc generator creates pie slices with an inner radius of zero and outer radius equal to the viewport width. The application displays a loading message before the data arrives.

PPiotr Paszek
68% match
Loading thumbnail…

Rendering Data with React and D3

This example displays the 148 CSS named colors as a horizontal stacked bar chart, with each color rendered as a 4-pixel-tall div whose background color matches its RGB hex value. The application loads the dataset using D3’s `d3.csv` utility and then uses React components to map each row into styled HTML elements. The code combines React’s state management with D3’s data-fetching API, and renders the output via ReactDOM.

IIverefiner
68% match
Loading thumbnail…

Rendering Data With D3

This example renders the CSS named colors from an MDN dataset as a vertical stack of horizontal bars, each colored by its hex value. The visualization uses React to manage component state and render the data, while D3.js v7 loads the CSV file via `d3.csv`. Each row is mapped to a styled HTML `<div>` element, with the dataset loaded asynchronously and displayed once available. The code also includes a utility to summarize dataset size and structure using `d3.csvFormat`.

Ppranav-vis
67% match
Loading thumbnail…

Rendering Data React & D3

This example displays CSS named colors as horizontal stacked bars, with each row rendered as a div whose background color corresponds to the RGB hex value from the dataset. It uses React hooks (useState, useEffect) to fetch and store data loaded via d3.csv from a gist, and conditionally renders a loading message until the data arrives. The visualization maps each color record to a fixed-width, 4-pixel-high row, producing a dense, rainbow-like strip.

RRedSorrel
67% match