Skip to main content
SimilarExport ZIP
100%

PERIODIC TABLE

✓ Published0🌍 Public
JJoker-tr
Last edited Jan 15, 2020
Created on Jan 15, 2020
Forked from Hello VizHub

This interactive periodic table maps common data visualization types onto a grid of colored circles, each labeled with a two-letter abbreviation. Users can hover to see the full chart name, click to log it to the console, and press to temporarily change the fill. Built with D3 v5, it uses SVG rendering, CSV data loading via `d3.csv`, and mouse event handlers for tooltips and interaction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

JJoker-tr
77% match
Loading thumbnail…

Table

This gallery shows a table of tabular data, rendering each record as a row with cells for every column. The data is added to the page via an HTML table, with a header row containing the column names. It uses D3.js to bind the data and create the table structure. The example is connected to a dashboard through the `Table` function in `table.js`, pulling from a CSV file of periodic table elements.

JJerfaas
73% match
Loading thumbnail…

Table

This visualization is an interactive dashboard that displays a single chart at a time, selected from a drop-down menu of eleven different chart types, including bar charts, pie charts, area charts, scatterplots, and a spectrogram. The dashboard generates charts using D3 v5, rendering with SVG and canvas, and supports an animated spectrogram that analyzes audio data. It uses D3 scales and axes, including `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`, to map data from sample CSV files.

RRostyslav
73% match
Loading thumbnail…

Type Table

This example visualizes a table of DPC website publication data, displaying monthly price changes across twelve time periods. Rows are sorted alphabetically by website name, while columns represent recent months in descending order. Cell background colors encode the magnitude of change, using a quartile-based color scale that ranges from red for low values through yellow to green for high values. The visualization uses D3.js, loading CSV data via `d3.csv`, grouping with `d3.group`, and building the HTML table dynamically with D3 selections. A custom menu component enables frequency selection.

Cchris.shimotake@gmail.com
71% match
Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini
70% match
Loading thumbnail…

Interactive Color Legends with informative Tooltips and dropdown menu

This interactive D3.js scatter plot explores correlations in global life expectancy data from a CSV file, with dropdown menus to select variables for the x- and y-axes. A color legend, using an ordinal scale with ten categories, encodes continents; clicking a legend item highlights that continent’s data points. Hovering over a circle displays a tooltip with the continent, year, and axis values. The visualization uses SVG rendering with animated transitions for circles as axes change, and includes D3's `scaleLog` for axes and `axisBottom`/`axisLeft` for ticks.

Yyyaaa1
70% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
70% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
70% match