DataRoom Charts Demo

Comprehensive examples of D3 charts using CSS variables for theming

Bar Charts

Quarterly Sales Performance (Vertical)

[{"label":"Q1 2024","value":125000},{"label":"Q2 2024","value":156000},{"label":"Q3 2024","value":189000},{"label":"Q4 2024","value":203000},{"label":"Q1 2025","value":178000}]

Department Budgets (Horizontal)

[{"label":"Engineering","value":850000},{"label":"Sales","value":620000},{"label":"Marketing","value":480000},{"label":"HR","value":320000},{"label":"Operations","value":290000},{"label":"Finance","value":180000}]

Monthly Website Traffic (Multi-color)

[{"label":"Jan","value":45200},{"label":"Feb","value":52100},{"label":"Mar","value":48900},{"label":"Apr","value":61500},{"label":"May","value":58700},{"label":"Jun","value":67300},{"label":"Jul","value":72800},{"label":"Aug","value":69400},{"label":"Sep","value":63200},{"label":"Oct","value":71600},{"label":"Nov","value":78900},{"label":"Dec","value":82300}]

Scatter Plots

Product Performance: Price vs Sales

[{"x":29.99,"y":1250},{"x":49.99,"y":980},{"x":79.99,"y":750},{"x":99.99,"y":620},{"x":129.99,"y":480},{"x":159.99,"y":390},{"x":199.99,"y":280},{"x":249.99,"y":220},{"x":299.99,"y":180},{"x":399.99,"y":120},{"x":499.99,"y":85},{"x":699.99,"y":45},{"x":899.99,"y":25},{"x":1199.99,"y":15}]

Employee Satisfaction: Years vs Rating

[{"x":0.5,"y":4.2},{"x":1.2,"y":4.1},{"x":2.8,"y":4.5},{"x":3.5,"y":4.3},{"x":4.1,"y":4.7},{"x":5.2,"y":4.6},{"x":6.8,"y":4.8},{"x":7.5,"y":4.4},{"x":8.2,"y":4.9},{"x":9.1,"y":4.7},{"x":10.5,"y":4.8},{"x":12.3,"y":4.6},{"x":15.8,"y":4.9},{"x":18.2,"y":4.5},{"x":22.1,"y":4.7}]

Server Response Times

[{"x":1,"y":45},{"x":2,"y":52},{"x":3,"y":48},{"x":4,"y":61},{"x":5,"y":58},{"x":6,"y":67},{"x":7,"y":72},{"x":8,"y":69},{"x":9,"y":63},{"x":10,"y":71},{"x":11,"y":78},{"x":12,"y":82},{"x":13,"y":75},{"x":14,"y":88},{"x":15,"y":92},{"x":16,"y":86},{"x":17,"y":94},{"x":18,"y":89},{"x":19,"y":97},{"x":20,"y":103},{"x":21,"y":108},{"x":22,"y":112},{"x":23,"y":118},{"x":24,"y":125}]

Advanced Scatter Plot Examples

Demonstrating multi-dimensional data visualization with x, y, radius, and category dimensions

Simple X,Y Plot: Temperature vs Ice Cream Sales

[{"x":15,"y":120},{"x":18,"y":180},{"x":22,"y":240},{"x":25,"y":320},{"x":28,"y":380},{"x":32,"y":450},{"x":35,"y":520},{"x":38,"y":580},{"x":42,"y":640},{"x":45,"y":720}]

X,Y,R Plot: Marketing Spend vs Revenue with Campaign Size

Dot size represents campaign reach (r dimension)

[{"x":5000,"y":25000,"r":100000},{"x":8000,"y":35000,"r":150000},{"x":12000,"y":48000,"r":200000},{"x":15000,"y":62000,"r":120000},{"x":20000,"y":78000,"r":300000},{"x":25000,"y":95000,"r":250000},{"x":30000,"y":115000,"r":400000},{"x":35000,"y":128000,"r":180000},{"x":40000,"y":145000,"r":500000},{"x":45000,"y":162000,"r":350000}]

X,Y,C Plot: Sales Performance by Department

Different colors represent departments (c dimension)

[{"x":85,"y":12000,"c":"Sales"},{"x":92,"y":15000,"c":"Sales"},{"x":78,"y":9800,"c":"Sales"},{"x":88,"y":13500,"c":"Sales"},{"x":94,"y":16200,"c":"Sales"},{"x":76,"y":22000,"c":"Engineering"},{"x":82,"y":28000,"c":"Engineering"},{"x":89,"y":31000,"c":"Engineering"},{"x":91,"y":29500,"c":"Engineering"},{"x":87,"y":26800,"c":"Engineering"},{"x":65,"y":8500,"c":"Marketing"},{"x":72,"y":11200,"c":"Marketing"},{"x":68,"y":9800,"c":"Marketing"},{"x":74,"y":12800,"c":"Marketing"},{"x":71,"y":10500,"c":"Marketing"}]

X,Y,R,C Plot: Product Portfolio Analysis

Position (profit margin vs sales volume), size (market share), color (product category)

[{"x":15.2,"y":450000,"r":25,"c":"Software"},{"x":22.8,"y":380000,"r":18,"c":"Software"},{"x":18.5,"y":520000,"r":32,"c":"Software"},{"x":28.3,"y":290000,"r":12,"c":"Software"},{"x":35.7,"y":180000,"r":8,"c":"Software"},{"x":8.4,"y":680000,"r":45,"c":"Hardware"},{"x":12.1,"y":750000,"r":38,"c":"Hardware"},{"x":6.8,"y":920000,"r":52,"c":"Hardware"},{"x":10.3,"y":580000,"r":28,"c":"Hardware"},{"x":14.7,"y":420000,"r":22,"c":"Hardware"},{"x":42.5,"y":125000,"r":15,"c":"Services"},{"x":38.9,"y":165000,"r":20,"c":"Services"},{"x":45.2,"y":98000,"r":12,"c":"Services"},{"x":41.8,"y":145000,"r":18,"c":"Services"},{"x":48.1,"y":85000,"r":10,"c":"Services"}]

Monochrome Advanced Scatter Plots

Same multi-dimensional data using patterns for print-friendly and accessible visualization

Monochrome X,Y Plot: Simple Black Dots

[{"x":15,"y":120},{"x":18,"y":180},{"x":22,"y":240},{"x":25,"y":320},{"x":28,"y":380},{"x":32,"y":450},{"x":35,"y":520},{"x":38,"y":580},{"x":42,"y":640},{"x":45,"y":720}]

Monochrome X,Y,R Plot: Variable-Sized Black Dots

Monochrome X,Y,C Plot: Pattern-Filled Dots by Category

[{"x":85,"y":12000,"c":"Sales"},{"x":92,"y":15000,"c":"Sales"},{"x":78,"y":9800,"c":"Sales"},{"x":88,"y":13500,"c":"Sales"},{"x":76,"y":22000,"c":"Engineering"},{"x":82,"y":28000,"c":"Engineering"},{"x":89,"y":31000,"c":"Engineering"},{"x":91,"y":29500,"c":"Engineering"},{"x":65,"y":8500,"c":"Marketing"},{"x":72,"y":11200,"c":"Marketing"},{"x":68,"y":9800,"c":"Marketing"},{"x":74,"y":12800,"c":"Marketing"}]

Monochrome X,Y,R,C Plot: Full Multi-Dimensional with Patterns

[{"x":15.2,"y":450000,"r":25,"c":"Software"},{"x":22.8,"y":380000,"r":18,"c":"Software"},{"x":18.5,"y":520000,"r":32,"c":"Software"},{"x":28.3,"y":290000,"r":12,"c":"Software"},{"x":8.4,"y":680000,"r":45,"c":"Hardware"},{"x":12.1,"y":750000,"r":38,"c":"Hardware"},{"x":6.8,"y":920000,"r":52,"c":"Hardware"},{"x":10.3,"y":580000,"r":28,"c":"Hardware"},{"x":42.5,"y":125000,"r":15,"c":"Services"},{"x":38.9,"y":165000,"r":20,"c":"Services"},{"x":45.2,"y":98000,"r":12,"c":"Services"},{"x":41.8,"y":145000,"r":18,"c":"Services"}]

Line Graphs

Line graphs connect data points to show trends and patterns over time or continuous variables

Monthly Revenue Trend

[{"x":1,"y":45000},{"x":2,"y":52000},{"x":3,"y":48000},{"x":4,"y":61000},{"x":5,"y":58000},{"x":6,"y":67000},{"x":7,"y":72000},{"x":8,"y":69000},{"x":9,"y":63000},{"x":10,"y":71000},{"x":11,"y":78000},{"x":12,"y":82000}]

Stock Price Performance

[{"x":1,"y":125.50},{"x":2,"y":128.75},{"x":3,"y":132.25},{"x":4,"y":129.80},{"x":5,"y":135.60},{"x":6,"y":142.30},{"x":7,"y":138.95},{"x":8,"y":145.20},{"x":9,"y":152.80},{"x":10,"y":149.65},{"x":11,"y":156.40},{"x":12,"y":163.85},{"x":13,"y":159.70},{"x":14,"y":167.25},{"x":15,"y":174.90}]

Website Traffic vs Conversion Rate

[{"x":1200,"y":2.3},{"x":1450,"y":2.8},{"x":1800,"y":3.1},{"x":2100,"y":2.9},{"x":2350,"y":3.4},{"x":2600,"y":3.7},{"x":2900,"y":3.2},{"x":3200,"y":3.9},{"x":3500,"y":4.1},{"x":3800,"y":3.8},{"x":4100,"y":4.3},{"x":4400,"y":4.6}]

Multi-Series Line Graphs

Comparing multiple data series with different categories using the 'c' dimension

Department Performance Over Time

[{"x":1,"y":85000,"c":"Sales"},{"x":2,"y":92000,"c":"Sales"},{"x":3,"y":88000,"c":"Sales"},{"x":4,"y":95000,"c":"Sales"},{"x":5,"y":102000,"c":"Sales"},{"x":6,"y":108000,"c":"Sales"},{"x":1,"y":65000,"c":"Marketing"},{"x":2,"y":68000,"c":"Marketing"},{"x":3,"y":72000,"c":"Marketing"},{"x":4,"y":75000,"c":"Marketing"},{"x":5,"y":78000,"c":"Marketing"},{"x":6,"y":82000,"c":"Marketing"},{"x":1,"y":120000,"c":"Engineering"},{"x":2,"y":125000,"c":"Engineering"},{"x":3,"y":132000,"c":"Engineering"},{"x":4,"y":128000,"c":"Engineering"},{"x":5,"y":135000,"c":"Engineering"},{"x":6,"y":142000,"c":"Engineering"}]

Product Sales Comparison

[{"x":1,"y":1200,"c":"Product A"},{"x":2,"y":1350,"c":"Product A"},{"x":3,"y":1480,"c":"Product A"},{"x":4,"y":1620,"c":"Product A"},{"x":5,"y":1750,"c":"Product A"},{"x":6,"y":1890,"c":"Product A"},{"x":1,"y":800,"c":"Product B"},{"x":2,"y":920,"c":"Product B"},{"x":3,"y":1050,"c":"Product B"},{"x":4,"y":1180,"c":"Product B"},{"x":5,"y":1320,"c":"Product B"},{"x":6,"y":1450,"c":"Product B"},{"x":1,"y":500,"c":"Product C"},{"x":2,"y":580,"c":"Product C"},{"x":3,"y":650,"c":"Product C"},{"x":4,"y":720,"c":"Product C"},{"x":5,"y":800,"c":"Product C"},{"x":6,"y":880,"c":"Product C"}]

Temperature Sensors by Location

[{"x":0,"y":22.1,"c":"Sensor A"},{"x":1,"y":22.8,"c":"Sensor A"},{"x":2,"y":23.2,"c":"Sensor A"},{"x":3,"y":24.1,"c":"Sensor A"},{"x":4,"y":25.3,"c":"Sensor A"},{"x":5,"y":26.8,"c":"Sensor A"},{"x":6,"y":27.9,"c":"Sensor A"},{"x":7,"y":28.5,"c":"Sensor A"},{"x":8,"y":27.2,"c":"Sensor A"},{"x":0,"y":18.5,"c":"Sensor B"},{"x":1,"y":19.2,"c":"Sensor B"},{"x":2,"y":20.1,"c":"Sensor B"},{"x":3,"y":21.8,"c":"Sensor B"},{"x":4,"y":22.9,"c":"Sensor B"},{"x":5,"y":24.2,"c":"Sensor B"},{"x":6,"y":25.1,"c":"Sensor B"},{"x":7,"y":24.8,"c":"Sensor B"},{"x":8,"y":23.6,"c":"Sensor B"},{"x":0,"y":25.8,"c":"Sensor C"},{"x":1,"y":26.2,"c":"Sensor C"},{"x":2,"y":27.1,"c":"Sensor C"},{"x":3,"y":28.5,"c":"Sensor C"},{"x":4,"y":29.8,"c":"Sensor C"},{"x":5,"y":31.2,"c":"Sensor C"},{"x":6,"y":32.1,"c":"Sensor C"},{"x":7,"y":31.8,"c":"Sensor C"},{"x":8,"y":30.5,"c":"Sensor C"}]

Advanced Line Graph Examples

Line graphs with variable point sizes and multi-dimensional data

Marketing Campaign Performance with Budget

Line shows conversion rate over time, point size represents campaign budget (r dimension)

[{"x":1,"y":2.3,"r":5000},{"x":2,"y":2.8,"r":7500},{"x":3,"y":3.1,"r":12000},{"x":4,"y":2.9,"r":8000},{"x":5,"y":3.4,"r":15000},{"x":6,"y":3.7,"r":18000},{"x":7,"y":3.2,"r":10000},{"x":8,"y":3.9,"r":22000},{"x":9,"y":4.1,"r":25000},{"x":10,"y":3.8,"r":20000}]

Multi-Dimensional Sales Analysis

Revenue trends by quarter with market share (size) and product category (color)

[{"x":1,"y":450000,"r":25,"c":"Software"},{"x":2,"y":520000,"r":28,"c":"Software"},{"x":3,"y":480000,"r":32,"c":"Software"},{"x":4,"y":580000,"r":35,"c":"Software"},{"x":1,"y":680000,"r":45,"c":"Hardware"},{"x":2,"y":750000,"r":42,"c":"Hardware"},{"x":3,"y":720000,"r":40,"c":"Hardware"},{"x":4,"y":820000,"r":48,"c":"Hardware"},{"x":1,"y":125000,"r":15,"c":"Services"},{"x":2,"y":145000,"r":18,"c":"Services"},{"x":3,"y":165000,"r":20,"c":"Services"},{"x":4,"y":185000,"r":22,"c":"Services"}]

Monochrome Line Graphs

Print-friendly line graphs using patterns for accessibility

Monochrome Single Series

Monochrome Multi-Series with Patterns

Monochrome Variable Size Points

Candlestick Charts

Financial OHLC charts showing open, high, low, and close values

Stock Price Performance

[{"date":"2024-01-01","open":150.00,"high":155.20,"low":148.50,"close":152.30},{"date":"2024-01-02","open":152.50,"high":153.80,"low":149.20,"close":150.10},{"date":"2024-01-03","open":150.00,"high":158.50,"low":149.80,"close":157.40},{"date":"2024-01-04","open":157.50,"high":160.20,"low":155.30,"close":159.80},{"date":"2024-01-05","open":159.80,"high":162.00,"low":158.10,"close":161.50},{"date":"2024-01-08","open":161.50,"high":163.20,"low":159.40,"close":160.20},{"date":"2024-01-09","open":160.00,"high":165.50,"low":159.50,"close":164.80},{"date":"2024-01-10","open":164.80,"high":166.00,"low":162.10,"close":163.50},{"date":"2024-01-11","open":163.50,"high":164.20,"low":160.80,"close":161.90},{"date":"2024-01-12","open":162.00,"high":163.50,"low":158.20,"close":159.50},{"date":"2024-01-16","open":159.50,"high":161.80,"low":157.40,"close":160.80},{"date":"2024-01-17","open":160.80,"high":162.50,"low":159.00,"close":161.20},{"date":"2024-01-18","open":161.20,"high":164.00,"low":160.50,"close":163.40},{"date":"2024-01-19","open":163.40,"high":167.20,"low":162.80,"close":166.50},{"date":"2024-01-22","open":166.50,"high":169.00,"low":165.20,"close":168.30}]

Monochrome Candlestick Chart

Print-friendly candlesticks use hollow bodies for up candles and filled bodies for down candles

Heikin-Ashi Charts

Smoothed candlestick charts computed from OHLC data

Stock Price Trend (Heikin-Ashi)

Donut Charts

Revenue by Product Category

[{"label":"Software","value":2400000},{"label":"Hardware","value":1800000},{"label":"Services","value":1200000},{"label":"Training","value":600000},{"label":"Support","value":400000}]

Marketing Channel Performance

[{"label":"Social Media","value":35},{"label":"Email","value":28},{"label":"SEO","value":22},{"label":"PPC","value":18},{"label":"Direct","value":15},{"label":"Referral","value":12},{"label":"Print","value":5}]

Customer Satisfaction Distribution

[{"label":"Very Satisfied","value":45},{"label":"Satisfied","value":32},{"label":"Neutral","value":15},{"label":"Dissatisfied","value":6},{"label":"Very Dissatisfied","value":2}]

Technology Stack Usage

[{"label":"JavaScript","value":42},{"label":"Python","value":28},{"label":"Java","value":18},{"label":"C#","value":12},{"label":"PHP","value":8},{"label":"Ruby","value":6},{"label":"Go","value":4},{"label":"Rust","value":2}]

Mixed Data Examples

Server Performance Metrics

[{"x":100,"y":0.2},{"x":200,"y":0.4},{"x":350,"y":0.8},{"x":500,"y":1.2},{"x":750,"y":2.1},{"x":1000,"y":3.5},{"x":1250,"y":5.2},{"x":1500,"y":7.8},{"x":1750,"y":11.2},{"x":2000,"y":15.8}]

Annual Growth by Region

[{"label":"North America","value":12.5},{"label":"Europe","value":8.3},{"label":"Asia Pacific","value":15.7},{"label":"Latin America","value":6.2},{"label":"Middle East","value":9.8},{"label":"Africa","value":11.4}]

Monochrome Pattern Examples

Charts using cross-hatching patterns instead of colors for accessibility and print-friendly display

Monochrome Bar Chart (Vertical)

[{"label":"Q1","value":125000},{"label":"Q2","value":156000},{"label":"Q3","value":189000},{"label":"Q4","value":203000},{"label":"Q5","value":178000},{"label":"Q6","value":145000}]

Monochrome Bar Chart (Horizontal)

Monochrome Scatter Plot

Monochrome Donut Chart

[{"label":"Software","value":2400000},{"label":"Hardware","value":1800000},{"label":"Services","value":1200000},{"label":"Training","value":600000},{"label":"Support","value":400000},{"label":"Consulting","value":800000},{"label":"Maintenance","value":300000},{"label":"Licensing","value":500000}]

Monochrome Multi-Series Bar Chart (Default Cross-Hatching)

Monochrome Pattern Examples

Simple diagonal pattern examples for print-friendly and accessible charts

Multi-Series Bar Chart

[{"label":"Series 1","value":45},{"label":"Series 2","value":67},{"label":"Series 3","value":52},{"label":"Series 4","value":78},{"label":"Series 5","value":34},{"label":"Series 6","value":89},{"label":"Series 7","value":23},{"label":"Series 8","value":56}]

Monochrome Donut Chart

[{"label":"A","value":25},{"label":"B","value":30},{"label":"C","value":20},{"label":"D","value":15},{"label":"E","value":10}]

Monochrome Scatter Plot

[{"x":10,"y":25},{"x":20,"y":45},{"x":30,"y":35},{"x":40,"y":65},{"x":50,"y":55},{"x":60,"y":75},{"x":70,"y":85},{"x":80,"y":70},{"x":90,"y":95},{"x":100,"y":80}]

Horizontal Bar Chart

[{"label":"Marketing","value":850},{"label":"Sales","value":920},{"label":"Engineering","value":780},{"label":"Support","value":650},{"label":"HR","value":480}]

Chart Type Comparison

Same data displayed across different chart types

Bar Chart

[{"label":"Q1","value":120},{"label":"Q2","value":135},{"label":"Q3","value":148},{"label":"Q4","value":162}]

Horizontal Bar

[{"label":"Q1","value":120},{"label":"Q2","value":135},{"label":"Q3","value":148},{"label":"Q4","value":162}]

Donut Chart

[{"label":"Q1","value":120},{"label":"Q2","value":135},{"label":"Q3","value":148},{"label":"Q4","value":162}]

Line Graph

[{"x":1,"y":120},{"x":2,"y":135},{"x":3,"y":148},{"x":4,"y":162}]