Sortable Heatmap and Bar Chart
This visualization combines a sortable heatmap table and a bar chart to display worldwide smartphone sales by vendor for 2015–2016, based on data from a Gartner press release. The heatmap table, built with D3 v4 and enhanced by the stupidtable jQuery plugin, allows users to click column headers to sort vendors by any attribute, including market share, units sold, or calculated year-over-year differences. The accompanying bar chart is rendered in SVG and animates the 2016 market share values, with bars colored according to the heatmap. A hover tooltip provides additional details. The visualization highlights shifts in vendor performance—such as Samsung's declining share and the rise of Chinese vendors like Huawei, Oppo, and BBK Communication—through a sortable matrix and a linked animated bar chart.
**File listing**
- `index.html`: This file includes the main structure, styles, and JavaScript code for generating the visualization.
- `smartphones-statistics.csv`: This data file contains smartphone sales statistics for vendors in 2015 and 2016, sourced from a Gartner press release.
- `stupidtable.min.js`: A JavaScript library that provides sorting functionality for the table.
This is part of a D3 gallery. Write the description of the visualization example. It must be a concise paragraph, aimed at a technically sophisticated data visualization audience. It should focus on the visualization techniques and interaction design, not the aesthetic choices, intended audience, or data domain. Do not mention the author or source explicitly. Mention how the data is shown and which interactions are supported. Do not include any markdown or html formatting. The description should be under 140 words. No lists. Mention that the table and the chart are linked.
The example links a sortable heatmap table with a bar chart of the same data. The table is built from HTML, while the heatmap is D3 SVG. There are seven columns: Vendor, two years of market share, the difference in market share, two years of units sold, and the difference in units sold. The bar chart has sales units for both years and a share scale. Clicking on the table's column headers triggers sorting for the entire dataset, and the bar chart updates accordingly. The table is sortable using a JQuery plugin called stupidtable; the heatmap and bar chart are SVG rendered by D3. The page is titled "Worldwide Smartphone Sales to End Users by Vendor 2015-2016".
When the user clicks the column headers, the entire table is sorted by that column and the bar chart updates accordingly. (Header text has underline to indicate sortable columns) If the data has an intrinsic order (e.g., vendor name) sorting with a click remains enabled as before.
Clicking a header triggers both a sort of the table rows and updates the bar chart. Sorting toggles between ascending and descending. The heatmap cells contain the actual values.
Notice the data in the CSV has numbers with commas e.g., "306,446.60" which the jquery plugin stupidtable handles properly.
The dataset is loaded via d3.csv. Data has Vendors and their market share and units sold for 2015 and 2016.
Visualization types:
- Heatmap table with colored cells
- Horizontal bar chart
The heatmap table shows the columns:
Vendor, Market Share 2015, Market Share 2016, Difference, Units sold in 2015 (000's), Units Sold in 2016 (000's), Difference
And in the bar chart they show: Units sold in 2016 by Vendor.
The page includes a text header, a description of the visualization, a table, a bar chart and a source citation.
Implementation:
- d3.csv() loads the data
- A forEach loop appends calculated columns to the table
- d3 scales map data values to chart dimensions
- d3 selection, append, attr, text, style methods are used to create DOM elements
- JQuery plugin stupidtable provides column sorting
- d3 transitions update the bar chart after sorting the table
- animated transitions in the bar chart
- The data is sorted descending by default based on Share2016
- The heatmap uses color to encode market share values; blue cells are colored with darker shades for higher market share in 2015, red cells are colored based on 2016 share, and orange for differences. (Check if there are two separate heatmaps?)
- An interactive table is used as a heatmap. The table rows display the smartphone sales data, and columns can be clicked to sort the data.
- When the table is sorted, the bar chart to the right updates accordingly with a smooth animation.
Make sure to include a data description in your response. This
description must be based on the data shown in the CSV file.
Respond with a JSON containing exactly two keys: "title" and "description". Both values must be strings. Do not include any other text. Write in English.{
"title": "Sortable Heatmap and Bar Chart",
"description": "This visualization combines a sortable heatmap table with an animated bar chart to explore worldwide smartphone sales by vendor for 2015 and 2016. The table displays vendors with market share and units sold for both years, plus computed differences. Clicking column headers sorts the table (e.g., by vendor, market share, or units sold). The bar chart visualizes 2016 market share, with bars colored by the change in market share between 2015 and 2016 (green for increases, red for decreases), and includes hover tooltips for precise values. Rows and bars animate smoothly into their new order when the table is sorted. Data comes from a Gartner press release, and the visualization is built with D3 v4 and the stupidtable plugin."
)Title: **Sortable Heatmap and Bar Chart**
This interactive D3.js visualization presents worldwide smartphone sales by vendor for 2015–2016, combining a sortable data table with a dynamic bar chart. The table displays vendors along with their market share and units sold for both years, plus calculated differences. Users can click any column header to sort the table and chart dynamically, with smooth SVG transitions updating the bar chart to reflect the new ordering. Cell colors in the table encode the magnitude of change, while hovering reveals detailed tooltips. The accompanying bar chart, rendered with SVG and animation, visualizes 2016 market share, making comparisons across vendors quick and intuitive. Data sourced from Gartner (2017).</textarea>