Interactive Social Chart for WordPress with D3

Social Media Studio for Digital Natives

***

Interactive Social Chart for WordPress with D3

What is possible with with D3 in wordpress ? For Fast Prototyping and Visualization of Graph and Social Data there is nearly nothing more beautiful than the D3. But you don’t want to build a own webpage for every single Graph Chart. Just before starting to hammer some code together I found that great new plugin WordPress-d3.js .

Vienno show in these  Tutorial the classical way how to work with D3 Charts . With the Wp-Plugin no html editing is needed and you can experiment right inside WP. 

 

With the new D3 Button you can embed the needed Javascript code, just replace following line

var svg = d3.select("body").append("svg")

change the selector “body” with your custom Id you can find it in the left top corner something like wpd3-1234-0  . (don’t forget the “.”)

var svg = d3.select(".wpd3-1234-0").append("svg")

 

CSS for the D3 Charts 

Probably you would need some extra to get the full potential of D3 into your WP since most examples keep some Css Styles too. If you don’t add the style the charts will look B/W only. To prevent editing you master style file for every new D3 chose a style plugin to add some extra style for your D3 Graph chart post. Alternatively you can also include the css via wordpress-d3 . To add your data file in the script just copy the link from the media library to your data.json.txt into the script editor .

 

I think even with basic knowledge you can easily experiment with dynamic visuals for your Blog. Just don’t be afraid of javascript code the worst thing what can happen, your post shows nothing .

Feed your D3 with Data 

Since most Data D3 needs are Tab Separated or you can upload the datafile to your media library . If you need Json files you have to add a .txt ending else WP will return an Error not permitted for Security reason . Even Google Spreadsheet could be a source for your D3 Data file since the default export TXT is Tab separated.

d3.json("https://blog.metaprime.at/wp-content/uploads/2014/04/FBBullet.json_.txt", .......

To add some additional API Social data from Facebook Twitter or other resources could showcase even more dynamic live charakter in your chart.

Some Fantastic examples to explore below  for these post we used mbostock  Bullet Chart .Now you are ready to get addicted to D3 and take sneak preview by your own hand into the Data visualization world .

Some personal plugin modification

For some reason the Plugin broke the Metasocial Bar, add many

and
tags after some test i removed commented out these dubble calls from the plugin last lines.

// Metamode Removed problem in metasocial and
//added again with less priority.
//add_filter( 'the_content', 'wpautop' , 90);
//add_filter( 'the_content', 'wptexturize' , 90);

Now all smooth and beautiful like we love it

How to get Google Spreadsheet Data into D3 

To start Prototyping some Data visualisation idea Google Spreadsheet is simple Data Source for generating the dataset to feed your D3 chart with some dynamic data.

Google Spreadsheet can be scripted auto populating by user forms .

 

  

function loadGoogleSpreadsheet(spreadsheetKey, fn) {
  d3.csv("https://docs.google.com/spreadsheet/pub?key="+spreadsheetKey+"&single=true&output=csv", fn);
}

 

To load external data from other Domain  we will run into Cross origin Problems

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin

Some  way to go

1. You cache the data via simple php proxy on your own domain

2. You use Google Spreadsheet with  CORS  cors.io proxy

Your url for Json request should look like . The spreadsheet key you find in the share Url .

https://cors.io/spreadsheets.google.com/feeds/list/YOURSPREDSHEETKEY/od6/public/values?alt=json

 

 

 

Start learning more about D3JS

D3 MbStock 

More than 1000 D3 Examples

Bisovizaulise

D3 Wordcloud & d3-cloud library  by Jason Davies