Type Table

100%

✓ Published1🌍 Public

Last edited May 3, 2024

Created on May 3, 2024

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.

AI-generated description

https://d3-graph-gallery.com/graph/bubblemap_template.html

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Type Table

This fork of the Type Table displays a color-coded matrix of DPC website publication prices across twelve recent year-month columns. The table groups rows by website name, sorted alphabetically, and uses a menu component from a custom `menu()` module to select frequency. The visualization builds an HTML table using d3.csv, d3.group, and d3.select, with cell backgrounds colored based on Change value percentiles—red for low, yellow for zero, and green for high—via inline style functions. Data comes from a static CSV hosted on GitHub Gist.

CChindamrohan321@gmail.com

85% match

Loading thumbnail…

Fork of Table

This table visualization displays monthly price data for DPC websites, with columns representing the most recent twelve months and rows sorted alphabetically by website name. Cell background colors encode percentage changes using a diverging scale from red through orange to green, calculated from quartile thresholds of all change values. The page includes a frequency menu built with a custom d3.menu component, though it only logs selection changes to the console. The implementation uses d3.csv for data loading, d3.group for aggregation, and d3.select for DOM manipulation.

GGayan Priyadarshana

84% match

Loading thumbnail…

Fork of Table

This visualization presents a tabular heatmap of price changes across various DPC websites, organized by website name in rows and the most recent 12 year-month periods in columns. Each cell displays a numeric change value, with background colors encoding the magnitude of change: reds indicate lower values, oranges mark zero, and greens represent higher values, based on quartile thresholds. The table is built using D3 v7, loading CSV data with `d3.csv`, grouping rows with `d3.group`, and sorting year-month pairs in descending order.

GGayan Priyadarshana

83% match

Loading thumbnail…

Table

A data table displays steel scrap prices for various DPC website names, showing the new price, prior price, and value change across the latest 12 year-month periods. Rows are grouped by publication name and sorted alphabetically, while columns are ordered chronologically with headers like "Dec19". The code uses d3.csv to load the data and d3.group to organize it, with d3.append building the table structure. Cell background colors encode the Change column using quartile-based thresholds, ranging from red for low values to green for high ones.

GGayan Priyadarshana

80% match

Loading thumbnail…

Fork of Fork of Table

This interactive D3.js v7 visualization displays a heatmap-style pricing table for DPC website names, comparing new price values against change percentages across time periods. The visualization includes a dropdown menu allowing users to filter data by assessment frequency (Daily, Weekly, BiWeekly, or Monthly), dynamically updating the table to show the 12 most recent time columns. The code utilizes D3's `csv` for data loading, `group` for data aggregation, and custom menu functionality with `dispatch` events. Data is filtered and sorted in descending chronological order, with color-coded cells indicating price changes.

GGayan Priyadarshana

80% match

Loading thumbnail…

weekly filter try

This interactive table visualizes website assessment frequencies, filtering data by daily, weekly, bi-weekly, or monthly intervals via a custom dropdown menu. It dynamically displays the 12 most recent time periods as column headers, grouping rows alphabetically by DPC website. The visualization uses D3 v7 modules (`csv`, `select`, `group`) and a reusable menu component built with `dispatch`. Data originates from a remote CSV file hosted on GitHub Gist. HTML table elements are created and updated through D3’s data join methods.

GGayan Priyadarshana

72% match

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

72% match

Loading thumbnail…

Working all filters

This example shows a filterable data table that displays website assessment records across time periods. A dropdown menu lets the user select a frequency—Daily, Weekly, BiWeekly, or Monthly—which updates the table to show the latest 12 columns of data for that interval. The code uses D3.js v7 modules including `csv`, `select`, `group`, and a custom `menu` component built on `dispatch`. Data is loaded from a CSV file, then grouped by website name and sorted by date, with column headers dynamically generated based on the selected frequency.

GGayan Priyadarshana

71% match