Code Monkey home page Code Monkey logo

tableau-semiotic-hierarchy's Introduction

Semiotic Hierarchy Charts in Tableau

Credits

These individuals played a key role in making this thing happen, thanks to all of you!

Introduction

Semiotic Hierarchy Charts in Tableau

This is the semiotic hierarchy tableau extension. It will load a semiotic hierarchy visualization inside your Tableau Desktop, or Server App. We have built an intuitive UI to enable the user to leverage many different configurations that you can pass directly into Semiotic. This includes the ability for your instance of the extension to communicate with your other Tableau charts.

This extension is supported on Tableau Desktop >= 2018.3 and Tableau Server. Currently this extension is not sandboxed, but it could be. Also it has not been enabled by the Tableau Public team.

Env Requirements

Tableau Desktop >= 2018.3 and Tableau Server, sadly not Tableau Public.

Quick Start

Step 1: Find the extensions

Locate the Semiotic Hierarchy Extension on the community extensions page, or download the trex from the public directory of this repo. Either of these methods will allow you to download the .trex file locally on your machine.

Step 2: Load the dashboard extension

Open your dashboard and load the extension object onto the canvas. If prompted, click ‘Allow’ to permit the extension to run on your dashboard.

Loading the extension onto your dashboard

Step 3: Customize your hierarchy chart

There are several steps you will go through to customize the look, feel and interactivity of your hierarchy chart, our goal is to allow you to make this extension one with your Tableau Dashboard. You start this process by clicking the "Configure" button, or selecting configure from the Tableau menu. These steps include:

  • Select a type of hierarchy visualization

Select a type of hierarchy visualization

  • Select a sheet that is on your dashboard and contains you hierarchy data. Here is an example table of what is required for hierarchy data for this extension to work correctly.
Parent Node Child Node Some Value Color By Other Stuff(n)
null rootNode 100 black categoryValue
rootNode child1 20 blue categoryValue2
rootNode child2 20 green categoryValue1
child1 child3 100 blue categoryValue2
child1 child4 100 blue categoryValue2
child2 child5 100 green categoryValue1

Please take note: that there must be one, and only one record which has a null parent (even if it is fake), this is the root node of your hierarchy from which all things are made, if you do not provide a single root node (in the souce data sheet), the extension will crash.

  • Drag & Drop the fields identified from your source sheet to their corresponding role of your hierarchy.

Drag and drop your fields

  • Customize how your semiotic hierarchy chart will look and feel.

Customize look and feel

  • Determine how your semiotic hierarchy chart will interact with your Tableau dashboard.

Customize your interactivity

The semiotic hierarchy extension is a client-side app.Your data stays in your Tableau application.

Step 4: Save!

Save your Dashboard to persist the selections into your workbook, the updates you have made will not persist until you save the Tableau file.

Step 5: Re-configure and re-save

You can continue to adjust your configurations and settings to your delight, just remember to save your updates when you are done. If you want to have some fun, check out the sketchy render modes!

Sketchy fun

Step 6: Submit Feedback and Help us Test!

You can log any feedback, feature requests and/or issues you come across directly on our github issues page. What else do you want to do with this thing? Let us know!

Local Development Setup

For a development installation (requires npm, node and yarn):

Install node (> 8.15.0), yarn. For best management of Node versions, use nvm then simply run nvm use 8.

This project was bootstrapped with Create React App.

Start local app

1. Clone repo
git clone [email protected]:demartsc/tableau-semiotic-hierarchy.git
2. Install
yarn
# or
npm install
3. Start local app session
yarn start
# or
npm start

Setup local extension in Tableau Desktop

1. Launch Tableau

open tableau workbook (get it from public folder of this repo)

  • NOTE: if you want to enable remote debugging, use this command in terminal to open tableau (be sure to update the tableau version number)
open /Applications/Tableau\ Desktop\ 2020\.1.app --args --remote-debugging-port=8696

A debug session will be available in browser http://localhost:8696 or chrome://inspect#devices

2. Execute extension in tableau
  • copy the datablick-semiotic-hierarchy-local.trex file (inside the public folder) into your extensions folder of the My Tableau Repository (likely in your Documents folder).

  • Go to the Tableau window that opened when running the above command.

  • Drag the extension onto view and select the trex file from your my tableau repository\extensions folder.

  • More information on Tableau Extensions API about Get Started with Dashboard Extensions

Deploy

npm run deploy

Links

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.