• English
  • TreeMap

    Product Sales TreeMap

    A tree map showing sales distribution across product categories, sub-categories, and products.

    import { VSeedRender } from '@components'
    
    export default () => {
      const vseedConfig = {
      "chartType": "treeMap",
      "dataset": [
        {
          "category": "Electronics",
          "subCategory": "Computers",
          "product": "Laptop",
          "sales": 5000
        },
        {
          "category": "Electronics",
          "subCategory": "Computers",
          "product": "Tablet",
          "sales": 3000
        },
        {
          "category": "Electronics",
          "subCategory": "Computers",
          "product": "Desktop",
          "sales": 4000
        },
        {
          "category": "Electronics",
          "subCategory": "Phones",
          "product": "Smartphone",
          "sales": 8000
        },
        {
          "category": "Electronics",
          "subCategory": "Phones",
          "product": "Landline",
          "sales": 1000
        },
        {
          "category": "Furniture",
          "subCategory": "Seating",
          "product": "Office Chair",
          "sales": 2000
        },
        {
          "category": "Furniture",
          "subCategory": "Seating",
          "product": "Sofa",
          "sales": 3500
        },
        {
          "category": "Furniture",
          "subCategory": "Tables",
          "product": "Desk",
          "sales": 1500
        },
        {
          "category": "Furniture",
          "subCategory": "Tables",
          "product": "Coffee Table",
          "sales": 1200
        },
        {
          "category": "Office Supplies",
          "subCategory": "Paper",
          "product": "Printer Paper",
          "sales": 800
        },
        {
          "category": "Office Supplies",
          "subCategory": "Paper",
          "product": "Notebook",
          "sales": 500
        },
        {
          "category": "Office Supplies",
          "subCategory": "Stationery",
          "product": "Pen",
          "sales": 300
        },
        {
          "category": "Office Supplies",
          "subCategory": "Stationery",
          "product": "Stapler",
          "sales": 200
        }
      ],
      "dimensions": [
        {
          "id": "category",
          "alias": "Category"
        },
        {
          "id": "subCategory",
          "alias": "SubCategory"
        },
        {
          "id": "product",
          "alias": "Product"
        }
      ],
      "measures": [
        {
          "id": "sales",
          "alias": "Sales"
        }
      ]
    }
    
      return <VSeedRender vseed={vseedConfig} />
    }

    Measure Combination

    Displays the distribution of sales and profit across categories like Food & Beverage and Personal Care, using nested rectangles to show hierarchies and measure relationships.

    import { VSeedRender } from '@components'
    
    export default () => {
      const vseedConfig = {
      "chartType": "treeMap",
      "dataset": [
        {
          "category": "Food & Beverage",
          "subCategory": "Beverages",
          "product": "Yunling Spring Mineral Water",
          "sales": 12000,
          "profit": 1800
        },
        {
          "category": "Food & Beverage",
          "subCategory": "Beverages",
          "product": "Guoyue Fresh Orange Juice",
          "sales": 8500,
          "profit": 1400
        },
        {
          "category": "Food & Beverage",
          "subCategory": "Beverages",
          "product": "Mingxiang Oolong Tea",
          "sales": 6200,
          "profit": 950
        },
        {
          "category": "Food & Beverage",
          "subCategory": "Snacks",
          "product": "Cuile Potato Chips (Tomato)",
          "sales": 9500,
          "profit": 1600
        },
        {
          "category": "Food & Beverage",
          "subCategory": "Snacks",
          "product": "Nuts Party Mixed Nuts",
          "sales": 7800,
          "profit": 2100
        },
        {
          "category": "Personal Care",
          "subCategory": "Toiletries",
          "product": "Silky Smooth Shampoo",
          "sales": 6800,
          "profit": 1100
        },
        {
          "category": "Personal Care",
          "subCategory": "Toiletries",
          "product": "Facial Amino Acid Cleanser",
          "sales": 5200,
          "profit": 980
        },
        {
          "category": "Personal Care",
          "subCategory": "Home Cleaning",
          "product": "Bijing Multi-effect Laundry Detergent",
          "sales": 7200,
          "profit": 1050
        },
        {
          "category": "Personal Care",
          "subCategory": "Home Cleaning",
          "product": "Kitchen Oil Cleaning Spray",
          "sales": 4300,
          "profit": 720
        },
        {
          "category": "Digital Appliances",
          "subCategory": "Smart Wearables",
          "product": "Smart S9 Smartwatch",
          "sales": 15000,
          "profit": 3200
        },
        {
          "category": "Digital Appliances",
          "subCategory": "Smart Wearables",
          "product": "Yuepao Pro Fitness Tracker",
          "sales": 6500,
          "profit": 1400
        },
        {
          "category": "Digital Appliances",
          "subCategory": "Small Appliances",
          "product": "WarmNest Desktop Fan Heater",
          "sales": 4800,
          "profit": 880
        },
        {
          "category": "Digital Appliances",
          "subCategory": "Small Appliances",
          "product": "Fresh Grind Portable Coffee Maker",
          "sales": 11000,
          "profit": 2600
        },
        {
          "category": "Digital Appliances",
          "subCategory": "Small Appliances",
          "product": "PureBreath Car Air Purifier",
          "sales": 7600,
          "profit": 1750
        },
        {
          "category": "Apparel & Accessories",
          "subCategory": "Men's Wear",
          "product": "Elegance Light Business Jacket",
          "sales": 8800,
          "profit": 2400
        },
        {
          "category": "Apparel & Accessories",
          "subCategory": "Men's Wear",
          "product": "Cotton Whisper Basic T-shirt 3-pack",
          "sales": 5600,
          "profit": 1500
        },
        {
          "category": "Apparel & Accessories",
          "subCategory": "Women's Wear",
          "product": "Flora Floral Print Dress",
          "sales": 9200,
          "profit": 2800
        },
        {
          "category": "Apparel & Accessories",
          "subCategory": "Women's Wear",
          "product": "WarmWeave Cashmere Scarf",
          "sales": 4100,
          "profit": 1200
        },
        {
          "category": "Apparel & Accessories",
          "subCategory": "Footwear",
          "product": "CloudStep Cushioning Running Shoes",
          "sales": 13500,
          "profit": 3600
        }
      ],
      "dimensions": [
        {
          "id": "category",
          "alias": "Category",
          "encoding": "hierarchy"
        },
        {
          "id": "subCategory",
          "alias": "Sub-Category",
          "encoding": "hierarchy"
        },
        {
          "id": "product",
          "alias": "Product",
          "encoding": "hierarchy"
        },
        {
          "id": "__MeaId__",
          "alias": "Measure Name",
          "encoding": "hierarchy"
        }
      ],
      "measures": [
        {
          "id": "sales",
          "alias": "Sales (CNY)",
          "encoding": "size",
          "parentId": "a"
        },
        {
          "id": "profit",
          "alias": "Profit",
          "encoding": "size",
          "parentId": "b"
        }
      ]
    }
    
      return <VSeedRender vseed={vseedConfig} />
    }

    Global Retail Revenue Landscape With Encoding Visualize

    Sales and profit distribution of a global retail chain across 4 regions (Asia Pacific, North America, Europe, Latin America), 3 channels (Online, Retail Store, Wholesale), and 3 product categories (Personal Care, Home Appliance, Food & Beverage), enabling multi-dimensional drill-down analysis via TreeMap.

    import { VSeedRender } from '@components'
    
    export default () => {
      const vseedConfig = {
      "chartType": "treeMap",
      "dimensions": [
        {
          "id": "channel",
          "alias": "Channel",
          "encoding": "column"
        },
        {
          "id": "__MeaId__",
          "encoding": "hierarchy"
        },
        {
          "id": "region",
          "alias": "Region",
          "encoding": "hierarchy"
        },
        {
          "id": "category",
          "alias": "Category",
          "encoding": "hierarchy"
        },
        {
          "id": "product",
          "alias": "Product",
          "encoding": "hierarchy"
        }
      ],
      "measures": [
        {
          "id": "sales",
          "alias": "Sales",
          "encoding": "size"
        },
        {
          "id": "profit",
          "alias": "Profit",
          "encoding": "size"
        }
      ],
      "dataset": [
        {
          "region": "Asia Pacific",
          "channel": "Online",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 12400,
          "profit": 3720
        },
        {
          "region": "Asia Pacific",
          "channel": "Online",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 9800,
          "profit": 2450
        },
        {
          "region": "Asia Pacific",
          "channel": "Online",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 18500,
          "profit": 5550
        },
        {
          "region": "Asia Pacific",
          "channel": "Online",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 14200,
          "profit": 3550
        },
        {
          "region": "Asia Pacific",
          "channel": "Online",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 7600,
          "profit": 3040
        },
        {
          "region": "Asia Pacific",
          "channel": "Online",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 5400,
          "profit": 1890
        },
        {
          "region": "Asia Pacific",
          "channel": "Retail Store",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 8600,
          "profit": 2150
        },
        {
          "region": "Asia Pacific",
          "channel": "Retail Store",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 7200,
          "profit": 1800
        },
        {
          "region": "Asia Pacific",
          "channel": "Retail Store",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 11300,
          "profit": 2825
        },
        {
          "region": "Asia Pacific",
          "channel": "Retail Store",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 9700,
          "profit": 2425
        },
        {
          "region": "Asia Pacific",
          "channel": "Retail Store",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 6100,
          "profit": 2440
        },
        {
          "region": "Asia Pacific",
          "channel": "Retail Store",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 4300,
          "profit": 1505
        },
        {
          "region": "Asia Pacific",
          "channel": "Wholesale",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 15800,
          "profit": 3160
        },
        {
          "region": "Asia Pacific",
          "channel": "Wholesale",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 12600,
          "profit": 2520
        },
        {
          "region": "Asia Pacific",
          "channel": "Wholesale",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 22400,
          "profit": 4480
        },
        {
          "region": "Asia Pacific",
          "channel": "Wholesale",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 17500,
          "profit": 3500
        },
        {
          "region": "Asia Pacific",
          "channel": "Wholesale",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 9800,
          "profit": 2940
        },
        {
          "region": "Asia Pacific",
          "channel": "Wholesale",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 7200,
          "profit": 2160
        },
        {
          "region": "North America",
          "channel": "Online",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 14200,
          "profit": 4260
        },
        {
          "region": "North America",
          "channel": "Online",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 11500,
          "profit": 2875
        },
        {
          "region": "North America",
          "channel": "Online",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 21300,
          "profit": 6390
        },
        {
          "region": "North America",
          "channel": "Online",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 16800,
          "profit": 4200
        },
        {
          "region": "North America",
          "channel": "Online",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 9200,
          "profit": 3680
        },
        {
          "region": "North America",
          "channel": "Online",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 6800,
          "profit": 2380
        },
        {
          "region": "North America",
          "channel": "Retail Store",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 10800,
          "profit": 2700
        },
        {
          "region": "North America",
          "channel": "Retail Store",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 8900,
          "profit": 2225
        },
        {
          "region": "North America",
          "channel": "Retail Store",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 14600,
          "profit": 3650
        },
        {
          "region": "North America",
          "channel": "Retail Store",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 12100,
          "profit": 3025
        },
        {
          "region": "North America",
          "channel": "Retail Store",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 7400,
          "profit": 2960
        },
        {
          "region": "North America",
          "channel": "Retail Store",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 5100,
          "profit": 1785
        },
        {
          "region": "North America",
          "channel": "Wholesale",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 18200,
          "profit": 3640
        },
        {
          "region": "North America",
          "channel": "Wholesale",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 14800,
          "profit": 2960
        },
        {
          "region": "North America",
          "channel": "Wholesale",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 26500,
          "profit": 5300
        },
        {
          "region": "North America",
          "channel": "Wholesale",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 20300,
          "profit": 4060
        },
        {
          "region": "North America",
          "channel": "Wholesale",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 11600,
          "profit": 3480
        },
        {
          "region": "North America",
          "channel": "Wholesale",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 8500,
          "profit": 2550
        },
        {
          "region": "Europe",
          "channel": "Online",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 10600,
          "profit": 3180
        },
        {
          "region": "Europe",
          "channel": "Online",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 8400,
          "profit": 2100
        },
        {
          "region": "Europe",
          "channel": "Online",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 15900,
          "profit": 4770
        },
        {
          "region": "Europe",
          "channel": "Online",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 12500,
          "profit": 3125
        },
        {
          "region": "Europe",
          "channel": "Online",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 8800,
          "profit": 3520
        },
        {
          "region": "Europe",
          "channel": "Online",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 4900,
          "profit": 1715
        },
        {
          "region": "Europe",
          "channel": "Retail Store",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 7800,
          "profit": 1950
        },
        {
          "region": "Europe",
          "channel": "Retail Store",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 6500,
          "profit": 1625
        },
        {
          "region": "Europe",
          "channel": "Retail Store",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 10200,
          "profit": 2550
        },
        {
          "region": "Europe",
          "channel": "Retail Store",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 8800,
          "profit": 2200
        },
        {
          "region": "Europe",
          "channel": "Retail Store",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 7100,
          "profit": 2840
        },
        {
          "region": "Europe",
          "channel": "Retail Store",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 3800,
          "profit": 1330
        },
        {
          "region": "Europe",
          "channel": "Wholesale",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 13400,
          "profit": 2680
        },
        {
          "region": "Europe",
          "channel": "Wholesale",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 10900,
          "profit": 2180
        },
        {
          "region": "Europe",
          "channel": "Wholesale",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 19800,
          "profit": 3960
        },
        {
          "region": "Europe",
          "channel": "Wholesale",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 15200,
          "profit": 3040
        },
        {
          "region": "Europe",
          "channel": "Wholesale",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 10500,
          "profit": 3150
        },
        {
          "region": "Europe",
          "channel": "Wholesale",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 6300,
          "profit": 1890
        },
        {
          "region": "Latin America",
          "channel": "Online",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 6200,
          "profit": 1860
        },
        {
          "region": "Latin America",
          "channel": "Online",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 4800,
          "profit": 1200
        },
        {
          "region": "Latin America",
          "channel": "Online",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 9400,
          "profit": 2820
        },
        {
          "region": "Latin America",
          "channel": "Online",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 7100,
          "profit": 1775
        },
        {
          "region": "Latin America",
          "channel": "Online",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 8500,
          "profit": 3400
        },
        {
          "region": "Latin America",
          "channel": "Online",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 3600,
          "profit": 1260
        },
        {
          "region": "Latin America",
          "channel": "Retail Store",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 4500,
          "profit": 1125
        },
        {
          "region": "Latin America",
          "channel": "Retail Store",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 3700,
          "profit": 925
        },
        {
          "region": "Latin America",
          "channel": "Retail Store",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 6800,
          "profit": 1700
        },
        {
          "region": "Latin America",
          "channel": "Retail Store",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 5200,
          "profit": 1300
        },
        {
          "region": "Latin America",
          "channel": "Retail Store",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 6900,
          "profit": 2760
        },
        {
          "region": "Latin America",
          "channel": "Retail Store",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 2800,
          "profit": 980
        },
        {
          "region": "Latin America",
          "channel": "Wholesale",
          "category": "Personal Care",
          "product": "Electric Toothbrush",
          "sales": 8600,
          "profit": 1720
        },
        {
          "region": "Latin America",
          "channel": "Wholesale",
          "category": "Personal Care",
          "product": "Hair Dryer",
          "sales": 6900,
          "profit": 1380
        },
        {
          "region": "Latin America",
          "channel": "Wholesale",
          "category": "Home Appliance",
          "product": "Robot Vacuum",
          "sales": 12500,
          "profit": 2500
        },
        {
          "region": "Latin America",
          "channel": "Wholesale",
          "category": "Home Appliance",
          "product": "Air Purifier",
          "sales": 9600,
          "profit": 1920
        },
        {
          "region": "Latin America",
          "channel": "Wholesale",
          "category": "Food & Beverage",
          "product": "Organic Coffee",
          "sales": 10200,
          "profit": 3060
        },
        {
          "region": "Latin America",
          "channel": "Wholesale",
          "category": "Food & Beverage",
          "product": "Protein Bar",
          "sales": 5100,
          "profit": 1530
        }
      ]
    }
    
      return <VSeedRender vseed={vseedConfig} />
    }