Physician Finder Demo

Using D3 and Crossfilter

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/square/crossfilter/1.2.0/crossfilter.min.js"></script>
<div class="slider">
    <div class="min">1</div>
    <div id="distance"></div>
    <div class="max">100</div>
    <div class="selected">Maximum distance: <span id="distance_display"></span></div>
</div>
<div id="summary"></div>
<div id="specialties"></div>
<div id="results"></div>

CSS

.slider {
    position: relative;
}
.slider .min, .slider .max, #distance {
    float: left;
    position: relative;
}
#distance {
    width: 90%;
}
.slider .selected {
    display: block;
}

JavaScript

var livingThings = crossfilter([
  // Fact data.
  { name: “Rusty”,  type: “human”, legs: 2 },
  { name: “Alex”,   type: “human”, legs: 2 },
  { name: “Lassie”, type: “dog”,   legs: 4 },
  { name: “Spot”,   type: “dog”,   legs: 4 },
  { name: “Polly”,  type: “bird”,  legs: 2 },
  { name: “Fiona”,  type: “plant”, legs: 0 }
]);