Skip to content

Instantly share code, notes, and snippets.

View chrisbrich's full-sized avatar

Chris B Rich chrisbrich

View GitHub Profile
@chrisbrich
chrisbrich / README.md
Last active August 25, 2017 06:03
@chrisbrich
chrisbrich / README.md
Created November 4, 2013 04:18
Reuseable Line chart

Reuseable line chart. Basic.

@chrisbrich
chrisbrich / README.md
Last active December 27, 2015 08:39
Reuseable bar chart

Just a basic bar chart using the reusable chart format. Should think about making this useable with d3 histogram.

@chrisbrich
chrisbrich / data.json
Last active December 14, 2015 06:48 — forked from anonymous/data.json
[{"x":26,"y":93.4,"s":0.3999999761581421},{"x":84,"y":64.4,"s":0.7483314871788025},{"x":53,"y":80.6,"s":0.5099019408226013},{"x":12,"y":91.4,"s":0.5099019408226013},{"x":79,"y":4.0,"s":0.4472135901451111},{"x":83,"y":87.4,"s":0.7483314871788025},{"x":91,"y":23.0,"s":0.8944271802902222},{"x":98,"y":45.6,"s":0.8124037981033325},{"x":48,"y":27.8,"s":0.5830951929092407},{"x":60,"y":51.8,"s":0.4898979663848877},{"x":25,"y":92.8,"s":0.4898979663848877},{"x":74,"y":73.6,"s":0.8124037981033325},{"x":76,"y":57.8,"s":0.37416574358940125},{"x":33,"y":40.0,"s":0.8366600275039673},{"x":4,"y":51.6,"s":0.3999999761581421},{"x":80,"y":49.0,"s":0.8366600275039673},{"x":88,"y":4.8,"s":0.6633249521255493},{"x":32,"y":17.4,"s":0.6000000238418579},{"x":89,"y":72.4,"s":0.8124037981033325},{"x":85,"y":13.0,"s":0.4472135901451111},{"x":5,"y":12.6,"s":0.6000000238418579},{"x":86,"y":77.6,"s":0.3999999761581421},{"x":39,"y":47.6,"s":0.6782329678535461},{"x":31,"y":83.0,"s":0.547722578048706},{"x":63,"y":81.8,"s":0.7348468899726868},{"
@chrisbrich
chrisbrich / README.md
Created December 11, 2012 03:56 — forked from syntagmatic/README.md
Null Values/Two Ways - Parallel Coordinates

Null values indicated by space character.

In this situation where we have reorderable axis, polylines with null values can be made to disappear for certain axes orderings. For example, the axes ordering c,a,e,b,f,d will make the polyline for the last element in sparse-data.csv not visible.

Alternately, rather than not drawing the null segements, one can draw then leading to a point outside the bounds of the axes. Lines can't disappear.

Check or uncheck the input box and wiggle the axes to see the two ways of representing nulls.

@chrisbrich
chrisbrich / index.html
Created December 7, 2012 03:20
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>my example</title>
<style>
.lakers {
fill: purple;
@chrisbrich
chrisbrich / colorbar.css
Created December 4, 2012 23:31
Weird remove bug
body {
font: 12px sans-serif;
}
.colorbar .axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
@chrisbrich
chrisbrich / colorbar.css
Created December 4, 2012 22:55
Reuseable component - Color Bar
body {
font: 12px sans-serif;
}
.colorbar .axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
@chrisbrich
chrisbrich / README.md
Created November 30, 2012 04:52 — forked from syntagmatic/README.md
Canvas Parallel Coordinates - 7637 Rows - Oridinal/Quantitative dimensions

An example of an SVG interaction layer over a canvas rendering layer. This example has 7637 data points from the USDA Nutrition Dataset. Uses requestAnimationFrame to prevent path rendering from locking up the UI. '''NEW''' support for ordinal dimensions!

Interactions done with the brush component

Based on d3.js Parallel Coordinates

Changes:

  1. Map over each dimension. Assign quantitative scales to all dimensions where every value is a number or null. NOTE!: +"" = 0 AND parseFloat("") !== "". When setting the domain of a quantitative scale. Make sure to coerce "" or nulls to an appropriate value.
@chrisbrich
chrisbrich / index.html
Created November 30, 2012 03:24
Ordinal scale w/ brushing
<!DOCTYPE html>
<html>
<head>
<title>Ordinal scale w/ brushing</title>
<script src="http://d3js.org/d3.v2.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript">
var alphabet = "abcdefghijklmnopqrstuvwxyz",