Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Over 2000 D3.js Examples and Demos

D3js data visualization examples

Here is an update to the 1000 D3 examples compilation and in addition to many more d3 examples, the list is now sorted alphabetically. Most of the D3 examples in this list come from this excel list but I also added some updates and my examples to push the list over 2K. Examples are really helpful when doing any kind of development so I am hoping that this big list of D3 examples will be a valuable resource. Bookmark and share with others. Here is the huge list of D3 demos:
Read more

WordPress Plugin with Ajax and MySQL

WordPress Ajax Plugin

I wanted to follow up from my last post on building a WordPress Plugin Admin Page and write about using Ajax calls with WordPress plugins. It is very common nowadays to use XMLHttpRequest to move data from the front-end to the back-end and WordPress supports this very well. Consider a contact form on your blog, when someone hits submit you could initiate an Ajax request to your plugin and process the data. Today, I will show how to use Ajax with a WordPress plugin and I will build a complete Quick Contact WordPress plugin that stores a form submission to a new database table which is displayed for quick viewing on a new admin page.
Read more

Creating a WordPress Plugin Admin Page

Creating wp plugin options page

If you are building a WordPress plugin, there is a high chance that you want to create a backend page, perhaps a place for Admin settings or options. This post will cover how to do that and I will also build a WP Plugin which has an Admin page that interacts with the WordPress database. The plugin will render a mySQL table in a HTML table with dynamic JavaScript features like sorting, searching, etc. I will show how to include specific JavaScript and CSS files for the plugin Admin page and how to interact with WordPress mySQL tables. The cool think about a plugin admin page is that you can use it test all kinds of WordPress Database queries.
Read more

Useful SQL Queries and Commands

Best mySQL queries

At some point you will need to store data in a database and this blog post should help you get familiar with a SQL database like mySQL (there are other SQL databases like PostgreSQL). I want to cover some basic concepts like setting up the database, specifying proper structure or schema, and playing with tables, columns, and rows. I will focus mostly on SELECT queries but also cover INSERT, UPDATE, DELETE, plus some math functions and regular expressions. I feel like learning SQL seems scary at first so I am hoping that this quick guide will alleviate some of these fears. I will use SQLfiddle (website for testing and sharing SQL queries) and the concept of a blog to work through some common mysql examples and database concepts.
Read more

Convert Images to Video with JavaScript

Image to Video Converter

How do you make a video programmatically? Sending images to a server side program like FFmpeg is one option but how do you make a video from images in HTML5, all on the client side? In the past, I have converted html5 canvas frames into an animated GIF and now I am looking to do something similar but finish with a video file. You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder. It even comes with a demo which shows how CANVAS frames are encoded into a webm video file. So, today, I am going to create an online video creator that lets you upload some images which get converter into a picture slideshow in video format.

Here is the Online Image Slideshow to Video Converter
Read more

Clip Map Images on Text Background

images on text with css background

I was looking at my clipping map tiles example where I clipped some imagery behind a word created with GeoJSON paths and wondered if I could just use a normal font which would clip a photo using css background URL attribute. It would be cool to see how map tiles can be rendered as CANVAS tiles, combined into a single canvas, converted into an image, and then applied in a CSS background attribute to clip imagery behind text. Instead of converting text to GeoJSON paths, I want to make an online tool that does all the magic for me with regular text, CSS, and CANVAS.
Read more