Using Compose SDK with D3 Packed Bubble Charts
How to Build a Packed Bubble Chart Using D3.js and the Sisense Compose SDK
What Is D3.js?
D3.js (Data-Driven Documents) is a popular JavaScript library used to create complex, data-driven visualizations in the web browser. D3 allows developers to bind data to a Document Object Model (DOM) and apply transformations to the data using SVG, HTML, and CSS. Its flexibility makes it the go-to library for building everything from bar charts to complex network diagrams.
Why Use D3.js?
- Customizability: You have full control over how elements are drawn and interact on the page.
- Scalability: D3 can handle large datasets efficiently and supports dynamic updates as data changes.
- Community: It has a robust ecosystem and large developer community.
What Is Sisense Compose SDK?
Sisense Compose SDK is a powerful developer toolkit that compartmentalizes Sisense's APIs into JavaScript packages, allowing developers to build custom data products within their preferred IDE. With the Compose SDK, developers can embed pre-existing Sisense Fusion Embed charts or build custom visualizations from the ground up using query and chart components. This flexibility empowers developers to integrate custom chart libraries powered by Sisense, all while adhering to the platform's robust data security protocols. The SDK enables seamless interaction with Sisense's data layer, allowing you to query data, execute complex analytics workflows, and retrieve results programmatically, making it an essential tool for embedding advanced analytics into your applications.
Why Use the Sisense Compose SDK?
- Flexibility: You can embed pre-existing Sisense Fusion Embed charts or build fully custom visualizations using your preferred tools, such as D3.js. The SDK provides the flexibility to create tailor-made analytics experiences that fit your unique requirements.
- Customization: Developers can leverage the SDK to execute, filter, and transform data, and even power custom chart libraries like D3.js, while still ensuring that Sisense’s data security protocols are adhered to. The SDK also allows for building visualizations from the ground up, giving you full control over every aspect of the charting process.
Integrating D3.js with the Sisense Compose SDK
In this tutorial, we’ll walk through how to combine the strengths of D3.js for visualization with the Sisense Compose SDK for querying and managing data, allowing you to build a packed bubble chart that is both highly customizable and secure.
Setting Up the Project
First, you need to install the required dependencies:
```bash npm install react react-dom npm install d3 npm install @sisense/sdk-ui @sisense/sdk-data ```
You’ll also need to set up a `.env` file with your Sisense instance URL and API Token:
```bash REACT_APP_SISENSE_INSTANCE_URL=https://your-sisense-instance-url.com REACT_APP_SISENSE_API_TOKEN=your-api-token ```
These variables will be used to authenticate with your Sisense instance.
Querying Data with Sisense Compose SDK
The Sisense Compose SDK allows you to query your data models directly. Here’s an example of querying for age range, total cost, and total revenue:
```
const { data, isLoading, isError } = useExecuteQuery({
dataSource: DM.DataSource,
dimensions: [DM.Commerce.AgeRange],
measures: [
measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
],
});
```This query fetches the age range of customers, along with the total cost and total revenue for each age group. The `useExecuteQuery` hook makes it easy to execute the query and retrieve the results.
Visualizing Data with D3.js
Once the data is fetched, we can map it to D3.js to visualize it as a packed bubble chart:
```
const bubbleData = data.rows.map(row => ({
ageRange: row[0].data,
totalCost: row[1].data ?? 0,
totalRevenue: row[2].data ?? 0,
}));
// Define the bubble chart using D3
svg.selectAll('circle')
.data(bubbleData)
.enter()
.append('circle')
.attr('cx', d => xScale(d.ageRange))
.attr('cy', d => yScale(d.totalRevenue))
.attr('r', d => radiusScale(d.totalCost))
.attr('fill', 'steelblue')
.attr('opacity', 0.7);
```Here, `xScale` and `yScale` are used to position the bubbles, and `radiusScale` controls the size of the bubbles based on the `totalCost`. Each bubble represents an age range, and its size reflects the total cost associated with that range.
Enhancing the User Experience
By leveraging the Sisense Compose SDK and D3.js, you can build highly interactive and customizable visualizations. This packed bubble chart will resize and reposition the bubbles in real-time as new data is queried or filters are applied. You can further extend this by adding hover tooltips, click events, or dynamic filters using D3.js transitions.
Conclusion
Combining D3.js with the Sisense Compose SDK allows you to create dynamic, real-time data visualizations that not only look great but also provide meaningful insights. This packed bubble chart offers a visually compelling way to represent comparative data, such as cost and revenue across different age groups. Whether you’re building dashboards or embedding analytics into a product, this integration delivers powerful visualizations tailored to your needs.
If you’re not already using Sisense, try it out with their free trial here.
