How JD’s 11.11 Data Center Dashboard Turns Traffic into Real‑Time Visual Stories

What Is a Data Screen?

Data screens are a form of data visualization that transforms complex, abstract data into clear graphics, enabling precise and efficient analysis and communication.

Design Concept

Designers treat a data screen like a story, using three elements—charts, interaction flow, and environment scene—mirroring the novel’s characters, plot, and setting. They first ask: who is the audience, why tell this story, and how to tell it.

The 11.11 dashboard visualizes traffic details of multiple data centers, including public outbound, internal dedicated lines, real‑time traffic, trends, peaks, and bandwidth.

We introduced the “data factory” concept, arranging information as a pipeline for visual processing.

Step‑By‑Step Creation

1. Data Selection – Choose the most relevant metrics for the story and match them with appropriate chart types. We recommend the open‑source JavaScript library

ECharts

for its rich chart collection.

2. Combine Data with 3D Models – Place data within a 3D scene, using perspective, lighting, and dynamic effects to reduce visual dissonance.

3. Modeling – Build data‑center models from topology diagrams, simplify the factory environment, and increase detail for key components.

4. Rendering – Apply metallic, glass, and emissive materials; use color cues (e.g., green for normal, yellow for fault) to indicate status.

5. Data Assembly – Organize massive data according to Occam’s razor, adding legends for guidance.

6. Animation – Add dynamic flow effects that reflect real‑time traffic, ensuring motion conveys information rather than distracts.

7. Sound – Incorporate ambient music and subtle mechanical sounds to enhance immersion and feedback.

Conclusion

While 3D effects create a striking visual impact, they must serve the primary goal of displaying data and conveying insights. Designers should use 3D, animation, and sound as tools that amplify the data’s value rather than as mere showmanship.