Fork of Fork of Table

100%

Fork of Fork of Table

✓ Published2🌍 Public

Last edited Aug 29, 2023

Created on Aug 29, 2023

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

90% 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

90% match

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

83% match

Loading thumbnail…

Fork of filters changing the headers correctly

This interactive table visualizes assessment data, allowing users to filter by frequency (Daily, Weekly, BiWeekly, Monthly) via a custom menu. The table displays DPC website names as rows, with columns dynamically updating to show the 12 most recent time periods—dates, weeks, or month-year labels—depending on the selected frequency. Built with D3.js v7, the visualization uses `d3.csv` to fetch remote data and `d3.group` to structure entries. The menu component is custom-built with an `on` method that triggers table regeneration.

GGayan Priyadarshana

82% 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

80% 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

76% match

Loading thumbnail…

filters changing the headers correctly

This interactive table filters pharmaceutical assessment data by frequency (Daily, Weekly, BiWeekly, Monthly) via a custom D3 menu. It displays a leaderboard of DPC websites, with columns dynamically updating to show the latest twelve time periods matching the selected frequency—dates, weeks, or month-year headers. Built with D3 v7, the code uses d3.csv for data loading, d3.group for aggregation, and custom menu and dispatch APIs to update table headers and cells reactively based on user input.

GGayan Priyadarshana

76% 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

75% match