Skip to content

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<meta charset="utf-8">
<link href='style.css' rel='stylesheet' type='text/css'>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<!-- visualization source -->
<script src="index_works_adding_color.js"></script>
@emilyinamillion
emilyinamillion / .block
Last active October 25, 2019 09:07
fresh block
license: gpl-3.0
@emilyinamillion
emilyinamillion / README.md
Created June 24, 2016 21:18
Day / Hour Heatmap

Inspired by Trulia Trends - but with code and using SVG.

Example data shows concurrent user sessions over time, taken from a development environment.

forked from tjdecke's block: Day / Hour Heatmap

@emilyinamillion
emilyinamillion / .block
Last active June 25, 2016 00:20
Focus+Context via Brushing
license: gpl-3.0
license: gpl-3.0
@emilyinamillion
emilyinamillion / README.md
Last active June 22, 2016 21:37
Multi-line graph 4: Toggle

This is a derivative of the simple d3.js graph used as an example in the book D3 Tips and Tricks. The stock data was sourced from Mike Bostock's small multiples example.

It is the fourth graph in a series that is building a multi-line graph that incorperates an automatically developed legend and a system that can toggle the lines off and on as desired.

This version is demonstrating the ability to toggle the lines off and on by clicking on the appropriate legend text.

The graph should be taken in context with the text of the book which can be downloaded for free from Leanpub.

forked from d3noob's block: Multi-line graph 4: Toggle

@emilyinamillion
emilyinamillion / .block
Created June 22, 2016 20:28
D3 Show Reel
license: gpl-3.0
@emilyinamillion
emilyinamillion / .block
Last active June 22, 2016 19:53
Area Chart
license: gpl-3.0
@emilyinamillion
emilyinamillion / README.md
Created June 21, 2016 23:36
Local Variables

It’s often desirable when using D3 to define local behavior, that is, behavior that is specific to an individual element, rather than the same for all elements in a selection. The simplest example of this is passing a function to selection.attr to compute an attribute value for each element.

But what happens if your local behavior is more complicated? What if you want multiple operations (multiple attributes, or elements) to have local behavior, but still share local state between them? For instance, when rendering small multiples of time-series data, you might want the same x-scale for all charts but distinct y-scales to compare the relative (not absolute) performance of each metric.

There are several ways to do this in D3:

  1. Make the y-scale global, but set the domain on the y-scale before use. (Example.)

  2. Use selection.each to create a local con

@emilyinamillion
emilyinamillion / .block
Last active June 22, 2016 05:41
Line Chart
license: gpl-3.0
@emilyinamillion
emilyinamillion / README.md
Created June 12, 2016 00:45
Isometric "treemap"

A treemap algorithm is used to area-encode an array of random values, while an isometric projection is used to length-encode a second random value. Occlusion is extremely limited by the ordering of the treemap algorithm, making the diagram fairly readable (compare with a bar chart example that does not exhibit this property). This is possible because parallelepipedons are drawn by following the same ordering used by the treemap (to be honest, we tried and succedeed in using this method, but we are not aware of the internals of the treemap ordering algorithm that makes this possible).

An interaction tecnique is also put into place to let users focus on specific parallelepipedons by making the other ones translucent. This can be used to better evaluate their height. Because there are no fully occluded parallelepipedons, there is always a way to select a specific one.

Implementation note: we formerly used z as the name for the z axis, but this conflicted with