Jul 13

Create Prefab Using D3 Library (DataMaps)

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards.
Datamaps is intended to provide data visualizations based on geographical data. It is SVG-based and can scale to any screen size. It heavily relies on the D3.js library.

In this section we will see how to create a Prefab to display the datamaps and use it in a project of your own.
We will be showing how to add some basic properties to manipulate the functionality.

DataMaps Prefab Creation

  1. Click on Create from the Prefab tab of the Project Dashboard
  2. Enter a name and description for the Prefab
  3. Visit the website for DataMaps and download the required files from the Downloads section. We will be implementing the Basic edition.
    We have used the following two files – topojson min.js and datamaps world min.js. (extract from the provided zip files)
  4. Import the Resources
  5. Select the folder you want the resource to be imported to, here we had selected resources folder.
  6. From Project Configurations, choose Config Prefab under Settings:
    • Add the uploaded script files. Make sure you enter topojson first and then datamaps resource
    • UI Design: Drag and drop a Container Widget onto the canvas, name it mapContainer and set the class as map-container
    • Open the Script tab and enter the following code for Prefab.onReady method

      Note: After successful creation of the prefab, inside the script, we notice there are few functions pre-defined:

      •  [Prefab.onPropertyChange = propertyChangeHandler;]
      • Prefab.onReady method will be triggered post-initialization of the prefab. The code should go here:
    • Prefab is ready for use.

DataMaps Prefab Usage

  1. Save and Publish the Prefab
  2. You can set the version for the Prefab and Publish it. Know more about publishing Prefabs from here.
  3. The Prefab will be available for use across the Projects. You can see the entry in the Artefacts list from the Developer Utilities on the Project Workspace and in the Widget Toolbox of any Project within your workspace.
  4. Open the project where you want to incorporate the Datamap Prefab created earlier
  5. You will find the Prefab entry in the Prefab toolbox
  6. Drag and drop the Prefab onto the canvas and set the height to 500px
  7. Run the app and see the map displayed

DataMaps Prefab – added functionality

Now that we have seen the usage of a basic datamap, let us add some properties to the Prefab which can be bound from the project containing the Prefab.

  1. Open the Datamap Prefab created earlier
  2. Open the Prefab Settings and add the following properties to it
Name Display Value Data Type Default Value Binding Type Widget Type Data Options
coverage Coverage string world select world,usa
colormap Color Map object in-bound text
dataset Dataset object in-bound text
datafield Data Field string in-bound select
usekeys Use Keys string in-bound select
itemlabel Item Label string world in-bound select
showdetails Show boolean true in-bound  checkbox
detailstemplate Details Template list in-bound  text
highlight Highlight string #e36000 in-bound colorpicker
height Height string 400  text
width Width string 100%  text

  1. Drag and drop another container, namemapActionContainer; classmap-action-buttons
  2. Add three buttons namedzoomIn, zoomOut and zoomHome; with icon classwi wi-zoom-in, wi wi-zoom-out, wi wi-home; and Click event to trigger – zoomInClick, zoomOutClick, zoomHomeClick
  3. The Script needs to be updated to include the functionality to support the properties and button events added. Download the following file for the updated script: datamaps_additional_script
  4. Now the Prefab is ready for consumption

DataMaps Prefab Usage – added functionality

Now that you have made changes to the Prefab, we have to incorporate these changes in the Project using the Prefab. There are two ways to achieve this – Update in Prefab in Project or Publish Prefab with an updated version.

  • Update Prefab in Project:
    1. From the Prefab, select Update Prefab in Project under the Export option and select the Project using the Prefab.
    2. Open the Project where Prefab was incorporated earlier
    3. You will see a dialog saying the updated version is available for usage. You can choose to Revert to the published version or Continue with the updated version. Click Continue to see the updated version.
    4. You will see the Prefab in the Toolbox with MOD status indicating that it is the modified version
    5. You need to Publish the Prefab to get the updated version in the Artifacts
  • Publish Prefab:
    1. Publish the Prefab and increment the version number
    2. Open the Project where Prefab was incorporated earlier
    3. You will see a dialog saying the updated version is available for usage. Update & Reload.
  • You will find new properties displayed in the Properties panel
  • To set the properties we will be creating two Model Variables – MapProps and ColorMap:
    1. MapProps as a list JSON format, we are setting label etc.:

    2. ColorMap with the following code, where we are defining colors for a few countries:

  • Bind the MapProps Variable to the Dataset property and set the rest of the properties; Bind ColorMaps Variable to the Colormap Property
  • Run the app, you can see the countries color coded, along with the labels. You can use the buttons to zoom in, zoom out or return to home settings:
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy.