Category Archives: data visualization

Creating Sentiment Line Chart for the News with Watson, Python, and D3js

Leave a reply

Requirements:
You must have Python installed. Check to see if you have Python installed from the commandline:
python --version

Table of Contents:

  1. Create a Starterapp
  2. Git Clone and Setup
  3. Create Additional Folders and Files
  4. Commit and Push Changes to Repository, Build and Deploy
  5. Create an AlchemyAPI service
  6. Create a Cloudant NoSQL service
  7. Add the Basic Workflow for Request-Response
  8. Get News using AlchemyAPI
  9. Create Helper Functions
  10. Save Responses in Cloudant
  11. Parse Response for D3js
  12. Draw the Line Chart in D3js

You can import AlchemyAPI requests into Postman with this Postman collection.

The source code for the application can be viewed or cloned from Github.

1. Create a Starterapp

  1. Go to Catalog > Boilerplates
  2. Click the ‘Python Flask’ starterapp
  3. For name enter <username>-newssentiment
  4. Go to Overview
  5. Under ‘Continuous Integration’ click ‘Add GIT Repo and Pipeline’ to add a DevOps platform, select ‘Populate the repo with the starterapp packageand enable Build & Deploy pipeline’ > Click Continue > Click ‘CLOSE’.
  6. Click ‘EDIT CODE’.
  7. The very first time you login to the ‘DevOps’ environment you will need to pick a username for the ‘DevOps’ environment.
  8. In the left menu of icons, click the top folder icon, and click ‘Git URL’ to copy the Git repository url.
  9. If you prefer to edit in the online editor in Bluemix, click ‘EDIT CODE’ button and then click the second pencil icon in the left menu of icons.
  10. I will continue to work on localhost instead.

Continue reading →

[JavaScript] Find Related Concepts as D3js Bubble Chart

Leave a reply

The Find Related Concepts API from IDOL OnDemand returns the most relevant terms and concepts from related documents. Here’s represented as a D3 Bubble Chart. Thanks to incredibly good work by Mike Bostock. For a description of the API go here https://www.idolondemand.com/developer/apis/findrelatedconcepts#overview
For D3 Data-Driven Documents go here: http://d3js.org

D3: Binding Multi-Dimensional Arrays and Deep Nested Data

2 Replies

The easiest way to work with D3 data arrays is to create simple arrays. For example, to create a stacked array, represent each stack in a stacked bar by the a comma separated value in a row per bar.

state, males, females
CT, 125, 135
NY, 240, 250

But if you are retrieving data from an open data API via REST for instance or if you want to use dynamic data visualizations where the visualization depends on user input, it is easier to use the built-in d3.nest function. For example, the following data comes from http://www.clinicaltrials.gov and is formatted as a .csv file:

"nct_id","gender","status","phase","city","state","minimum_age","maximum_age"
"NCT00000102","Both","Completed","Phase 1/Phase 2","Charleston","South Carolina","14 Years","35 Years",
"NCT00000104","Female","Completed","N/A","Minneapolis","Minnesota","N/A","N/A",
"NCT00000105","Male","Completed","Phase 3","Charleston","South Carolina","10 Years","14 Years",

If you use a simple nested array with one level of parent-child structure, it is straightforward to bind data to your elements.

var data1 = d3.nest()
  .key(function(d) { return d.state; }).sortKeys(d3.ascending)
  .entries(data);

Using the d3.nest() function with a single key generates the following data array structure. Continue reading →