JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<button id="WomenOnlyButton">Women Only</button>
<button id="MenOnlyButton">Men Only</button>
<button id="AllTripsButton" disabled="true" >All</button>

<div id="chart_placeholder"></div>

<!-- Your data files can't be accessed from jsfiddle, so I'm storing 
     the data as <pre> blocks, and using text parsing functions in the
     code instead of file-accessing functions. -->
<pre id="neighborhoods">
name,latitude,longitude,color
Boystown,37.7244,-122.421,#DF151A
Bridgeport,37.7107,-122.4372,#00DA3C
Bucktown,37.8021,-122.4369,#FD8603
Chinatown,37.793,-122.416,#00DA3C
Douglas,37.8045,-122.4076,#00DA3C
East Village,37.7924,-122.4352,#FD8603
Edgewater,37.7868,-122.4538,#DF151A
Gold Coast,37.8014,-122.4182,#DF151A
Grand Boulevard,37.7144,-122.4113,#00DA3C
Grant Park,37.7423,-122.4423,#00CBE7
Greektown,37.7378,-122.4316,#F4F328
Humboldt Park,37.7584,-122.4654,#FD8603
Hyde Park,37.7225,-122.4885,#00DA3C
Kenwood,37.7239,-122.4439,#00DA3C
Lakeview,37.7373,-122.4589,#DF151A
Lincoln Park,37.73,-122.3855,#DF151A
Lincoln Square,37.7399,-122.4169,#DF151A
Little Italy/UIC,37.7624,-122.4348,#F4F328
Little Village,37.7692,-122.4463,#F4F328
Logan Square,37.7589,-122.4153,#FD8603
Loop,37.7493,-122.433,#00CBE7
Lower West Side,37.7411,-122.4892,#F4F328
Millennium Park,37.7583,-122.393,#00CBE7
Museum Campus,37.7764,-122.3994,#00CBE7
Near South Side,37.752,-122.45,#00CBE7
North Center,37.7804,-122.4332,#DF151A
Old Town,37.7802,-122.4652,#DF151A
Printers Row,37.778,-122.4928,#00CBE7
River North,37.7553,-122.4938,#00CBE7
Rush & Division,37.7841,-122.5009,#00CBE7
Sheffield/DePaul,37.7689,-122.4828,#DF151A
Streeterville,37.7941,-122.407,#00CBE7
Ukranian Village,37.7835,-122.4158,#F4F328
United Center,37.7915,-122.3988,#F4F328
Uptown,37.7178,-122.4622,#DF151A
Washington Park,37.7178,-122.4622,#00DA3C
West Loop,37.7178,-122.4622,#00CBE7
West...

CSS

@import url(http://fonts.googleapis.com/css?family=Exo+2:400, 200, 200italic);
 pre {
    display:none;
}
body {
    background: #222;
    color: #333;
    width: 100%;
    font-family:'Exo 2', sans-serif;
}
.about_text {
    float:right;
    width: 400px;
    margin-right: 25px;
}
h1 {
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1em;
    margin: 10px 0px 20px 0px;
    font-family:'Exo 2', sans-serif;
    color: #fff;
}
h1 strong {
    color: #45b8e2;
}
.by {
    font-size: 14px;
    color: #666;
    margin-left: 4px;
    letter-spacing: 0px;
    font-family:'Exo 2', sans-serif;
    font-weight: 200;
}
.by strong {
    font-weight: 400;
}
.by img {
    margin-bottom: -3px;
    margin-left: 5px;
}
h2 {
    margin-top: 28px;
    margin-left: 4px;
    font-size: 18px;
    font-family:'Exo 2', sans-serif;
    font-weight: 200;
    color: #fff;
}
p {
    margin-left: 4px;
    font-size: 14px;
    font-family:'Exo 2', sans-serif;
    font-weight: 200;
    color: #999;
}
.source {
    color: #999;
    font-size: 14px;
    font-weight: 200;
}
.more {
    font-style: italic;
    font-size: 12px;
    color: #666;
    margin-left: -5px;
}
.footer {
    bottom:10px;
    position: absolute;
    margin-top: 30px;
    line-height: 18px;
    margin-right: 10px;
}
.icons {
    width: 400px;
}
.icons .image {
    width: 96px;
    text-align: center;
    display: inline-block;
    margin-right:0px;
    font-family:'Exo 2', sans-serif;
    font-weight: 200;
    color: #999;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.icons .image img {
    width: 100%;
    margin-bottom: 10px;
}
.icons a {
    border: none;
}
.icons a:hover {
}
.icons p {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 2px;
}
.icons span {
    font-family:'Exo 2', sans-serif;
    font-size: 12px;
    font-weight: 200;
    color: #fff;
    letter-spacing: 2px;
    color: #999;
}
.icons .disclaimer {
   ...

JavaScript

/*** Define parameters and tools ***/
var width = 800,
    height = 800,
    outerRadius = Math.min(width, height) / 2 - 100,
    innerRadius = outerRadius - 18;

var dataset = "#all_trips";
//string url for the initial data set
//would usually be a file path url, here it is the id
//selector for the <pre> element storing the data

//create number formatting functions
var formatPercent = d3.format("%");
var numberWithCommas = d3.format("0,f");

//create the arc path data generator for the groups
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

//create the chord path data generator for the chords
var path = d3.svg.chord()
    .radius(innerRadius);

//define the default chord layout parameters
//within a function that returns a new layout object;
//that way, you can create multiple chord layouts
//that are the same except for the data.
function getDefaultLayout() {
    return d3.layout.chord()
    .padding(0.03)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);
}  
var last_layout; //store layout between updates
var neighborhoods; //store neighbourhood data outside data-reading function

/*** Initialize the visualization ***/
var g = d3.select("#chart_placeholder").append("svg")
        .attr("width", width)
        .attr("height", height)
    .append("g")
        .attr("id", "circle")
        .attr("transform", 
              "translate(" + width / 2 + "," + height / 2 + ")");
//the entire graphic will be drawn within this <g> element,
//so all coordinates will be relative to the center of the circle

g.append("circle")
    .attr("r", outerRadius);
//this circle is set in CSS to be transparent but to respond to mouse events
//It will ensure that the <g> responds to all mouse events within
//the area, even after chords are faded out.

/*** Read in the neighbourhoods data and update with initial data matrix ***/
//normally this would be done with file-reading functions
//d3.csv and d3.json and callbacks, 
//instead...