DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • What ChatGPT Needs Is Context
  • Competing Consumers With Spring Boot and Hazelcast
  • Observability Architecture: Financial Payments Introduction
  • The SPACE Framework for Developer Productivity

Trending

  • What ChatGPT Needs Is Context
  • Competing Consumers With Spring Boot and Hazelcast
  • Observability Architecture: Financial Payments Introduction
  • The SPACE Framework for Developer Productivity
  1. DZone
  2. Data Engineering
  3. Data
  4. Building Tabular Data Format with D3

Building Tabular Data Format with D3

Trevor Parsons user avatar by
Trevor Parsons
·
May. 12, 15 · Interview
Like (0)
Save
Tweet
Share
3.91K Views

Join the DZone community and get the full member experience.

Join For Free

[This article was written by Krystian Janowski]

In my previous posts I have demonstrated how to combine D3 with AngularJs(wrapping D3 code in Angular’s directives) and how to build effective data visualization with D3. In this post I will focus on building tabular format of data with D3.building-tabular-data-format-with-d3

Tabular representation of data is often the simplest and clearest way of showing the data to the user. Graphical representations such as Bar chart and Line charts are also effective in communicating the data to the user but Table format can even simplify it.

At Logentries we recently introduced “Table View” for our graphs. Our users can flip between a graphical representation of data and a tabular representation. The table component was built using D3 JS. Initially it may seem a bit strange to build tables with D3, but there is a reason. All of the charts which are currently available in our Dashboards have been built using D3. Those charts are reusable components and they can be used anywhere in the application. This was the main factor why we have chose D3 to build the table, creating a reusable component. Since different charts represent different data views, creating one Table component that would work with all of them became a small challenge. This mostly applies to different types of data such as dates, numbers and strings. To make the Table a reusable component, formatting of the data was crucial. For example Line chart displays data point over time, which is dates. Those dates needed to be formatted correctly. Lets look on how the table is constructed with D3.

1. First we need to append the table to the DOM. Since the table takes the place of the chart we need to make sure to remove all previous SVG elements from the DOM.

Vardeselect

2. Then we need to append the header row to the Table. As a data attribute we can pass columns, which is an array of column names.

thead.append

3. Next step is to create a row for each object in the data.

var rows

4. Finally the most important step is to create a cell in each row for each column. In each cell we return the column and the actual value. Since values can differ, some being numbers other strings, we need to format the data. We can use a helper function which will do the formatting. The formatting function checks if a passed value is a date, number or a string, then based on that check it returns the formatted value.

var cells

One final part is the initialization of the table chart. The Table component takes three arguments id of element, data series and column series.

draw table



Data visualization Database

Published at DZone with permission of Trevor Parsons, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • What ChatGPT Needs Is Context
  • Competing Consumers With Spring Boot and Hazelcast
  • Observability Architecture: Financial Payments Introduction
  • The SPACE Framework for Developer Productivity

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: