I know how to do the query, but where do I do the query? how do I get the custom data type visible in my visual studio and where do I write the code?

Here's an example for a different editor, should get you started at least: https://our.umbraco.com/documentation/Tutorials/creating-a-property-editor/

I follow these steps but the property editor does not show up in the property editor list when creating a data type.

you need to create a packa.manifest for your property editor and place it in a folder under app_plugins

My manifest looks like

{
  // we can define multiple editors
  "propertyEditors": [
    {
      /*this must be a unique alias*/
      "alias": "TagList",
      /*the name*/
      "name": "Common Tags",
      /*the icon*/
      "icon": "icon-tags",
      /*grouping for "Select editor" dialog*/
      "group": "pickers",
      /*the HTML file we will load for the editor*/
      "editor": {
        "view": "~/App_Plugins/TagList/taglisteditor.html",
        "valueType": "JSON"
      }
    }
  ],
  // array of files we want to inject into the application on app_start
  "javascript": [
    "~/App_Plugins/TagList/taglisteditor.controller.js",
    "~/App_Plugins/TagList/taglist.resource.js"
  ]
}

Ah ok, it works, how do I do this query? I thought this would be done through C# but it is done through angular I am not experienced with that? any pointers? should i make an api call in my c# code and call it from angular?

that is what I am doing yes. I am populating a mutiselect dropdown with the top 10 tags in the group used by the page

The number displays the number of times that tag appears in the metatag group (the one used by that page)

I have just created a local package from my code and am just about to test installing it in a clean umbraco, hopefully if all goes ok I will upload it.

Awesome, looking good, I will be working on my own implementation in the meantime.