The earlier example of this brushable radial chart led to some feedback to make the filtering better. I introduced a #circularBrush.filter(array,accessor) that takes an array of data and and accessor for that data and returns to you the data that falls into the area of the brush. The functionality of this chart is no different than the other, but if you take a look at the code, it's much more efficient.
| id | carat | cut | color | clarity | depth | table | price | x | y | z | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 0.23 | Ideal | E | SI2 | 61.5 | 55 | 326 | 3.95 | 3.98 | 2.43 | |
| 2 | 0.21 | Premium | E | SI1 | 59.8 | 61 | 326 | 3.89 | 3.84 | 2.31 | |
| 3 | 0.23 | Good | E | VS1 | 56.9 | 65 | 327 | 4.05 | 4.07 | 2.31 | |
| 4 | 0.29 | Premium | I | VS2 | 62.4 | 58 | 334 | 4.2 | 4.23 | 2.63 | |
| 5 | 0.31 | Good | J | SI2 | 63.3 | 58 | 335 | 4.34 | 4.35 | 2.75 | |
| 6 | 0.24 | Very Good | J | VVS2 | 62.8 | 57 | 336 | 3.94 | 3.96 | 2.48 | |
| 7 | 0.24 | Very Good | I | VVS1 | 62.3 | 57 | 336 | 3.95 | 3.98 | 2.47 | |
| 8 | 0.26 | Very Good | H | SI1 | 61.9 | 55 | 337 | 4.07 | 4.11 | 2.53 | |
| 9 | 0.22 | Fair | E | VS2 | 65.1 | 61 | 337 | 3.87 | 3.78 | 2.49 |
Using the still not-quite-ready-for-prime-time d3.geom.concaveHull to draw concave hulls around cities of the world between 50k and 1m population.
A modification of Susie Lu's radial weather plot. This one shows periods of cloudiness, precipitation and freezing temperatures via the bars around the border. It also includes a circular brush that lets you select a band on the radial chart. The selected band is then displayed in a more traditional linear way on the bottom left.
The original readme explains what's going on with the radial chart:
In the example we're looking at historical weather data for New York provided by intellicast.com and wunderground.com. Inspired by weather-radicals.com.
This example uses scales to roll your own radial projection by mapping out the x, y, and r positions. If you are creating a line or an area you can use d3's convenience functions d3.svg.line.radial and d3.svg.area.radial but this is a m
A modification of Susie Lu's radial weather plot that shows cloudiness, rainy days and days when the temperature dipped below freezing.
Her original readme:
In the example we're looking at historical weather data for New York provided by intellicast.com and wunderground.com. Inspired by weather-radicals.com.
This example uses scales to roll your own radial projection by mapping out the x, y, and r positions. If you are creating a line or an area you can use d3's convenience functions d3.svg.line.radial and d3.svg.area.radial but this is a method you can use if you want to use different graphical elements in a circular layout.
| (function() { | |
| d3.layout.timeline = function() { | |
| var timelines = []; | |
| var dateAccessor = function (d) {return new Date(d)}; | |
| var processedTimelines = []; | |
| var startAccessor = function (d) {return d.start}; | |
| var endAccessor = function (d) {return d.end}; | |
| var size = [500,100]; | |
| var timelineExtent = [-Infinity, Infinity]; | |
| var setExtent = []; |
| (function() { | |
| d3.geom.concaveHull = function() { | |
| var calculateDistance = stdevDistance, | |
| padding = 0, | |
| delaunay; | |
| function distance(a, b) { | |
| var dx = a[0]-b[0], | |
| dy = a[1]-b[1]; |
| (function() { | |
| d3.geom.concaveHull = function() { | |
| var calculateDistance = stdevDistance, | |
| padding = 0, | |
| delaunay; | |
| function distance(a, b) { | |
| var dx = a[0]-b[0], | |
| dy = a[1]-b[1]; |
| { | |
| "label": "Art Movements", | |
| "children": [ | |
| {"label": "Renaissance", | |
| "children": [ | |
| {"label": "Italian Renaissance", | |
| "start": 1275, | |
| "end": 1602}, | |
| {"label": "Renaissance Classicism", | |
| "start": 1475, |
| 1 | 0.23 | Ideal | E | SI2 | 61.5 | 55 | 326 | 3.95 | 3.98 | 2.43 | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | 0.21 | Premium | E | SI1 | 59.8 | 61 | 326 | 3.89 | 3.84 | 2.31 | |
| 3 | 0.23 | Good | E | VS1 | 56.9 | 65 | 327 | 4.05 | 4.07 | 2.31 | |
| 4 | 0.29 | Premium | I | VS2 | 62.4 | 58 | 334 | 4.2 | 4.23 | 2.63 | |
| 5 | 0.31 | Good | J | SI2 | 63.3 | 58 | 335 | 4.34 | 4.35 | 2.75 | |
| 6 | 0.24 | Very Good | J | VVS2 | 62.8 | 57 | 336 | 3.94 | 3.96 | 2.48 | |
| 7 | 0.24 | Very Good | I | VVS1 | 62.3 | 57 | 336 | 3.95 | 3.98 | 2.47 | |
| 8 | 0.26 | Very Good | H | SI1 | 61.9 | 55 | 337 | 4.07 | 4.11 | 2.53 | |
| 9 | 0.22 | Fair | E | VS2 | 65.1 | 61 | 337 | 3.87 | 3.78 | 2.49 |