Thanaporn Thanaporn-sk

This illustrates the different layouts that the d3.pack layout produces when the circles are all of equal size.

A simple freehand drawing application, based on Bostock's Line Drawing gist.

Use your stylus, fingers or mouse to draw. The color of the line can be changed by interacting with the color palette, and the canvas can be cleared by clicking the trash in the upper-right corner of the UI.

The application uses two stacked SVG elements, one for the UI and one for the canvas. This is used to disable drawing when interacting with UI elements.

Unlike Bostock's example, this application maintains a DOM-independent object to store all the drawing's data (just look at the JavaScript console each time you complete a line).

Colors are from Colorbrewer's Dark2 palette.

Dances with Factors

bl.ocks.org link

Dances with Factors visualizes prime factorization of integers.

The fundamental theorem of arithmetic states that every integer greater than 1 is either prime itself or a product of prime numbers.

The project is created using D3.js.

This example pulls together various examples of work with trees in D3.js.

The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.

One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.

Dragging can be performed on any node other than root (flare). Dropping can be done on any node.

Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

Extract from my work, you can a demo in live Combined sunburst and line chart, currently you must generate the data by yourself, I also uploaded the skills.xlsx file to help generate this file(skillsdata.js).

Features:

[TODO]works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing

If you want to simply reuse this with your own data, here are some tips for generating the skillsdata.js file:

Particle edges from d3_glyphEdges are the most difficult edge type to implement. Here's an example using a dendrogram and the connecting paths from the dendrogram. Remember that d3_glyphEdge.mutate.particle mutates the edge data object, spawning new particles, updating the position of existing particles and deleting particles that have reached the end of the path, and it's this array that you use to represent the particles (either with SVG as in this example or, if you're dealing with a lot of particles, probably canvas). As such, an edge object needs to have, along with .source and .target, .frequency (a positive number) to indicate the number of particles created per tick and .particles (an array) to hold the created particles.

d3_glyphEdge.mutate.particle does not include its own tick function so you need to create your own. This example uses d3.timer whereas this network example uses the built-in ti

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="http://colineberhardt.github.io/d3fc/Layout.js"></script>
	<script src="http://colineberhardt.github.io/d3fc/d3fc.js"></script>
	<link href="http://colineberhardt.github.io/d3fc/d3fc.css" rel="stylesheet"/>
	<link href="style.css" rel="stylesheet"/>
	</head>
	<body>

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="D3byEX 5.10" />
	<meta charset="utf-8">
	</head>

	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="D3byEX 6.4" />
	<meta charset="utf-8">
	</head>
	<body>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script>
	var url = "https://gist.githubusercontent.com/d3byex/30231953acaa9433a46f/raw/6c7eb1c562de92bdf8d0cd99c6912048161c187e/fert_pop_exp.csv";