Can I create Custom Widgets / Visualizations? What are some examples?

Pinned Answered

Yes you can.

This thread includes various examples of the Custom Widget visualization type and examples of adding your own JavaScript code to customize the look and feel of your visualizations.

Code samples are included and can serve as a starting point. Over time, more examples will be added.

8 comments

Official comment

Ralf Abueg April 14, 2020 07:11 (Edited April 14, 2020 07:28)
GEO CLUSTERS / CUSTOM MAPS: CHOROPLETH MAP (Custom JavaScript Code)

The Geo - Clusters/Custom Maps visualization allows you to add your own custom JavaScript code to customize the look and feel of the map. This is executed right before the map is rendered, after all other processing.

D3.js and Leaflet libraries are supported, so there is no need to initialize prior.

The Custom JavaScript Handler has access to:
- A leaflet ‘map’ object
- A ‘data’ object with the dataset
- A ‘properties’ object that includes the widget settings
Steps to get started:
1. Create a widget with location data (i.e. coordinates, FIPS codes) that you intend to display on a map
2. Select the Geo - Clusters/Custom Maps from the list of visualization types
3. In visualization settings under options, enter or paste your JavaScript code in the Custom Javascript Handler text box
4. Other optional inputs available include setting the Map’s center latitude and longitude, zoom level, etc.
You may use the sample JavaScript code examples below as a starting point.

Example 1: County-level choropleth map

This was used to create a county-level choropleth map from a dataset containing county FIPS codes. It calls into a GeoJSON file containing coordinates that draw the county boundaries. It also includes functions for setting the style and to add a popup to display of the contents when hovering over each feature.

Code Example: https://knowi-custom-samples.s3.amazonaws.com/us-counties.js

Demonstration: https://www.loom.com/share/47445d678e464c90b3811333d24466a1

County-level view:

Example 2: State-level choropleth map (with Drilldowns)

This was used to create a state-level choropleth map from a dataset containing state FIPS codes. It calls into a GeoJSON file containing coordinates that draw the state boundaries and the counties within it. It includes functions for setting the style and to add a popup to display of the contents when hovering over each feature. It also includes a drilldown function, that allows you to drill into individual states.

Code Example: https://knowi-custom-samples.s3.amazonaws.com/us-states-drilldown.js

Demonstration: https://www.loom.com/share/d098bea31b914a869574c5db5f7fe3ac

Country view by state:

Drilldown into individual states:

For more information on Geo Cluster/Custom Maps Visualization type, click here.
Comment actions Permalink
Ralf Abueg April 14, 2020 07:27 (Edited April 20, 2020 21:08)
ANIMATED TIMELINE BAR CHART

Also known as a "Race Chart", this visualization starts out as a standard bar chart with categorical values in the x-axis, and numerical values in the y-axis. The animation illustrates how the categorical values shift in position based on how their values change over time.

Below is an example of the visualization that shows the cumulative number of COVID-19 cases in the US over time by state.

Code sample: https://github.com/ezeagwulae/knowi-code-samples/blob/master/custom-visualization-examples/animated_bar_chart.html.

Demonstration:
```
 
```
0

Comment actions Permalink
Ralf Abueg April 20, 2020 21:08

BELL CURVE-STANDARD DEVIATION CHART

This custom chart type displays a bell curve, which is a graphical depiction of a normal probability distribution, whose underlying standard deviations from the mean create the curved bell shape. Note that a standard deviation is a measurement used to quantify the variability of data dispersion, in a set of given values.

The code sample provided below includes hard-coded data that can serve as a starting point. Simply enter it in the "Text code" section of the Custom Text/HTML visualization type settings.

To use the data from the current dataset (widget), use {{data}} to return the data in JSON format as arrays of fields and manipulate it accordingly.

Code Sample: https://github.com/ezeagwulae/knowi-code-samples/blob/master/custom-visualization-examples/bell_curve_stddev_chart.html

0

Comment actions Permalink
Manny Ezeagwula May 01, 2020 18:23 (Edited May 01, 2020 18:25)

EMBED MULTIPLE CHARTS IN A SINGLE WIDGET

This example allows you to embed multiple charts into a single widget control with an on-click jQuery event.

Code sample: https://github.com/ezeagwulae/knowi-code-samples/blob/master/custom-visualization-examples/embed_multiple_widgets.html

0

Comment actions Permalink
Manny Ezeagwula May 05, 2020 23:13 (Edited May 05, 2020 23:27)

TIMELINE GEO-HEATMAP

Code sample: https://github.com/ezeagwulae/knowi-code-samples/blob/master/custom-visualization-examples/timeline_geo_heatmap.html

Live sample: https://www.knowi.com/coronavirus-dashboards/united-states-animated-heatmap/

Recording: https://recordit.co/UCVxxBA03P

0

Comment actions Permalink
Manny Ezeagwula May 05, 2020 23:19 (Edited May 05, 2020 23:26)

COUNTY-LEVEL HEAT MAP

Code sample: https://github.com/ezeagwulae/knowi-code-samples/blob/master/custom-visualization-examples/county_heatmap.html

Live Example: https://www.knowi.com/coronavirus-dashboards/california-2/

0

Comment actions Permalink
Manny Ezeagwula May 05, 2020 23:25

U.S. STATES WITH DRILLDOWN

code sample: https://github.com/ezeagwulae/knowi-code-samples/blob/master/custom-visualization-examples/us_states_drilldown.html

sample recording: http://recordit.co/eCStfR1dZx

0

Comment actions Permalink
Manny Ezeagwula March 23, 2021 19:55 (Edited March 23, 2021 19:56)

CUSTOMER GRID COLUMN CHART

Sample recording: https://www.loom.com/share/b2e2253d45634c6e835e89e42c71fa1c

code sample: https://github.com/cloud9charts/knowi-code-samples/blob/master/custom-visualization-examples/grid_column_template_chart.html

0

Comment actions Permalink