curran

This is a simple example that uses Model.js to update a "lastName" property based on properties "firstName" and "lastName" using forms.

curran

This example shows how to make an SVG element link to an external page.

This has the expected behavior of normal links when you open it in a new window. When clicked, the link will open in the current tab. When clicked while holding the meta key ("Command" on Macs and "Control" on Windows), the link will open in a new tab.

Clicking the rectangle doesn't work correctly in the bl.ocks viewer, because it is in an iFrame (open the debugging console to see the iFrame-related error), but this technique of adding links to visual marks should work fine in your own D3 projects.

This is addressing the thread href on d3 objects in the D3 Google Group.

curran

This example is code written by Mike Bostock in 2012 as part of his tutorial Towards Reusable Charts. I put together this bl.ock so that the example code can be seen in its entirety in one page and studied. To get this working, I needed to include additional CSS for axes, taken from this log axis example.

Here are some learning resources related to this example:

• Screencast by Ian Johnson - reusable bar chart
• d3.js - Some clarification on reusable charts - Stack Overflow
• D3 Reusable Chart Function Creating Multiple Charts - Stack Overflow

curran

This example shows how to make several SVG elements link to different things by constructing URLs from data properties. Each square links to a different Wikipedia page, and the link URL is generated dynamically from the data array.

This has the expected behavior of normal links when you open it in a new window. Clicking the rectangle doesn't work correctly in the bl.ocks viewer, because it is in an iFrame (open the debugging console to see the iFrame-related error), but this technique of adding links to visual marks should work fine in your own D3 projects.

This is addressing the thread Hyperlinks - error "undefined"/ NaN in the D3 Google Group.

curran

A wave simulation using HTML5 Canvas. Click on it!

web counter

curran

This example shows one way to load data files one by one, and re-render the visualization each time more data is fetched. This data set presents temperature in San Francisco every hour, over 26 days. The data for each day is in a separate CSV file. Here is more information about this data, and here's the script that generated these files.

This just shows how to load data incrementally. For ideas on how to make this look even smoother, see this Path Transitions article by Mike Bostock.

This example was created to address this conversation on the D3 Google Group: Is it possible to smoothly load 200MB data to remote clients' browser with D3?.

The line chart visualization code is based on a previous example: Standalone Line Chart.

curran

A D3 implementation of the classic spinny loading icon.

curran

This example demonstrates use of the d3-legend library.

The color scale comes from ColorBrewer.

curran

GENERATED_FILES = \
	unemployment.tsv

.PHONY: all clean

all: $(GENERATED_FILES)

clean:
	rm -rf -- $(GENERATED_FILES)

curran

A reusable D3 scatter plot, constructed using Towards Reusable Charts and Standalone Scatter Plot as inspiration.

In the original reusable charts example, the comments state

// Convert data to standard representation greedily;
// this is needed for nondeterministic accessors.

In this adaptation, a simplifying assumption was made that no nondeterministic accessors will be given. Going one step further, an assumption was made that accessors will only want to access specific "columns" of data, meaning properties on each row object.