A bubble chart about changes to how people have been spending money after the COVID-19 outbreak (by low-level sectors). This example covers axis transpose and various axis label transformations.
{"name": "spending-bubble","layout": {"composition": "single",// single view composition "width": 945,"height": 250,"row": [{"field": "ypos",// mannual y position "type": "quantitative","scale": {// set fixed domain "domain": [0,100]}}],"column": [{"field": "pct_change","type": "quantitative","scale": {"domain": [-1,1]}}],"haxis": {// axis design (grid) "grid": true,"gridColor": "#eeeeee","gridWidth": 1}},"layer": [{"mark": {"type": "circle","size": {// size encoding as mark property "field": "total","scale": {"range": [50,5000]}},"color": {// color (fill) encoding "field": "negative","scale": {"domain": ["positive","negative"],"range": ["#3ea990","#f46230"]}},"stroke": {// color (stroke) encoding "field": "negative","scale": {"domain": ["positive","negative"],"range": ["#26806C","#DB4021"]}},"strokeWidth": {"value": 1}},"text": [{"type": "on-axis",// axis labels "field": "pct_change","values": [-1,-0.5,0,0.5,1],"orient": "top","items": [{"format": "+.0%","fontSize": 14,"color": "#aaaaaa"}]},{// mark labels; type 1 "type": "on-mark","field": "category","values": ["Warehouse clubs","Alcohol","Food delivery","Gaming"],"orient": "bottom-center","anchorAlign": "middle","dy": 5,"items": [{"color": "$mark",// same color (fill) as its associating mark "align": "center","fontWeight": 700}]},{// mark labels; type 2 "type": "on-mark","field": "category","values": ["Home improvement"],"orient": "top-center","anchorAlign": "middle","dy": -20,"width": 300,"items": [{"color": "$mark","align": "center","fontWeight": 700}]},{// mark labels; type 3 "type": "on-mark","field": "category","values": ["Video streaming","Online grocers"],"orient": "top-center","anchorAlign": "middle","dy": -35,"items": [{"color": "$mark","align": "center","fontWeight": 700}]},{// mark labels; type 4 "type": "on-mark","field": "category","values": ["Meal kits","Apparel","Movie theaters","Lodging"],"orient": "bottom-center","anchorAlign": "middle","dy": 25,"items": [{"color": "$mark","align": "center","fontWeight": 700}],"tick": true},{// mark labels; type 5 "type": "on-mark","field": "category","values": ["Airlines","Cruises","Fitness","Charitable giving"],"orient": "top-center","anchorAlign": "middle","dy": -55,"items": [{"color": "$mark","align": "center","fontWeight": 700}],"tick": true},{// mark labels; type 6 "type": "on-mark","field": "category","values": ["Fast foods","Mobile","General merchandise and e-commerce","Supermarkets"],"orient": "middle-center","anchorAlign": "middle","width": 120,"items": [{"color": "white","align": "center","fontWeight": 700,"fontStroke": "$mark"}]}]}],"nondata": {"items": [{"type": "text",// informational text for axis "name": "text-assist-upward","x": 502.5,"y": 10,"width": 150,"text": [{"text": "More spending $arrow-right$","align": "left","fontSize": 13,"lineHeight": 140,"fontColor": "#aaaaaa"}]},{"type": "text",// informational text for axis "name": "text-assist-downward","x": 302.5,"y": 10,"width": 150,"anchor": "end","text": [{"text": "$arrow-left$ Less spending","align": "right","fontSize": 13,"lineHeight": 140,"fontColor": "#aaaaaa"}]}]},"data": [// dataset for the visualization {"category": "Activewear","total": 1986952,"ypos": 50,"text": "Nike, Adidas, Lululemon, North Face and 19 more","pct_change": -0.39,"negative": "negative"},{"category": "Airlines","total": 10911317,"ypos": 57,"text": "American Airlines, Delta Air Lines, United Airlines and five others","pct_change": -0.91,"negative": "negative"},{"category": "Alcohol","total": 598712,"ypos": 50,"text": "BevMo, Vivino, Saucey and two more","pct_change": 0.25,"negative": "positive"},{"category": "Apparel","total": 9911602,"ypos": 30,"text": "Ralph Lauren, Old Navy, Banana Republic and 155 more","pct_change": -0.67,"negative": "negative"},{"category": "Arts and crafts","total": 2105547,"ypos": 75,"text": "Hobby Lobby, Michaels, Blick Art Materials and 10 more","pct_change": -0.64,"negative": "negative"},{"category": "Auto parts","total": 3627206,"ypos": 72,"text": "AutoZone, Advance Auto Parts, O’Reilly Auto Parts and 20 more","pct_change": -0.33,"negative": "negative"},{"category": "Auto sales","total": 2073506,"ypos": 20,"text": "Tesla, Harley-Davidson, CarMax and two more","pct_change": -0.34,"negative": "negative"},{"category": "Beauty","total": 3972562,"ypos": 32,"text": "Sephora, Great Clips, Ulta Beauty and 57 more","pct_change": -0.52,"negative": "negative"},{"category": "Book retailers","total": 545094,"ypos": 41,"text": "Barnes & Noble, Half Price Books, Books-A-Million and two more","pct_change": -0.68,"negative": "negative"},{"category": "Cable providers","total": 9069026,"ypos": 20,"text": "Time Warner Cable, AT&T TV NOW, Cox Communications and 10 more","pct_change": -0.18,"negative": "negative"},{"category": "Casual dining","total": 8693808,"ypos": 40,"text": "Applebee’s, Olive Garden, IHOP and 86 more","pct_change": -0.72,"negative": "negative"},{"category": "Charitable giving","total": 220931,"ypos": 65,"text": "The Salvation Army, St. Jude Medical, World Vision and one more","pct_change": -0.34,"negative": "negative"},{"category": "Children","total": 888562,"ypos": 61,"text": "The Children’s Place, Oshkosh B’Gosh, Gymboree and 19 more","pct_change": -0.69,"negative": "negative"},{"category": "Convenience and gas","total": 9954754,"ypos": 45,"text": "Costco Gasoline, Murphy USA, Casey’s General Stores and 19 more","pct_change": -0.54,"negative": "negative"},{"category": "Cruises","total": 2577886,"ypos": 75,"text": "Carnival, Royal Caribbean, Disney and eight more","pct_change": -0.86,"negative": "negative"},{"category": "Food delivery","total": 3395311,"ypos": 50,"text": "Grubhub, Seamless, DoorDash, Uber Eats and 21 more","pct_change": 0.49,"negative": "positive"},{"category": "Discount grocers","total": 3517484,"ypos": 83,"text": "Aldi, Food 4 Less, FoodMaxx and 14 more","pct_change": 0.03,"negative": "positive"},{"category": "Discount stores","total": 2222210,"ypos": 75,"text": "Dollar General, Dollar Tree, Family Dollar and four more","pct_change": 0.01,"negative": "positive"},{"category": "Drug stores","total": 4206820,"ypos": 33,"text": "Walgreens, Rite Aid and Duane Reade","pct_change": -0.2,"negative": "negative"},{"category": "E-Books","total": 575669,"ypos": 16,"text": "Audible, Kindle and Audiobooks","pct_change": 0.03,"negative": "positive"},{"category": "Education resources","total": 383548,"ypos": 70,"text": "Coursera, Rosetta Stone, Udemy and 24 more","pct_change": -0.1,"negative": "negative"},{"category": "Electronics","total": 8401192,"ypos": 56,"text": "Apple, Best Buy, Hewlett Packard and 15 more","pct_change": -0.33,"negative": "negative"},{"category": "Entertainment","total": 1186509,"ypos": 57,"text": "Bowlmor, Dave & Buster’s, LivingSocial and 15 more","pct_change": -0.8,"negative": "negative"},{"category": "Events and attractions","total": 5243258,"ypos": 70,"text": "Ticketmaster, Six Flags, Topgolf and 44 more","pct_change": -0.91,"negative": "negative"},{"category": "Eyewear","total": 488777,"ypos": 70,"text": "Pearle Vision, Sunglass Hut, Warby Parker and 13 more","pct_change": -0.8,"negative": "negative"},{"category": "Fast casual","total": 5350506,"ypos": 55,"text": "Panera, Sweetgreen, Le Pain Quotidien and 58 others","pct_change": -0.46,"negative": "negative"},{"category": "Fast fashion","total": 933136,"ypos": 52,"text": "Uniqlo, Zara, H&M and 3 more","pct_change": -0.86,"negative": "negative"},{"category": "Fine dining","total": 227201,"ypos": 15,"text": "Ruth’s Chris, Del Frisco’s, Momofuku and nine more","pct_change": -0.84,"negative": "negative"},{"category": "Fitness","total": 4447442,"ypos": 70,"text": "24 Hour Fitness, Y.M.C.A., SoulCycle and 30 more","pct_change": -0.71,"negative": "negative"},{"category": "Food hall","total": 42677,"ypos": 62,"text": "Eataly","pct_change": -0.72,"negative": "negative"},{"category": "Footwear","total": 2880066,"ypos": 56,"text": "Foot Locker, Zappos, Ugg and 53 more","pct_change": -0.74,"negative": "negative"},{"category": "Gaming","total": 1812511,"ypos": 50,"text": "Twitch, Nintendo, Fortnite and 19 more","pct_change": 0.74,"negative": "positive"},{"category": "General merchandise and e-commerce","total": 86820510,"ypos": 60,"text": "Amazon, Walmart, Etsy and 34 more","pct_change": 0.08,"negative": "positive"},{"category": "Healthcare","total": 104448,"ypos": 53,"text": "MDLive, One Medical, MedExpress and 13 more","pct_change": -0.2,"negative": "negative"},{"category": "Home beverages","total": 134218,"ypos": 40,"text": "Nespresso, DAVIDsTEA, Nuun and two more","pct_change": 0.18,"negative": "positive"},{"category": "Home furnishings","total": 6763123,"ypos": 40,"text": "Crate & Barrel, Mattress Firm, West Elm and 68 more","pct_change": -0.42,"negative": "negative"},{"category": "Home improvement","total": 25903933,"ypos": 85,"text": "Home Depot, Lowe’s, Sherwin Williams and 61 more","pct_change": 0.12,"negative": "positive"},{"category": "Home security","total": 1062158,"ypos": 60,"text": "Brinks Home Security, ADT, Simplisafe and seven more","pct_change": -0.21,"negative": "negative"},{"category": "Insurance","total": 13169325,"ypos": 76,"text": "UnitedHealth, Geico, Aetna and 20 more","pct_change": -0.16,"negative": "negative"},{"category": "Internet services","total": 3429269,"ypos": 50,"text": "Dropbox, Zoom, Adobe and 67 more","pct_change": -0.02,"negative": "negative"},{"category": "Intimate apparel","total": 647019,"ypos": 45,"text": "Victoria’s Secret, ThirdLove, Maidenform and 11 more","pct_change": -0.65,"negative": "negative"},{"category": "Jewelry and watches","total": 752939,"ypos": 20,"text": "Kay Jewelers, Shinola, Cartier and 32 more","pct_change": -0.75,"negative": "negative"},{"category": "Lab testing","total": 76852,"ypos": 30,"text": "Covance and LabCorp","pct_change": -0.16,"negative": "negative"},{"category": "Lodging","total": 8525446,"ypos": 25,"text": "Marriott, Hilton, Hyatt and 95 more","pct_change": -0.87,"negative": "negative"},{"category": "Luxury department stores","total": 3159456,"ypos": 62,"text": "Neiman Marcus, Saks Fifth Avenue, Bloomingdale’s and five others","pct_change": -0.4,"negative": "negative"},{"category": "Mass transit","total": 1533588,"ypos": 62,"text": "Amtrak, Metro-North, Megabus and four others","pct_change": -0.96,"negative": "negative"},{"category": "Meal kits","total": 776390,"ypos": 52,"text": "Blue Apron, HelloFresh, Home Chef and 12 others","pct_change": 0.34,"negative": "positive"},{"category": "Mid-tier department stores","total": 7686600,"ypos": 38,"text": "Macy’s J.C. Penney, Century 21 and 16 more","pct_change": -0.59,"negative": "negative"},{"category": "Mobile","total": 36517925,"ypos": 57,"text": "AT&T, Verizon, T-Mobile and 14 more","pct_change": -0.14,"negative": "negative"},{"category": "Movie theaters","total": 1766969,"ypos": 40,"text": "AMC, Regal Cinemas, Cinemark and eight more","pct_change": -0.98,"negative": "negative"},{"category": "Music","total": 266445,"ypos": 60,"text": "Guitar Center, Musician’s Friend, Music & Arts and two more","pct_change": -0.63,"negative": "negative"},{"category": "Music streaming","total": 4127854,"ypos": 60,"text": "Spotify, Google Play, SiriusXM and five more","pct_change": 0.19,"negative": "positive"},{"category": "News media","total": 277569,"ypos": 41,"text": "The New York Times, The Wall Street Journal, The Economist and eight more","pct_change": 0.08,"negative": "positive"},{"category": "Occasion and gifts","total": 884291,"ypos": 25,"text": "1-800-Flowers, Yankee Candle, Party City and 27 more","pct_change": -0.58,"negative": "negative"},{"category": "Off-price department stores","total": 5831079,"ypos": 45,"text": "T.J. Maxx, Marshalls, Burlington Stores and eight more","pct_change": -0.89,"negative": "negative"},{"category": "Office supplies","total": 841325,"ypos": 48,"text": "Office Depot, Staples, Officemax and one more","pct_change": 0.18,"negative": "positive"},{"category": "Online grocers","total": 4831393,"ypos": 50,"text": "Instacart, FreshDirect, Walmart online grocery and 16 more","pct_change": 0.8,"negative": "positive"},{"category": "Online travel agency","total": 5645724,"ypos": 30,"text": "Expedia, Airbnb, Priceline.com and 13 more","pct_change": -0.8,"negative": "negative"},{"category": "Parking","total": 54506,"ypos": 38,"text": "Park ’N Fly, Parkmobile, Preflight Airport Parking and one more","pct_change": -0.92,"negative": "negative"},{"category": "Personal care and nutrition","total": 3163452,"ypos": 73,"text": "GNC, Weight Watchers, Massage Envy and 54 more","pct_change": -0.39,"negative": "negative"},{"category": "Pets","total": 3882692,"ypos": 86,"text": "PetSmart, Chewy, Petco and 13 more","pct_change": -0.1,"negative": "negative"},{"category": "Pharmacies","total": 3456757,"ypos": 41,"text": "CVS, Express Scripts, PillPack and seven more","pct_change": -0.18,"negative": "negative"},{"category": "Plus size","total": 302789,"ypos": 80,"text": "Lane Bryant, Casual Male XL, Catherines and 12 more","pct_change": -0.77,"negative": "negative"},{"category": "Fast foods","total": 21554623,"ypos": 40,"text": "McDonald’s, Taco Bell, Domino’s Pizza and 102 more","pct_change": -0.34,"negative": "negative"},{"category": "Rental cars","total": 2668810,"ypos": 52,"text": "Avis, Hertz, Enterprise and 11 more","pct_change": -0.7,"negative": "negative"},{"category": "Ride share","total": 2965580,"ypos": 63,"text": "Uber, Lyft, Via and three more","pct_change": -0.86,"negative": "negative"},{"category": "Scooter share","total": 27060,"ypos": 53,"text": "Bird, Lime and Uber bike share","pct_change": -0.98,"negative": "negative"},{"category": "Shipping","total": 256669,"ypos": 25,"text": "FedEx, Shipstation and four more","pct_change": -0.37,"negative": "negative"},{"category": "Snacks","total": 38993,"ypos": 45,"text": "Mrs. Fields’, TCBY, IT’SUGAR and five more","pct_change": -0.8,"negative": "negative"},{"category": "Social media","total": 141246,"ypos": 40,"text": "Tinder, LinkedIn, Match.com and 13 more","pct_change": -0.06,"negative": "negative"},{"category": "Specialty","total": 1052875,"ypos": 48,"text": "WeWork, WW Grainger, College Board and seven more","pct_change": -0.19,"negative": "negative"},{"category": "Specialty apparel","total": 458479,"ypos": 25,"text": "David’s Bridal, Canada Goose, Scrubs and 16 more","pct_change": -0.72,"negative": "negative"},{"category": "Sporting goods","total": 4009611,"ypos": 60,"text": "Dick’s Sporting Goods, Bass Pro Shops, REI and 18 more","pct_change": -0.53,"negative": "negative"},{"category": "Storage","total": 1137833,"ypos": 65,"text": "Cubesmart, Public Storage, Extra Space Storage and four more","pct_change": -0.6,"negative": "negative"},{"category": "Supermarkets","total": 62250525,"ypos": 32,"text": "Kroger, Trader Joe’s, Whole Foods and 95 more","pct_change": 0.01,"negative": "positive"},{"category": "Taxi","total": 286688,"ypos": 25,"text": "NYC Taxi","pct_change": -0.97,"negative": "negative"},{"category": "Tobacco and vaping","total": 31551,"ypos": 45,"text": "Hemper and JUUL","pct_change": -0.48,"negative": "negative"},{"category": "Tolls","total": 1290462,"ypos": 58,"text": "E-ZPass, FasTrak and SunPass","pct_change": -0.57,"negative": "negative"},{"category": "Toys","total": 58039,"ypos": 36,"text": "Build-a-Bear Workshop, F.A.O. Schwarz, Toys \"R\" Us and two more","pct_change": -0.85,"negative": "negative"},{"category": "Video streaming","total": 2131943,"ypos": 60,"text": "Netflix, Hulu, Disney Plus and 17 more","pct_change": 0.38,"negative": "positive"},{"category": "Warehouse clubs","total": 15013125,"ypos": 7,"text": "Costco and BJ’s Wholesale Club","pct_change": 0.01,"negative": "positive"}]}
Below, we provide one transformation rule at a time, and show the intermediate result on the side.
{"$schema": "../cicero.json","name": "spending-bubble-mobile","description": "This is a Cicero specification for 'COVID Spending (Buuble)' visualization from desktop to mobile.","metadata": {"condition": "small"},"transformations": [...]}
{"description": "Resize the chart; with proportionate rescaling.","specifier": {"role": "view"},"action": "modify","option": {"width": 350,"height": 945}}
{"description": "Transpose axis","specifier": {"role": "view"},"action": "transpose"}
"description": "Reverse the column element's order","specifier": {"role": "column"},"action": "modify","option": {"sort": {"reverse": true}}}
{"description": "Reposition & Resize annotations","specifier": {"role": "annotation","text": "More spending $arrow-right$"// query an annotation element using its text value (data query) },"action": "modify","option": {"y": 432.5,"x": 25,"width": 50,"text": ["$arrow-up$
More spending"],"textAlign": "right"}}
{"description": "Reposition & Resize annotations","specifier": {"role": "annotation","text": "$arrow-left$ Less spending"},"action": "modify","option": {"y": 512.5,"x": 25,"width": 50,"text": ["Less spending
$arrow-down$"],"textAlign": "right"}},
{"description": "Remove labels","specifier": {"role": "mark.label","field": "category","values": [// query by their values "Fitness","Movie theaters","Mobile","Video streaming"]},"action": "remove"}
{"description": "Remove callouts/ticks for labels","action": "remove","specifier": {"role": "mark.label.tick","values": {"not": [// query by values except ... "Charitable giving"]}}}
{"description": "Reposition labels","specifier": {"role": "mark.label","values": ["Online grocers","Gaming","Cruises"]},"action": "modify","option": {"anchor": "end","orient": "middle-left","dx": -5,"dy": 0,"textAlign": "right"}}
{"description": "Reposition labels","specifier": {"role": "mark.label","values": ["Meal kits","Alcohol","Food delivery","Lodging"]},"action": "modify","option": {"anchor": "start","orient": "middle-right","dx": 5,"dy": 0,"textAlign": "left","width": 100}}
{"description": "Reposition labels","specifier": {"role": "mark.label","values": ["Warehouse clubs"]},"action": "modify","option": {"anchor": "end","orient": "bottom-right","dx": 0,"dy": 5,"textAlign": "right","width": 100}}
{"description": "Reposition labels","specifier": {"role": "mark.label","values": ["Home improvement"]},"action": "modify","option": {"anchor": "end","orient": "top-right","dx": 0,"dy": -35,"textAlign": "right","width": 100}}
{"description": "Reposition labels","specifier": {"role": "mark.label","values": ["Charitable giving"]},"action": "modify","option": {"anchor": "end","orient": "middle-left","dx": -40,"dy": 0,"textAlign": "right"}}
{"description": "Reposition labels","specifier": {"role": "mark.label","values": ["Apparel", "Airlines"]},"action": "modify","option": {"anchor": "middle","orient": "middle-center","dx": 0,"dy": 0,"textAlign": "center","fontStroke": "$mark","fontColor": "white"}}