Population Pyramid with Paths rather than Rect

23 views
Skip to first unread message

cjrobi...@gmail.com

unread,
Nov 19, 2020, 2:35:05 PM11/19/20
to vega-js
Hi all,

I'm in the midst of learning to utilize Vega for some simple graph work, specifically looking to plot data similar to the Population Pyramid example: 

However, my case is that the values showcase increases and decreases of certain data in a given order, which I'd like to showcase by have the rects look like arrows point in their direction. I'm stumped on a two things: 

1. Would it make more sense to draw the entire bar object as a path, or have 2 parts (rect and triangle).
2. How do you dynamically adjust an SVG path based on the data? IE, the height, length, etc needs to be generated based on the data.

Here is my failed attempt: 
https://vega.github.io/editor/#/url/vega/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykSArJQBWENgDsQAGhAATONABONHJnaT0AQQAEONjgYAbJGom6AnoqQIas7RBhsA7jXFltAVUoBlStvkIbGRWODA0UBDaAGaKbAjaAIwAHAIADNqYbNoATKl5lNIYcDRkWGgALHkyOEiysq5kaAIyECXiSIYQaADaoO0IcGggsEiKmADqtvSFxB0Mg6gAzHkAvlJ91gvDMKOYAAq1M3MLuWsbA0MustMyDDiyJlvZ2gBU2iNjk9cw2gDU7zsxgdZCAziB+ltzHBRkdDPM0LkqiAmK4QahQK4DJghlY3IMZDYNMk0gSkAAPBF5VItTBwHBoBKpFZgiFDGo3ECzOFbACyiUW2nSABltABaACciQS2hFCQF2QEMv5gsKKPEaIx4ixQ1pZOx1WMUDgjkM8kUQ28ADUAOLaA70bTeTDKNyglYAXRkD0wKFQvXBmzZ+iMJnUhQYikMQ29-D0BmMpnEIjEkhZgfQcYAmtDzS02BGjUH46GJIVnUhxBAomxFAgeqBMOYcFsojRDLTcyA4GScOb0N6GAhKFDRtoALxj7Qj80etMXdDIQwKQpiAtbLM5su4qs1ut+htNlttjuFbu96MmQeUCDd8eThKg91zluIDrLvNrovZmEycuV6u1vWICNs2Qytu2cCdmefZyJeQ43mSd45I+z5DEgZBwNasR3F0H6KIWGbBgmYa-tuAF7v6IFbOhwR8LShTBPmOBMOYPQgOhgxPlxLRQG+XT7gG84gKxv6HkMTAViCMi4hhQGtGQ7RRug8AlGUaypJ6IDYeqaDOvMXpxEgrhoKAMZoRhWFMbhICtnAprmYMzLrIJWxQGWYnoDW9SKYUsiGcZfoJFI2SaTJCzdCAADEsgCCkAgoDIkUAGxQOUcDigA7CA3EgMgigANb8ZRHnAd2+ogK4HZIFAaikGgUQdDeMgxHEJmwT6DmWThoIyHA4hQGw8htX1J7oiAFJjfJPnoB8ExTD8-yzcC2gEMhazCW10BvkMIk2TQdlouxskyBJOmoKklACOturYmNtn2egHE9ciSA3oYrgLKAXLwgutiyEuz0dG0bXfa5I2Qc94FKV9xxDJFVJuk5B6gegjF3Ke-WDZ9IB3N62MTTD3JoEyMgqaUt2gFNHRDGTalOSAW1LkV5xbBSokoyA73iJu0kVrJAlU0p2y7F80zqZp4jhAselwDIABekFsLpij6XI-kaKZJi+iAcYhomhT3Ydzb6ADzKaeSy4CTW+3iLdyJsNgrU8dt6BszZu4mEM1lqJgAPoAAYq+TOPqSBXM8BJWKHANUG7Ee6ax16BREHy7rX1A1DWN4N9qABMM7xfvjQb+0PTrcAm45Mhktkm0F6zsI-STG2TXXO3FwdDnPbTFP5y7G0nZJDIyGwURRDet2igk61QwA8jUUB0KxY2g8TlBJdPbbQ73hduc1JeHQhiNglRbImDAsetWNZlJynXRp5jmegNnbV54z9d7x3GblzgptVzXLd9zdivc660l6U1bugXahtO7rXZOfSabRqYZjPl3Yo5Na5912qdNEQUQAjzHnACeU896GEMHPaqi8Qaw3OmvDepCME73bqXQ+zIzbHxKmjekvUH7Y1xo8F+m1EFC1mqLBaAJdjAlQapHugsaZoLputN+4dWSu3chzLmPMtJ83CtSSmQihgiPmiHcEUtlaqwVrEMxss1bIACgnbWutiKlg-qXY2P9HIehkBbcO1sRriQdpkOsztC5u3Ip7dA3s6CFx5HxYxeVCpARPugKOMdmpxzatfXKsT74Z2xs-Mar8IFFxcUbb+v9xr-3AYAhuCwm5gO3pCJhh0nrrW7gwxpA8zq4PwePNAk86FkPnpQ5e1CLrrxIVvN+Bimle27EfLiKwgA
Reply all
Reply to author
Forward
0 new messages