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
More than 1000 D3 Examples
D3 Wordcloud & d3-cloud library by Jason Davies