​
What can you do with it?

Create interactive data visualizations using D3.js. Generate complete HTML applications with charts, graphs, and custom visualizations based on your data. Perfect for visualizing sales trends, analyzing customer behavior, monitoring KPIs, creating executive dashboards, and presenting financial analysis.

​
How to use it?

​
Basic Command Structure

/d3 [data] [visualization-type] [optional-parameters]

​
Parameters

Required:
  • data - The dataset to visualize (can be provided or described)
  • visualization type - Type of chart (bar, line, scatter, pie, etc.)
Optional:
  • title - Chart title
  • axes labels - X and Y axis labels
  • colors - Color scheme preferences
  • interactive features - Hover effects, tooltips, animations

​
Response Format

The command returns: 
{
  "html": "Complete HTML file with embedded D3.js visualization",
  "metadata": {
    "chart_type": "Type of visualization created",
    "data_points": "Number of data points visualized"
  }
}

​
Examples

​
Basic Usage

/d3
data: Sales by month - Jan: 100, Feb: 150, Mar: 200, Apr: 180
visualization type: bar chart
title: Monthly Sales Report
Create a simple bar chart showing monthly sales data.

​
Advanced Usage

/d3
data: Temperature readings over 24 hours
visualization type: line graph with points
interactive features: hover tooltips showing exact values
colors: gradient from blue (cold) to red (hot)
Create an interactive line graph with color gradients and tooltips.

​
Specific Use Case

/d3
data: Market share - Company A: 35%, Company B: 25%, Company C: 20%, Others: 20%
visualization type: pie chart
interactive features: click to explode slices
title: Market Share Distribution
Create an interactive pie chart with clickable slices for market analysis.

​
Notes

Generates complete, standalone HTML files. Uses D3.js v7 for modern browser compatibility. Includes basic styling and hover effects. Code is optimized for token limits (simplified for complex requests). All JavaScript uses ES5 syntax for maximum compatibility.

​
Simple Examples

​
Time Series Analysis

/D3 create line chart using QUARTERLY_RESULTS, plot time on x-axis and profit_margin on y-axis

​
Comparative Analysis

/D3 create grouped bar chart using REGIONAL_SALES, show regions on x-axis and sales_volume on y-axis, group by product_category

​
Distribution Analysis

/D3 create histogram using CUSTOMER_DATA, show purchase_amount distribution with 20 bins

​
Part-to-Whole Analysis

/D3 create pie chart using MARKET_SHARE, show market_segment proportions with percentage labels

​
Advanced Examples

​
Multi-Metric Dashboard

/D3 create dashboard using SALES_METRICS
- panel 1: line chart showing daily_revenue trend
- panel 2: bar chart comparing regional_performance
- panel 3: donut chart showing product_mix
- panel 4: area chart displaying customer_growth

​
Interactive Business Analysis

/D3 create interactive scatter plot using CUSTOMER_METRICS
x-axis: customer_lifetime_value
y-axis: acquisition_cost
size: number_of_purchases
color: customer_segment
add hover tooltips with customer_satisfaction

​
Complex Time Analysis

/D3 create multi-line chart using FINANCIAL_DATA
plot last_12_months
show metrics: revenue, costs, profit
add trend lines
include monthly moving average

​
Hierarchical Data Visualization

/D3 create treemap using DEPARTMENT_BUDGET
size by annual_spend
color by budget_variance
show department_hierarchy
add interactive drill-down

​
What Can D3 Do?

D3 offers an extensive range of visualization capabilities suited for business analytics. See documenation here: https://d3js.org/what-is-d3 and an amazing interactive example here: https://observablehq.com/@d3/gallery

​
Standard Business Charts

  • Line charts for trend analysis
  • Bar charts (vertical, horizontal, grouped, stacked)
  • Pie and donut charts for composition analysis
  • Area charts for cumulative trends
  • Scatter plots for correlation analysis
  • Bubble charts for multi-dimensional data

​
Advanced Visualizations

  • Heat maps for performance matrices
  • Tree maps for hierarchical data
  • Sunburst diagrams for multi-level breakdowns
  • Network graphs for relationship mapping
  • Sankey diagrams for flow analysis
  • Radar charts for comparative metrics
  • Box plots for statistical distribution

​
Interactive Features

  • Zoom and pan capabilities
  • Interactive tooltips
  • Click-through drilling
  • Dynamic filtering
  • Animated transitions
  • Real-time updates
  • Cross-chart filtering
  • Custom legends and annotations

​
Business Intelligence Features

  • Trend line overlays
  • Moving averages
  • Statistical annotations
  • Threshold indicators
  • Forecast projections
  • Confidence intervals
  • Outlier detection
  • Benchmark comparisons

​
Layout Options

  • Multi-chart dashboards
  • Responsive sizing
  • Custom color schemes
  • Corporate branding integration
  • Export capabilities
  • Mobile optimization
  • Accessible design features

​
Tips for Best Results

  1. Be specific about your data source and desired metrics
  2. Specify any required filtering or data transformations
  3. Include desired interactive features in your command
  4. Mention any specific styling or branding requirements
  5. Indicate if you need specific annotations or overlays
Remember that D3 can handle various data formats and can create both simple and complex visualizations. The key is to be clear about your data and visualization goals in your command.

​
Saving and Sharing Your D3 Charts

You can save and share your D3 visualizations in two simple steps:
  1. First, create your visualization in one step.
  2. Then, save it to global file storage in a subsequent step.
The /filestorage command will return a shareable link that you can send to colleagues. They can view and interact with your visualization directly through this link, making it easy to:
  • Include visualizations in presentations
  • Share insights with stakeholders
  • Embed charts in internal documentation
  • Archive important analytical views
  • Collaborate on data analysis
Pro tip: Add descriptive names when saving your visualizations to make them easier to find and understand later.

​
Iterating

When you get into complex datasets and visualizations, Pinkfish may not get it right the first time. In these cases, you’ll need to have a conversation with Pinkfish to get it right. Here’s an example where I used a CSV with customer data and asked Pinkfish to display customers on a map. It took a few iterations to get it right. D3 Iteration Step 1: describe the data in preparation for the D3 command 
what's in customers-100.csv
Step 2, try #1 (resulted in a csv parsing error): 
/D3 show customers countries highlighted on a map with a list of the customer names that show on rollover of their country. 
Use dataset /customers-100.csv which has this structure ->structure (reference to step1.structure) 
And here is some sample data ->sampleRows (reference to step1.sampleRows) for your reference.
Step 2, try #2 (success) 
add in /CSV skill to do a better job at parsing.
Step 3: write to filestorage: 
/filestorage write the result from the previous step to "customersByCountry"