Thursday, May 30, 2013

HOW ACCESS MYSQL SERVER FROM REMOTE SYSTEM ?

ACCESS MYSQL SERVER FROM REMOTE SYSTEM


Here I illustrates 
1. How to create a new root user
2. Enable server for remote access

1. CREATE A NEW ROOT USER AND ASSIGN PREVILEGES

Enter in to the mysql console as 'root' user and type as shown below,

mysql> CREATE USER 'userName'@'%' IDENTIFIED BY 'password';
mysql> GRANT ALL PRIVILEGES ON *.* TO 'userName'@'%'
    ->     WITH GRANT OPTION;

Yes, now you created a new root user with all previleges. For ensure this type.


mysql> show GRANTS FOR 'userName'@'%';
+------------------------------------------------------------------------------------------------------------------------------------+
| Grants for userName@%                                                                                                              |
+------------------------------------------------------------------------------------------------------------------------------------+
| GRANT ALL PRIVILEGES ON *.* TO 'userName'@'%' IDENTIFIED BY PASSWORD '*1C8B9ABB8*********************' WITH GRANT OPTION |
+------------------------------------------------------------------------------------------------------------------------------------+


2. ENABLE SERVER FOR REMOTE ACCESS

Once connected you need to edit the MySQL server configuration file my.cnf using a text editor such as vi.
  • If you are using Debian Linux file is located at /etc/mysql/my.cnf location
  • If you are using Red Hat Linux/Fedora/Centos Linux file is located at /etc/my.cnf location
  • If you are using FreeBSD you need to create a file /var/db/mysql/my.cnf
Edit /etc/my.cnf, run:
# vi /etc/my.cnf

Once file opened, locate line that read as follows

[mysqld] 
Make sure line skip-networking is commented (or remove line) and add following line
bind-address=YOUR-SERVER-IP
For example, if your MySQL server IP is 65.55.55.2 then entire block should be look like as follows:
[mysqld]
user            = mysql
pid-file        = /var/run/mysqld/mysqld.pid
socket          = /var/run/mysqld/mysqld.sock
port            = 3306
basedir         = /usr
datadir         = /var/lib/mysql
tmpdir          = /tmp
language        = /usr/share/mysql/English
bind-address    = 65.55.55.2
# skip-networking
....
..
....
Where,
  • bind-address : IP address to bind to.
  • skip-networking : Don’t listen for TCP/IP connections at all. All interaction with mysqld must be made via Unix sockets. This option is highly recommended for systems where only local requests are allowed. Since you need to allow remote connection this line should be removed from my.cnf or put it in comment state.

Save and Close the file

If you are using Debian / Ubuntu Linux, type the following command to restart the mysql server:
# /etc/init.d/mysql restart
If you are using RHEL / CentOS / Fedora / Scientific Linux, type the following command to restart the mysql server:
# /etc/init.d/mysqld restart
If you are using FreeBSD, type the following command to restart the mysql server:
# /usr/local/etc/rc.d/mysql-server stop
# /usr/local/etc/rc.d/mysql-server start

OR
# /usr/local/etc/rc.d/mysql-server restart

Grant access to remote IP address

Connect to mysql server:
$ mysql -u root -p mysql

Grant access to a new database

If you want to add a new database called foo for user bar and remote IP 202.54.10.20 then you need to type the following commands at mysql> prompt:mysql> CREATE DATABASE foo;
mysql> GRANT ALL ON foo.* TO bar@'202.54.10.20' IDENTIFIED BY 'PASSWORD';

How Do I Grant Access To An Existing Database?

Let us assume that you are always making connection from remote IP called 202.54.10.20 for database called webdb for user webadmin, To grant access to this IP address type the following command At mysql> prompt for existing database, enter:
mysql> update db set Host='202.54.10.20' where Db='webdb';
mysql> update user set Host='202.54.10.20' where user='webadmin';

Allow Access to everyone with user name and password


mysql>  CREATE USER 'public'@'%' IDENTIFIED BY 'public123';
mysql>  GRANT ALL PRIVILEGES ON *.* TO 'public'@'%'  WITH GRANT OPTION;

Logout of MySQL

Type exit command to logout mysql:mysql> exit

Open port 3306

You need to open TCP port 3306 using iptables or BSD pf firewall.

A sample iptables rule to open Linux iptables firewall

/sbin/iptables -A INPUT -i eth0 -p tcp --destination-port 3306 -j ACCEPT
OR only allow remote connection from your web server located at 10.5.1.3:
/sbin/iptables -A INPUT -i eth0 -s 10.5.1.3 -p tcp --destination-port 3306 -j ACCEPT
OR only allow remote connection from your lan subnet 192.168.1.0/24:
/sbin/iptables -A INPUT -i eth0 -s 192.168.1.0/24 -p tcp --destination-port 3306 -j ACCEPT
Finally save all rules (RHEL / CentOS specific command):
# service iptables save

A sample FreeBSD / OpenBSD pf rule ( /etc/pf.conf)

pass in on $ext_if proto tcp from any to any port 3306
OR allow only access from your web server located at 10.5.1.3:
pass in on $ext_if proto tcp from 10.5.1.3 to any port 3306  flags S/SA synproxy state

Test it

From your remote system or your desktop type the following command:
$ mysql -u webadmin –h 65.55.55.2 –p
Where,
  • -u webadmin: webadmin is MySQL username
  • -h IP or hostname: 65.55.55.2 is MySQL server IP address or hostname (FQDN)
  • -p : Prompt for password
You can also use the telnet or nc command to connect to port 3306 for testing purpose:
$ echo X | telnet -e X 65.55.55.2 3306
OR
$ nc -z -w1 65.55.55.2 3306
Sample outputs:
Connection to 65.55.55.2 3306 port [tcp/mysql] succeeded!

Tuesday, May 28, 2013

Spring MVC & Eclipse with example

Spring MVC & Eclipse 

Here we go......
StepDescription
1
Create a Dynamic webproject 'HelloApp' in Eclipse(New-> Project -> Web -> Dynamic Web Project)

If your Eclipse not have this option, install web module from  http://download.eclipse.org/webtools/updates or  http://download.eclipse.org/webtools/repository/EclipseVersion
 (Eg:  http://download.eclipse.org/webtools/repository/helios)



2Download http://ge.tt/api/1/files/9fwBGvh/0/blob?download extract the files and Drag and drop  libraries into the folder WebContent/WEB-INF/lib.
3Create a Java class HelloController under the controller package.
4Create Spring configuration files web.xml and HelloWeb-servlet.xml under theWebContent/WEB-INF folder.
5Create a sub-folder with a name jsp under the WebContent/WEB-INF folder. Create a view file hello.jsp under this sub-folder.
6The final step is to create the content of all the source and configuration files and export the application as explained below.       


Following is the content of  Spring Web configuration file HelloWeb-servlet.xml

 <beans xmlns="http://www.springframework.org/schema/beans"  
   xmlns:context="http://www.springframework.org/schema/context"  
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
   xsi:schemaLocation="  
   http://www.springframework.org/schema/beans     
   http://www.springframework.org/schema/beans/spring-beans-3.0.xsd  
   http://www.springframework.org/schema/context   
   http://www.springframework.org/schema/context/spring-context-3.0.xsd">  
   <context:component-scan base-package="controller" />  
   <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
    <property name="prefix" value="/WEB-INF/jsp/" />  
    <property name="suffix" value=".jsp" />  
   </bean>  
 </beans>  



Following is the content of another Spring Web configuration file web.xml

 <web-app id="WebApp_ID" version="2.4"  
   xmlns="http://java.sun.com/xml/ns/j2ee"   
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
   xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   
   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
   <display-name>Spring MVC Application</display-name>  
   <servlet>  
    <servlet-name>HelloWeb</servlet-name>  
    <servlet-class>  
      org.springframework.web.servlet.DispatcherServlet  
    </servlet-class>  
    <load-on-startup>1</load-on-startup>  
   </servlet>  
   <servlet-mapping>  
    <servlet-name>HelloWeb</servlet-name>  
    <url-pattern>/</url-pattern>  
   </servlet-mapping>  
 </web-app>  

Here is the content of FirstController.java file:


 package controller;  
 import org.springframework.stereotype.Controller;  
 import org.springframework.ui.Model;  
 import org.springframework.ui.ModelMap;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
 @Controller  
 @RequestMapping("/")  
 public class FirstController {  
 @RequestMapping(method = RequestMethod.GET)  
 public String home(ModelMap model){  
      model.addAttribute("message","Welcome to the world of MVC");  
      return "first";  
 }  
 }  


Here is the content of SecondController.java file:


 package controller;  
 import org.springframework.stereotype.Controller;  
 import org.springframework.ui.Model;  
 import org.springframework.ui.ModelMap;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
 @Controller  
 @RequestMapping("/second")  
 public class SecondController {  
 @RequestMapping(method = RequestMethod.GET)  
 public String home(ModelMap model){  
      model.addAttribute("data"," Ya, its works....!");  
      return "second";  
 }  
 }  



Following is the content of Spring view file first.jsp

 <%@ page contentType="text/html; charset=UTF-8" %>  
 <html>  
 <head>  
 <title>Hello World</title>  
 </head>  
 <body>  
   <h2>${message}</h2>  
 </body>  
<a href="second">Click to go to the next page</a>

 </html>  



Following is the content of Spring view file second.jsp

 <%@ page contentType="text/html; charset=UTF-8" %>  
 <html>  
 <head>  
 <title>Hello World</title>  
 </head>  
 <body>  
   <h2>${data}</h2>  
 </body>  
 </html>  


If you need to link files(like java script file,css, image, video, audio etc.) not from internet, then we must do the following steps.

1. Change the code of HelloWeb-servlet.xml as follows

 <?xml version="1.0" encoding="UTF-8"?>  
 <beans xmlns="http://www.springframework.org/schema/beans"  
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"  
  xmlns:mvc="http://www.springframework.org/schema/mvc"  
  xsi:schemaLocation="http://www.springframework.org/schema/beans  
  http://www.springframework.org/schema/beans/spring-beans-2.5.xsd  
  http://www.springframework.org/schema/mvc  
  http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd  
  http://www.springframework.org/schema/context  
  http://www.springframework.org/schema/context/spring-context-3.0.xsd">  
   <!-- not strictly necessary for this example, but still useful, see http://static.springsource.org/spring/docs/3.0.x/spring-framework-reference/html/mvc.html#mvc-ann-controller for more information -->  
  <context:component-scan base-package="controller" />  
   <!-- the mvc resources tag does the magic -->  
  <mvc:resources mapping="/resources/**" location="/resources/" />  
   <!-- also add the following beans to get rid of some exceptions -->  
  <bean   class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />  
  <bean  
 class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">  
  </bean>  
   <!-- JSTL resolver -->  
  <bean id="viewResolver"  
  class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
  <property name="viewClass"  
   value="org.springframework.web.servlet.view.JstlView" />  
  <property name="prefix" value="/WEB-INF/jsp/" />  
  <property name="suffix" value=".jsp" />  
  </bean>  
 </beans>  

2. Add a new folder 'resources' in 'WebContent'

3. Drag and drop files those you need to include in webpage. We can create sub folders also

4. Include the reference path of the resource as follows.

    If you have an image file, 'myImage.jpeg' in 'resources/images' folder.
    The link path will be, '/ProjectName/resources/images/myImage.jpeg'

So now add an image in 'WebContent/resources/images' folder and change the second.jsp file content as follows 


  <%@ page contentType="text/html; charset=UTF-8" %>   
  <html>   
  <head>   
  <title>Hello World</title>   
  </head>   
  <body>   
   <h2>${data}</h2>   
 <img src="/HelloApp/resources/images/myImage.jpeg">  
  </body>   
  </html>   




Monday, May 27, 2013

1000+ EXAMPLES FOR d3.js


  • Zoomable Icicle

  • Matrix Layout

  • External SVG

  • Line Tension

  • Superformula Tweening

  • Superformula Explorer

  • Multi-Foci Force Layout

  • Multi-Foci Force Layout

  • Hierarchical Edge Bundling

  • Collapsible Force Layout

  • Force-Directed Symbols

  • OMG Particles! (D3)

  • Venn Diagram with Opacity

  • Venn Diagram with Clipping

  • Date Ticks

  • Force-Directed States of America

  • Force-Directed Layout from XML

  • Linear Gradient

  • HTML Overlay with pageX / pageY

  • Collapsible Indented Tree

  • Collapsible Force Layout

  • Modifying a Force Layout

  • PolarClock

  • Arc Tween (Clock)

  • Chained Transitions

  • Bounded Force Layout

  • Stacked Bar Chart

  • Spermatozoa

  • Force-Directed Tree

  • Mobile Patent Suits

  • Small Multiples

  • getBBox

  • Axis Component

  • Dots

  • Array Subclassing Test

  • Transition Example

  • style.setProperty

  • Pixymaps (Dragging)

  • Pixymaps (Scrolling)

  • Force Layout from Adjacency List

  • Force Layout with Tooltips

  • Force Layout with Mouseover Labels

  • D3.js nested data

  • Merge Sort

  • Spinny Globe

  • Multi-Foci Force Layout

  • D3 Show Reel

  • DOM-to-Canvas using D3

  • Hierarchical Bar Chart

  • D3 Hello World

  • Pie Multiples

  • Pie Multiples with Nesting

  • Sunburst with Distortion

  • The Euro Debt Crisis

  • Point-Along-Path Interpolation

  • Case-Sensitivity and SVG-in-HTML

  • Poor Anti-Aliasing in SVG #1

  • Poor Anti-Aliasing in SVG #2

  • D3 and Custom Data Attributes

  • Parallel Coordinates

  • Oliver Rolle / Logarithmic Line Chart

  • SVG feGaussianBlur

  • Transform Transitions

  • Pie Chart Update I

  • Pie Chart Update II

  • Epicyclic Gearing

  • D3 PJAX

  • Circles

  • Square Circle Spiral Illusion

  • A Bar Chart

  • Left-Aligned Ticks

  • SVG foreignObject Example

  • selection.order

  • Table of Progress

  • Image tiles with float: left

  • Horizon Chart

  • Expandable Menu

  • Drag Multiples

  • Cost of Living – Parallel Coordinates

  • One Path for All Links

  • Quicksort

  • Sortable Bar Chart

  • Transition Speed Test

  • Irregular Histogram (Lollipop)

  • Variable-width Histogram

  • Circle Packing with Zero Values

  • Autofocus

  • Circle Packing Zero Values

  • Line Transition

  • Spline Transition

  • Line Transition (Broken)

  • Monday-based Calendar

  • Smooth Scrolling

  • Static Force Layout

  • Focus+Context via Brushing

  • Queue.js Demo

  • Order

  • Point-Along-Path Interpolation

  • Clustered Force Layout

  • Clustered Force Layout

  • Input Value Interpolation

  • Force Layout Multiples (Independent)

  • Multi-Foci Force Layout

  • Automatically sizing text

  • Month Axis

  • offsetX / offsetY

  • offsetX / offsetY

  • Mitchell’s Best-Candidate

  • Histogram Chart

  • Hive Plot (Links)

  • Hive Plot (Areas)

  • mousewheel-zoom + click-to-center

  • click-to-center

  • click-to-center via transform

  • click-to-zoom via transform

  • Bar Chart with Negative Values

  • d3.geo.path and d3.behavior.zoom

  • “Elbow” Dendrogram

  • Curved textPath

  • Canvas Swarm

  • SVG Swarm

  • Force-Directed Graph with Mouseover

  • SVG Path Cleaning

  • Force-directed layout with from Matrix Market format

  • Mercator Projection

  • Albers Projection

  • Albers USA Projection

  • Orthographic Projection

  • Squares ↔ Hexagons

  • W3C Validation Errors

  • Force Layout from CSV

  • Tree Layout from CSV

  • Fisheye Grid

  • Rectilinear Grid

  • Pedigree Tree

  • Orthographic Grid

  • Manual Axis Interpolation

  • Zero Ticks

  • Extent Ticks

  • Exoplanets

  • L*a*b* and HCL color spaces

  • Margin Convention

  • Stacked Area via Nest

  • Orthographic Clipping

  • UT1 – UTC

  • Orthographic Shading

  • Area with Missing Data

  • Molecule

  • Fixed-width Histogram of Durations log-normal distribution

  • Fixed-width Histogram Irwin-Hall distribution

  • Stacked Radial Area

  • Icosahedron

  • Geodesic Rainbow

  • Geodesic Grid

  • Icosahedron

  • Heatmap with Canvas

  • Shape Tweening

  • Cross-linked Mouseover

  • Twitter SVG Logo

  • Mirrored Easing

  • Animated textPath

  • Animated Clipped textPath

  • Transform Interpolation

  • Force Layout with Canvas

  • Scatterplot with Multiple Series

  • Tree Layout Orientations

  • Chrome Circle Precision Bug

  • Chrome Circle Precision Bug

  • Heatmap and 2D Histogram

  • Ordinal Tick Filtering

  • Scatterplot Matrix

  • Collision Detection

  • Collision Detection (Canvas)

  • Scatterplot with Shapes

  • Click-to-Zoom via Transform

  • Ordinal Axis

  • Heightmap

  • Rainbows are Harmful

  • Multi-Value Maps

  • Interpolating with d3.tween

  • d3.tsv

  • d3.time.scale nice

  • d3.time.format localization

  • Threshold Choropleth

  • Monotone Interpolation Bug

  • Monotone Line Interpolation

  • Line Interpolation

  • Letter Frequency

  • Force-Directed Graph

  • Pack Test

  • Pack Test

  • Resizable Force Layout

  • Axis Styling

  • Circular Segment

  • Rounded Rectangle

  • Aitoff Graticule

  • Winkel Tripel Graticule

  • SVG Semantic Zooming

  • Canvas Geometric Zooming

  • SVG Geometric Zooming

  • Canvas Semantic Zooming

  • Winkel Tripel Projection

  • Aitoff

  • Map Projection Distortions

  • Kavrayskiy VII Projection

  • Wagner VI Projection

  • Robinson Projection

  • Projection Transitions

  • Hammer

  • Sinusoidal

  • Cylindrical Equal-Area

  • Larrivée Projection

  • Sortable Table with Bars

  • Rotating Orthographic

  • Rotating Equirectangular

  • Albers Equal-Area Conic

  • Bonne Projection

  • Collignon Projection

  • Equidistant Conic Projection

  • Lambert Conformal Conic Projection

  • Eckert I Projection

  • Eckert II Projection

  • Eckert III Projection

  • Eckert IV Projection

  • Eckert V Projection

  • Eckert VI Projection

  • Goode Homolosine

  • Miller Projection

  • Mollweide

  • Nell–Hammer Projection

  • Polyconic Projection

  • Sticky Force-Directed Graph

  • Progress Events

  • Lambert Azimuthal Equal-Area

  • Azimuthal Equidistant

  • Equirectangular (Plate Carrée)

  • Orthographic

  • Spherical Mercator

  • Stereographic

  • Gnomonic

  • Interactive Stereographic

  • Guyou Projection

  • d3.geo.path + Canvas

  • Antimeridian Cutting

  • Rotating Winkel Tripel

  • Satellite Projection

  • Satellite Projection Test

  • Interactive Orthographic

  • Interactive Gnomonic

  • Adaptive Resampling

  • Van der Grinten Projection

  • August Projection

  • Eisenlohr Projection

  • Lagrange Projection

  • General Update Pattern I

  • General Update Pattern II

  • General Update Pattern III

  • van Wijk Smooth Zooming

  • Voronoi tests

  • WebPlatform.org SVG Logo

  • Walmart locations

  • Loximuthal

  • Area Chart

  • Line Chart

  • Bivariate Area Chart

  • Multi-Series Line Chart

  • Stacked Area Chart

  • Bar Chart

  • Sortable Bar Chart

  • Stacked Bar Chart

  • Normalized Stacked Bar Chart

  • Grouped Bar Chart

  • Scatterplot

  • Donut Chart

  • Pie Chart

  • Donut Multiples

  • Pan+Zoom

  • Programmatic Pan+Zoom

  • Difference Chart

  • Update-Only Transition

  • X-Value Mouseover

  • Chained Transitions

  • Path Tween

  • Stacked-to-Grouped Bars

  • Gall–Peters

  • Sankey Interpolation

  • Voronoi Test (N=2)

  • Gradient Encoding

  • Threshold Encoding

  • Zoomable Area

  • Pseudo-Demers Cartogram

  • Pseudo-Dorling Cartogram

  • Voronoi Tesselation

  • Choropleth

  • Streamgraph

  • Bullet Charts

  • Chord Diagram: Dependencies Between Classes

  • Force-Directed Graph

  • Population Pyramid

  • Color via Clipping

  • Lines with Rounded Turns

  • Bubble Chart

  • Calendar View

  • Sunburst Partition

  • Circle Packing

  • Reingold–Tilford Tree

  • Cluster Dendrogram

  • Treemap

  • Scatterplot Matrix Brushing

  • U.S. States TopoJSON

  • U.S. Counties TopoJSON Mesh

  • U.S. TopoJSON

  • U.S. Counties TopoJSON

  • d3.geo.tile

  • U.S. Land TopoJSON

  • U.S. TopoJSON

  • Custom Multi Scale Time Format Axis

  • d3.geo.tile

  • Gradient Along Stroke

  • Rainbow Worm

  • World Map

  • World Tour

  • Capturing Mousemove

  • Area Choropleth

  • Fuzzy Counties

  • Blocky Counties

  • County Circles

  • Swiss Cantons

  • Circle-Polygon Intersection

  • Voronoi Clipping

  • Contour Plot

  • Hexagonal Binning

  • Hexagonal Binning (Area)

  • Streams

  • Closest Point to Segment

  • Three-Axis Rotation

  • Peirce Quincuncial

  • Sinu-Mollweide

  • Custom Axis

  • Raster Reprojection

  • Bivariate Hexbin Map

  • Collapsible Tree

  • Reingold–Tilford Tree

  • Cluster Dendrogram

  • Hierarchical Edge Bundling

  • Delaunay Triangulation

  • Donut Transitions

  • The Amazing Pie

  • Convex Hull

  • Kernel Density Estimation

  • Symbol Map

  • Spline Editor

  • Graph Rollup

  • Quadtree

  • Icicle

  • Zoomable Sunburst

  • Q-Q Plots

  • ggplot2-Style Axis

  • Ordinal Brushing

  • Brush Handles

  • U.S. Airports

  • Gringorten Equal-Area

  • Polar Azimuthal Equal-area

  • Rotated Axis Labels

  • TopoJSON Points

  • New Zealand Earthquakes Pattern of Life

  • Blocky Counties

  • Azimuthal Equidistant

  • Interrupted Goode Homolosine

  • Waterman Butterfly

  • Gnomonic Butterfly

  • Interrupted Sinusoidal

  • Littrow

  • Hammer Retroazimuthal

  • Craig Retroazimuthal

  • Craig Retroazimuthal

  • Berghaus Star

  • Armadillo Projection

  • Wiechel

  • Quartic Authalic

  • HEALPix

  • Wagner VII

  • Craster Parabolic

  • Flat-Polar Parabolic

  • Flat-Polar Quartic

  • Flat-Polar Sinusoidal

  • Baker Dinomic

  • Hobo–Dyer

  • Tobler World-in-a-Square

  • Natural Earth

  • Hill Eucyclic

  • Maurer No. 73

  • Boggs Eumorphic

  • Interrupted Boggs Eumorphic

  • Interrupted Sinu-Mollweide

  • Wagner IV

  • Bromley

  • Laskowski Tri-Optimal

  • Van der Grinten IV

  • Eckert–Greifendorff

  • Interrupted Mollweide

  • Mollweide Hemispheres

  • Concentric Circles Emanating

  • Briesemeister

  • Atlantis

  • Two Point Equidistant

  • Two Point Equidistant

  • Draggable Network

  • Brushable Network

  • Brushable Network II

  • Draggable Network II

  • Threshold Key

  • Polar Plot

  • Solar Terminator

  • Curved Links

  • Asia Lambert Conic Conformal

  • Rotating Voronoi

  • 113th U.S. Congressional Districts

  • Streamgraph

  • Pale Dawn

  • Cellular automata

  • CSS3 Modal Button

  • Loupe

  • CSSOM/SVG Test

  • Fancy Markers

  • Hilbert Tiles

  • Sequential Tiles

  • Van Wijk and Nuij Zooming

  • Labeled points

  • Caravaggio’s Bacco (1597)

  • Resizable Markers

  • Fancy Markers (No Gradient)

  • Image Markers

  • Focusable Maps

  • Voronoi Tessellation (Redirect)

  • Voronoi Tessellation (Redirect)

  • Rainbow Colors

  • stroke-dasharray

  • Moiré Patterns

  • Non-Contiguous Cartogram

  • d3.nest

  • Circular Layout

  • Circular Layout (Arc)

  • Circular Layout (Recursive)

  • Circular Layout (Slider)

  • Wind

  • Fill-Rule Evenodd

  • Grouped Bar Chart

  • Polymaps + D3

  • Polymaps + D3 Part 2

  • Google Maps + D3

  • d3.geo.tiler

  • Build Your Own Graph!

  • Force-directed layout with images and Labels

  • Treemap

  • Force Layout from List

  • Animated tree

  • Infro.js: Nutrient Dataset

  • Hypercube Edges in Orthogonal Projection

  • Hypercube with Parallel Coordinates

  • Tooltip on a stream graph

  • Circular tree comparing the src directory for three versions of d3

  • Street Extent Visualization Using #d3js and CartoDB

  • Skillpedia: an open encyclopedia for skills

  • Percentile line chart of gene expression microarrays

  • Force-Directed Graphs: Playing around with D3.js

  • How to get a significant correlation value by moving just one point around

  • Interactive MDS visualisation

  • 2012 NFL Conference Champs

  • The Story of The US Told In 141 Maps

  • Composite Map Projection

  • Open Knowledge Festival Hashtag Graph Visualization

  • Legend

  • D3.js: Data-Driven Delight

  • Sunlight Heatmap

  • Edge labels

  • Building a UML editor in JS

  • Dagre: Directed graph rendering

  • Basic Gantt Chart

  • Dot Append video tutorials

  • Dot Enter video tutorials

  • Easy infographics with D3.js

  • Tampa Bay Rays Streamgraph

  • Stripe Gross Volume witth D3.js

  • Zoom a map to a Feature Bounding Box

  • Among the Oscar Contenders, a Host of Connections

  • Sky Open Source, Behavioral Database

  • 401k Fees Vary Widely for Similar Companies (Scatter)

  • World Bank Global Development Sprint

  • Dex Motion Chart Demo

  • Parallel Lines and Football using Dex and D3.js

  • Multi-series Line Chart with Long Format Data (columns instead of rows)

  • A sea of tweets: what are italians saying about the election

  • A Chicago Divided by Killings

  • Timeline

  • Swimlane

  • Global Surface Temperature: 500 … 2009

  • SVG Patterns

  • Dial examples

  • Area Transition

  • NFL salaries by team and position

  • Visualization of Beijing Air Pollution

  • Create any map of the world in SVG

  • Circular heat chart

  • PhD in the Bundestag

  • Map with faux-3D globe

  • Election 2012 Social Dashboard (interactive Twitter visualization)

  • Timeline of earthquake in Christchurch 2010

  • Non-contiguous cartogram of seats allocated in the canadian House of Commons

  • Drawing Chemical Structures with Force Layout

  • Icequake

  • Mobile Patent Lawsuits

  • Multiline chart with brushing and mouseover

  • Stacked-to-multiple bar charts

  • D3 graphics in a Pergola SVG UI

  • Polychart: A browser-based platform for exploring data and creating charts

  • Sparklines

  • Planarity

  • Comparison of MS trials baseline characteristics

  • Running Away Balloons – simple game

  • Simple Radar Chart

  • Real-time sentiment analysis of Obama 2012 victory speech

  • The Music of Graphs

  • Cubism.js: Time Series Visualization

  • Zoomable Pack Layout

  • Force-Directed States

  • Voronoi Diagram with Force Directed Nodes and Delaunay Links

  • Symbol Map

  • Collapsible Force Layout

  • Collision Detection

  • Sunburst

  • Current Article Popularity Trends on Hacker News

  • Four Ways to Slice Obama’s 2013 Budget Proposal

  • Wind History

  • Box plot

  • Calendar View

  • Interactive Publication History

  • Animated Bézier Curves

  • Voronoi Diagram

  • Non-contiguous Cartogram

  • The Wealth & Health of Nations

  • Coffee Flavour Wheel

  • The Facebook Offering: How It Compares

  • Facebook IPO

  • Zoomable Partition Layout

  • Zoomable Treemap

  • Vegetable Nutrition w/ Parallel Coordinates

  • Epicyclical Gears

  • Hive Plot

  • Voronoi Picking

  • Les Misérables Co-occurrence Matrix

  • Color: a color matching game

  • CubicHamiltonianGraphs

  • Hierarchical Edge Bundling

  • Slopegraphs

  • Koalas to the Max

  • Collatz Graph: All Numbers Lead to One

  • Rounded Rectangles

  • Uber Rides by Neighborhood

  • Parallel Coordinates

  • Hierarchical Bars

  • Zoomable Area Chart

  • Scatterplot Matrix

  • Fisheye Distortion

  • Parallel Sets

  • Raindrops

  • TruliaTrends

  • Particles

  • Rotating Cluster Layout

  • OpenBudget

  • TruliaTrends

  • NCAA 2012 March Madness Power Rankings

  • Azimuthal Projections

  • Labeled Force Layout

  • Life Expectancy

  • Sankey Diagram

  • Dendrogram

  • Node-Link Tree

  • Collapsible Tree Layout

  • WordCloud

  • Crossfilter.js

  • Map of all M2.5+ earthquakes of the last 24h.

  • 512 Paths to the White House

  • ForceLayoutEditor

  • Word Cloud

  • Vélib network visualization

  • Voronoi Boids: Voroboids

  • Venn Diagram using Opacity

  • Venn Diagram using Clipping

  • Mandel for Controller Bulldog Budget

  • D3 Treemap with Title Headers

  • Collapsible tree

  • Collapsible tree with labels

  • Bracket Layout

  • Viewing OpenLearn Mindmaps Using d3.js

  • Building a tree diagram

  • Reveal animation on a tree with a clip path

  • Collpase/expand nodes of a tree

  • Phylogenetic Tree of Life

  • Multiple time-series with object constancy

  • Tag Cloud

  • SPARQLy GUIs: Linked Data and Semantic Web technologies

  • Table Sorting

  • Long Scroll

  • Simple HTML data tables

  • Simple table

  • Sunburst Layout with Labels

  • Streamgraph

  • Interactive Streamgraph

  • Stacked and grouped bar chart

  • Reorderable Stacked Bar Chart

  • Canvas with d3 and Underscore

  • Most simple d3.js stack bar chart from matrix

  • From tree to cluster and radial projection

  • Smoke charts

  • Small Multiples with Details on Demand

  • Basic Reusable Slopegraph

  • Polygonal Lasso Selection

  • Simple scatterplot

  • Social trust vs ease of doing business

  • Scatterplot and Heatmap

  • Angel List compensation scatterplot

  • Shiny and R adaptation of Mike Bostock’s d3 Brushable Scatterplot

  • Heavily annotated scatterplot

  • Scatterize

  • Scatterplot for K-Means clustering visualization

  • F1 Championship Points as a d3.js Powered Sankey Diagram

  • Animated Sankey (alluvial) diagram

  • Sankey diagram with cycles

  • Sankey Diagram with Overlap

  • Eurozone crisis: more than debt

  • Pyramid charts: demographic transition in the US

  • Creating a Polar Area Diagram

  • Pie Chart Updating (Part 1)

  • Pie Chart Updating with Text

  • Reusable Pie Charts

  • Pictograms

  • Periodic table

  • Parallel Coordinates

  • Parallel coordinates with fisheye distortion

  • Understanding the D3 Parallel Plot Example

  • D3 and WordPress

  • Graphicbaseball: 2012 Batters

  • Graphicbaseball: 2012 Pitchers

  • Parallel Coordinates

  • Using d3 visualization for fraud detection and trending

  • The electoral map: building path to victory

  • The last slice of PIE

  • SCION simulation environment

  • Force-directed layout with custom Forces

  • Force-directed layout with multiple Foci

  • Force-directed layout with collapsible Hierarchy

  • Force-directed layout with from XML

  • Force-directed layout with bounded Force Layout

  • Force-directed layout with drag and drop

  • Force-directed layout with multi Foci and Convex Hulls

  • Force-directed layout with interactive Construction

  • iTunes Music Library Artist/Genre Graph

  • Introduction to Network Analysis and Representation

  • D3.js force diagram from Excel

  • D3.js force diagrams with markers straight from Excel

  • How to Make an Interactive Network Visualization

  • Visualizing my entire website as a network

  • Visualizing a network with Cypher and d3.js

  • Use the Force! Slides

  • Nodal is a fun way to view your GitHub network graph

  • D3.js force diagrams straight from Excel

  • Visualizing Facebook Friends With D3.js

  • Visualizing NetworkX graphs in the browser using D3

  • Complete Graphs

  • UMLS (Unified Medical Language System) Visualizer

  • Linked Jazz network graph

  • Annual traffic entering from station to Paris

  • Visualizing the News through Metro Maps

  • The first thing that should be shown in any Trigonometry class

  • Number of unique rectangle-free 4-colourings for an nxm grid

  • 9-Patch Quilt Generator

  • Animated Quasicrystals

  • Animated Trigonometry

  • Monte Carlo simulation of bifurcations in the logistic map

  • Bloom Filters

  • Biham-Middleton-Levine Traffic Model

  • Calkin-Wilf Tree

  • Carotid-Kundalini Fractal Explorer

  • Detecting Duplicates in O(1) Space and O(n) Time

  • Factorisation Diagrams

  • Gaussian Primes

  • Girko’s Circular Law

  • Hamming Quilt

  • Hilbert Curve

  • Hilbert Stocks

  • Leibniz Spiral

  • Antipodes

  • Random Points on a Sphere

  • Topology-Preserving Geometry Simplification

  • Quadratic Koch Island Simplification

  • Morley’s trisector theorem

  • Combinatorial Necklaces and Bracelets

  • Infinite Plasma Fractal

  • Poincaré Disc

  • El Patrón de los Números Primos

  • Proof of Pythagoras’s Theorem

  • Random Arboretum

  • From Random Polygon to Ellipse

  • Rhodonea Curve

  • Sorting Visualisations

  • Sunflower Phyllotaxis

  • Cellular automata

  • Game of life

  • Markov processes

  • Percolation model

  • The Polya process

  • Schelling’s segregation model

  • Marimekko Chart

  • A map of translations of Othello into German

  • Force Directed States of America

  • Bay Area earthquake responses by zip code

  • Mercator

  • Map from GeoJSON data with zoom/pan

  • World Boundaries TopoJSON

  • Reverse Geocoding Plug-in using an offline canvas

  • Responsive TopoJSON Sizing

  • Sunny side of the Earth, for any date and time

  • Faux-3d Shaded Globe

  • Faster pan/zoom on big TopoJSON of Iceland

  • We Love France: transition between the Hexagon and a heart

  • Drought during Month

  • Let’s Make a Map

  • Calculating quadtree bounding boxes and displaying them in leaflet

  • Lobster Catch Analyst

  • Talk at JS.geo 2013

  • Render Geographic Information in 3D With Three.js and D3.js

  • DataMaps: Interactive maps for data visualizations.

  • Trying out D3’s geographic features

  • iD: a friendly editor for OpenStreetMap

  • Maps and sound

  • Mapbox: add vector features to your map with D3

  • Interactive azimuthal projection simulating a 3D earth with stars

  • Visualizing opinons around the world (zoomable world map and interactive pie chart)

  • Geographic Clipping

  • Kind of 3D with D3

  • US History in Maps

  • Apple logo with gradient

  • Tweitgeist: Live Top Hashtags on Twitter

  • Multi-Series Line to Stacked Area Chart Transition

  • Interactive Line Graph

  • Line chart with zoom, pan, and axis rescale

  • Line Chart with tooltips

  • Unknown Pleasures

  • Global Life Expectancy

  • Force-Based Label Placement

  • Automatic floating labels using d3 force-layout

  • MathJax label

  • Partition Layout (Zoomable Icicle)

  • Reusable Interdependent Interactive Histograms

  • D3 heatmap using Backbone.js and CoffeeScript

  • Heatmap of gene expression with hierarchical clustering

  • Gauge

  • Collider – a d3.js game

  • Floor Plan Map

  • Visual Hacker News

  • Clinical trials in Multiple Sclerosis

  • Bubbles generator using a simplex noise

  • Superformula Tweening

  • Superformula Explorer

  • OMG Particles!

  • Epicyclic Gearing

  • Snowflakes with D3

  • Koalas to the Max!

  • Marmoset chimerism dotplot

  • Very limited in-progress attempt to hook d3.js up to three.js

  • Simplex Noise Dots

  • Alpha-shapes aka concave hulls

  • Analog clock

  • How to Make Choropleth Maps in D3

  • Choropleth with interactive parameters for NYC data visualization

  • Choropleth classification systems

  • Chord Diagram

  • Chord diagram: Updating data

  • Chord Layout Transitions

  • Chord diagram: Fade on Hover

  • Chord diagram with Dex

  • Selecties EK 2012

  • Co-Authors Chords

  • Football passes

  • Remittance flows

  • Chernoff faces Fisheye Geodesic grid Hive plot Horizon chart Sankey diagram

  • Chernoff faces

  • Templating ala Mustache with Chernoff faces example

  • Conway’s game of life with JS and D3.js

  • Conway’s Game of life as a scrolling background (broken link)

  • Conway’s game of life in D3.js

  • France – Data Explorer

  • Cartogram.js: Continuous Area Cartograms

  • Dorling World Map

  • Candlestick charts

  • Using SVG and canvas on the same force-directed layout

  • Romanian parliamentarian bubble chart. In Romanian

  • Social web use in 2009

  • Animated bubble charts for school data analysis

  • Creating Animated Bubble Charts in D3

  • Word Frequency Bubble Clouds

  • Animated Bubble Chart of Gates Educational Donations

  • De Maastricht au traité budgétaire : les oui et les non de 39 personnalités politiques

  • Can people localize sounds with one functional ear?

  • Bibly v2: Visualizing word distribution within the KJV bible

  • Simplex Noise Code 39 Barcode

  • Simple Reusable Bar Chart

  • A Bar Chart, Part 1

  • A Bar Chart, Part 2

  • Foreign aid, corruption and internet use

  • Bar chart code generator and online editor

  • Date Ticks

  • Axis Component

  • Axis Examples

  • Circular key scale

  • US energy consumption since 1775

  • Multiple Area charts and a brush tool

  • Multiple area charts with d3.js

  • TradeArc – Arc Diagram of Offseason NHL Trades

  • Arc Tween Clock

  • Plotly: create graphics, analyze with Python, annotate and share

  • The business of Bond

  • Get dirty with data using d3.js

  • A Race to Entitlement

  • D3 Tutorials

  • OECD Health Government Spending and Obesity Rates (nvd3)

  • Daily data return rates for seismic networks in the EarthScope USArray

  • Chart Wheel Visualization

  • Data Visualization with D3.js, slides and video

  • Dual scale line chart

  • Interactive visual breakpoint detection on SegAnnDB

  • Confidence interval in poll surveys

  • Comparing the same surveys by different polling organizations (polish)

  • Line Tension

  • Hierarchical Edge Bundling

  • Collapsible Tree (Redirect)

  • Force-directed layout with symbols

  • Linear Gradients

  • Segmented Lines and Slope Coloring

  • Segmented Lines

  • Transition End

  • Autoforking

  • Stacked layout with time axis

  • 2D Matrix Decomposition

  • Prototype Chart Template (WIP)

  • d3.create + selection.adopt

  • PJAX

  • Masking with external svg elements

  • The first commented line is your dabblet’s title

  • Cube Metrics Client (Node.js + WebSockets)

  • Cube Realtime Map

  • Drag rectangle

  • Elastic collisions

  • Flows of refugees between the world countries in 2008

  • SVG to Canvas

  • Simplifying and cleaning Shapefiles.

  • D3 Bookmarklet

  • Read File or HTTP

  • Circle-Circle Intersection

  • Loading Adobe Photoshop ASE color palette

  • Simple Dashboard Example

  • CSV Syntax Definition

  • Git-backed Node Blob Server

  • Lazy Scale Domain

  • Spiral for John Hunter

  • Clean Up for Natural Earth GeoJSON

  • Shared Data

  • Projection Contexts

  • The Gist to Clone All Gists

  • Underscore’s Equivalents in D3

  • Creating Thumbnails with GraphicsMagick

  • Custom Path and Area Generator

  • Constraint relaxation 1

  • TopoJSON Examples

  • Stitching States from Counties

  • Pair Contribution and Selection

  • Reusable text rotation

  • GeoJSON Transforms

  • Quartile plots

  • Quartile plots with outliers

  • Finite State Stream

  • Prose-only Blocks

  • Image Processing

  • Reingold–Tilford Tree (Redirect)

  • Arcs Around

  • Histogram (Redirect)

  • christophermanning’s bl.ocks

  • gka’s blocks

  • johan’s blocks

  • Bl.ocks RSS

  • Tmcw’s bl.ocks

  • ZJONSSON’s bl.ocks

  • Instant interactive visualization with d3 + ggplot2

  • Exploring d3.js with data from my runs to plot my heart rate

  • Webplatform dancing logo

  • Olympic Medal Rivalry

  • Graph diagram of gene ontology

  • Data visualization with D3.js and python

  • Javascript Idioms in D3.js

  • Creating Animations and Transitions With D3

  • Using Selections in D3 to Make Data-Driven Visualizations

  • Visual.ly Meetup Recap: Introductory D3 Workshop

  • IPython-Notebook with D3.js

  • Dataflow programming with D3 and Blockly

  • Mike Bostock portfolio

  • Towards Reusable Charts

  • Object Constancy

  • D3 Workshop Slides

  • Thinking with Joins

  • Nested Selections

  • Path and Transform Transitions

  • Using the D3.js Visualization Library with AngularJS

  • Visualizing Data with Web Standards Video

  • Chart.io: The Easiest Business Dashboard You’ll Ever Use

  • Multiple visualization from the Société Typographique de Neuchâtel

  • Try D3 Now

  • Using Inkscape with d3

  • D3, Conceptually

  • D3 Conceptually

  • Exoplanets: an interactive version of XKCD 1071

  • Collusion FireFox Addon

  • Your Tax-paid Tweets

  • CSSdeck: Repulsion example

  • D3 Examples on Heroku

  • Audio Spectrum Analyzer

  • Export to SVG/PNG/PDF server-side using Perl

  • XKCD-style plots

  • Data Story

  • D3.js Meta Tutorial

  • Introduction to D3

  • Seven years of SSLC in Karnataka

  • The Diabetes Dashboard

  • Gun ownership versus gun violence

  • Backbone-D3: Simple visualisations of Backbone collections via D3.js

  • Converting dynamic SVG to PNG with node.js, d3 and Imagemagick

  • Simple D3.js Bar Chart Webcast

  • Tributary

  • Slides and live code from the GAFFTA d3 intro workshop

  • Explore Analytics: cloud-based data analytics and visualization

  • Rotating hypercube in orthogonal projection and parallel coordinates

  • A CoffeeScript console for d3.js visualization

  • How to Make an Interactive Network Visualization

  • US Elections 2012 / Twitter

  • Colony – Visualising Javascript projects and their dependencies

  • D3.js tag on The JavaDude Weblog

  • Events in the Game of Thrones

  • Visualizing a newborn’s feeding and diaper activity

  • SHEETSEE.JS: Fill up Websites with Stuff from Google Spreasheet

  • SVG to Canvas to PNG using Canvg

  • Responsive SVG resizing without re-rendering

  • Render sever-side using Phantomjs

  • UK University Statistics

  • Giraffe : A Graphite Dashboard with a long neck

  • Bharat Bhole

  • Misc. Examples

  • Hacker News statistics using PhantomJS

  • London d3.js User Group

  • An introduction to d3.js video with synced visualisation

  • Violin: Instrumenting JavaScript

  • Public Interest Evaluation Project

  • Live coding based on Bret Victor’s Inventing on Principle talk

  • Minute: record of all of my keystrokes

  • Visualising New Zealand’s Stolen Vehicle Database Part1

  • Visualising New Zealand’s Stolen Vehicle Database Part2

  • Connections in time

  • Introduction

  • SVG Open Keynote Slides

  • Visualizing Data with Web Standards Slides

  • Three Little Circles

  • For Protovis Users

  • Realtime webserver stats

  • Meshu turns your places into beautiful objects.

  • A physics model of a physics model

  • Baby Names in England & Wales

  • Description: A little language for d3js

  • Dc.js

  • Visualizing U.S. Births and Deaths in Real-Time

  • http://nowherenearithaca.blogspot.com/2012/06/annotating-d3-example-with-docco.html

  • NVD3

  • Interactive Data Visualization for the Web

  • Bieber Fever Meter with HTML5 Web Socket d3.js and Pusher

  • D3.js playground

  • Plot.io (swallowed by Platfora)

  • D3.js,Data Visualisation in the Browser

  • Dance.js: D3 with Backbone and Data.js

  • D3.js and Excel

  • Carotid-Kundalini Fractal Explorer

  • Sankey diagrams from Excel

  • Visualising ConAir Data With Cubism.js Arduino TempoDB Sinatra

  • eCommerce API Wheel for eBay

  • Design process of The Electoral Map

  • Getting Started with D3

  • What Size Am I? Finding dresses that fit

  • Baseball 2012 Predictions based on past 6 years

  • How educated are world leaders?

  • Cube: Time Series Data Collection & Analysis

  • Fast Multidimensional Filtering for Coordinated Views

  • Twitter Activity During Hurricane Sandy

  • Stowers Group Collaboration Network

  • Enumerating vertex induced connected subgraphs

  • Quick scatterplot tutorial for d3.js

  • xCharts: a D3-based library for building custom charts and graphs

  • Browser usage plurality

  • Introduction to D3

  • More Introduction to D3

  • Coordinated visualizations for Consumer Packaged Goods

  • Shiny R and D3.js

  • Web reporting with D3js and R using RStudio Shiny

  • Visualizing San Francisco Home Price Ranges

  • Trisul Network Analytic

  • A Christmas Carol

  • Close Votes – visualizing voting similarities for the Dutch 2012 national elections

  • Web-Based Visualization Part 1: The D3.js Key Concept

  • Jim Vallandingham portfolio

  • Feltronifier

  • Old Visualizations Made New Again

  • Composition of Church Membership by State: 1890

  • Jobs by state

  • License Usage Dashboard

  • We’re In The Money: How Much Do The Movies We Love Make?

  • Proportion of Foreign Born in Large Cities: 1900

  • Visualizing The Racial Divide

  • Use the Force! Video

  • First steps in data visualisation using d3.js

  • Realtime Visualizations w/ D3 and Backbone

  • U.S. Population Pyramid

  • D3: Data-Driven Documents

  • Major League Baseball Home Runs 1995-2010

  • Visual.ly tagged D3.js

  • Inequality in America

  • Visualizing Swiss politicians on Twitter using D3.js

  • Introduction to D3.js

  • VVVV viewer

  • Intro to d3

  • d34raphael

  • Fuzzy Link-Bot

  • Visualising a real-time DataSift feed with Node and D3.js

  • GSA-Leased Opportunity Dashboard

  • Building Cubic Hamiltonian Graphs from LCF Notation

  • Chicago Lobbyists

  • Chicago Ward Remap Outlines

  • List of all the Gists from Mike Bostock

  • D3.js crash course

  • D3.js Tips and Tricks

  • Using Plunker for development and hosting your D3.js creations

  • Learn how to make Data Visualizations with D3.js

  • SVG Group Element and D3.js

  • What Do You Work For?

  • Visualizing document similarity over time

  • Forecast of Mexican 2012 presidential election

  • d3 O’Clock: Building a Virtual Analog Clock with d3.js, Part I

  • A Visit From The Goon Squad – Interactive Character Map

  • Twitter Influencer Visualization

  • Is Barack Obama the President? (Balloon charts)

  • Jan Willem Tulp portfolio

  • American Forces in Afghanistan and Iraq

  • Apollonian Gasket

  • Bubbles

  • Crayola Colour Chronology

  • Latest Earthquakes

  • Linear Programming

  • Set Partitions

  • Tübingen

  • Wave

  • Manipulating data like a boss with d3

  • Jérôme Cukier portfolio

  • Places in the Game of Thrones

  • Gun homicides in America 2010

  • La Nuit Blanche

  • Various visualisations especially with d3.geo

  • Last Chart! – See the Music

  • Bay Area d3 User Group

  • Boston d3.js User Group

  • NYC D3.js

  • Who Voted for Rick Santorum and Mitt Romney

  • All the Medalists: Men’s 100-Meter Freestyle

  • Drought and Deluge in the Lower 48

  • Drought Extends Crops Wither

  • At the Democratic Convention the Words Being Used

  • At the National Conventions the Words They Used

  • How the Chicago Public School District Compares

  • Over the Decades How States Have Shifted

  • How Obama Won Re-election

  • Home energy consumption

  • D3 for Mere Mortals

  • Reports for Simple

  • Introduction to d3.js and data-driven visualizations

  • Students’s seating habits

  • University of Washington Departments

  • Relations of football players participating in Euro 2012

  • D3.js experiments in the console

  • D3.js and a little bit of ClosureScript

  • Data Visualization Using D3.js

  • Creating Basic Charts using d3.js

  • AFL Brownlow Medalists

  • David Foster Wallace’s ‘Infinite Jest’

  • When is Easter?

  • Formula 1 Lap Chart

  • Summer Olympics Home Ground Advantage

  • London Olympics Perceptions – Donuts to Chord Diagram Transition

  • UN Global Pulse 2010 Visualization

  • Urban Water Explorer

  • World Wide Women’s Rights

  • Beautiful visualizations with D3.js

  • D3.js Presentation

  • Data Visualization at MinnPost

  • Splay Tree animation with Dart D3.js and local storage

  • Bitdeli: Custom analytics with Python and GitHub

  • Startup Salary & Equity Compensation

  • VIM keymap

  • A sprintf-like function using d3,js

  • Time Series

  • Plotsk: A python/coffeescript/d3.js-based library for plotting data in a web browser

  • Adventures in D3

  • Job Flow

  • ggplot2 + d3 = r2d3

  • Pushing D3.js commands to the browser from iPython

  • Integrating D3 with a CouchDB database 1

  • Integrating D3 with a CouchDB database 2

  • Integrating D3 with a CouchDB database 3

  • Integrating D3 with a CouchDB database 4

  • d3 rendered with RaphaelJS for IE Compatibility

  • Plotting library for python based on D3.js

  • Miscellaneous utilities for D3.js

  • D3.js Sublime2 snippets

  • Rickshaw: JavaScript toolkit for creating interactive real-time graphs

  • Dynamic Visualization LEGO

  • Republic of Ireland – Data Explorer

  • GOV.UK’s web traffic

  • Infro.js: Filtering Tabular Data

  • Presentation on Visualizing Data in D3.js and mapping tools at NetTuesday

  • D3.js and MongoDB