Skip to content

Instantly share code, notes, and snippets.

View OneidaAlmodovar's full-sized avatar

OneidaAlmodovar OneidaAlmodovar

  • Jabil
  • Collierville, TN
View GitHub Profile
@deldersveld
deldersveld / Power BI Sample Bar Chart Custom Visual.md
Last active October 26, 2021 11:45
Sample Power BI bar chart custom visual adapted from https://bl.ocks.org/mbostock/3885304

Sample Power BI bar chart custom visual adapted from https://bl.ocks.org/mbostock/3885304

  • Follow the instructions at https://github.com/Microsoft/PowerBI-visuals-docs to install the Power BI Custom Visual CLI Tool
  • Follow the steps on the same site to create a new visual and install the typings for D3
  • Copy and paste the code from this gist's "visual.ts" into "src/visual.ts"
  • Copy and paste the code from this gist's "visual.less" into "style/visual.less"
  • Start the visual in CLI and view it using the Developer Visual in Power BI service

Adapting a visual like this from a static D3 example is not a simple matter of copying and pasting. If you look through the original D3 example and compare it with the Power BI version, you will see some changes where the original was split between constructor() and update(). The original D3 also only used enter(), but for a dynamic visual in Power BI, code for transition() and exit() were also added. Some other tweaks were needed to get it working decently