Skip to content

Instantly share code, notes, and snippets.

@davidfischer

davidfischer/README.md

Last active August 29, 2015 14:16
Show Gist options
  • Save davidfischer/be587003cf3f19dcf3af to your computer and use it in GitHub Desktop.
Save davidfischer/be587003cf3f19dcf3af to your computer and use it in GitHub Desktop.
Download ZIP
Meetup Growth of San Diego Python
Raw
README.md

This graph shows the growth of San Diego Python since the group was rebooted in February 2012. Growth has been very steady and regular.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>San Diego Python Meetup Growth</title>
<!-- Include D3, data driven documents -->
<script src="http://d3js.org/d3.v3.js"></script>
<link href="visualization.css" rel="stylesheet">
</head>
<body>
<div id="sdpython-meetup"></div>
<script type="text/javascript" src="sdpython-meetup.js"></script>
</body>
</html>
Raw
sdpython-meetup.csv
date members notes
2012-02-01 0 San Diego Python reboots with a presentation at Co-Merge
2012-03-01 63
2012-04-01 82
2012-05-01 95
2012-06-01 103
2012-07-01 116
2012-08-01 129
2012-09-01 147
2012-10-01 182 Intro to Python Workshop
2012-11-01 203 First Django Workshop
2012-12-01 225
2013-01-01 236 Intro to Python Workshop
2013-02-01 259 Django Day Workshop
2013-03-01 274
2013-04-01 307 Python For Data Analysis Workshop
2013-05-01 346
2013-06-01 363
2013-07-01 380
2013-08-01 401
2013-09-01 420
2013-10-01 439
2013-11-01 458 Test Driven Django Development Workshop
2013-12-01 473
2014-01-01 480
2014-02-01 510
2014-03-01 535 Saturday Study Group Kicks Off; Django TDD Workshop
2014-04-01 557
2014-05-01 578 Danny Greenfeld presents at SD Python
2014-06-01 591
2014-07-01 616
2014-08-01 651
2014-09-01 681 Intro to Python Workshop
2014-10-01 720
2014-11-01 745
2014-12-01 779
2015-01-01 803
Raw
sdpython-meetup.js
"use strict";
(function () {
// Define the margins around the plot (with enough space for axes),
// the height and width of the actual plotting area
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// Parse the date from the representation in the CSV (iso8601)
// When displaying dates, use "Month, Year"
var parseDate = d3.time.format("%Y-%m-%d").parse,
formatDate = d3.time.format('%B %Y');
// Creates a scale to translate CSV data into X,Y points on the plot
// The domain of this scale will be set after the data is fetched
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
// Create and orient the axes which will be drawn later
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
// Creates an SVG line
// The actual line is drawn later after the data is fetched
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.members); });
// Append the root <svg> element to the DOM
// All other elements (except the tooltip) will be added to this element
var svg = d3.select("#sdpython-meetup").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create a <div> element where additional tooltip data will be displayed
var tooltip = d3.select("#sdpython-meetup").append("div")
.attr("id", "sdpython-meetup-tooltip")
.style("display", "none")
.style("position", "absolute");
// Fetch the actual data via AJAX
d3.csv("datasets/sdpython-meetup.csv", function(error, data) {
// Parse the CSV data into the appropriate data types
data.forEach(function(d) {
d.date = parseDate(d.date);
d.members = parseInt(d.members);
});
// Creates a range for the X and Y data that can translate the data
// from the CSV (dates and integers) into points on the plot
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.members; }));
// Now that the range of the data (min, max) has been calculated
// The actual tick marks on the axes can be drawn
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Members");
// Draw the actual line onto the graph
svg.append("path")
.datum(data) // This is the key to data binding
.attr("class", "line")
.attr("d", line);
// Draw SVG circles onto the graph for the actual data points
// These circles allow hovering and show the tooltip when
// notes about that data point are available
svg.selectAll(".dots")
.data(data).enter()
.append("circle")
.attr("class", function (d) {
return d.notes ? "dot poi" : "dot";
})
.attr("r", 5) // Circle radius = 5
.attr("transform", function(d) {
// Place the circle on the graph based on the X, Y coords
return "translate(" + x(d.date) + "," + y(d.members) + ")";
})
.on("mouseover", function(d) {
// Show the tooltip at the current mouse position
var m = d3.mouse(d3.select("#sdpython-meetup").node());
if (d.notes) {
tooltip.style("display", null)
.style("left", m[0] + 30 + "px")
.style("top", m[1] - 20 + "px");
tooltip.html('<strong>' + formatDate(d.date) + '</strong><br />' + d.notes);
}
}).on("mouseout", function() {
// Hide the tooltip
tooltip.style("display", "none");
});
});
}());
Raw
visualization.css
/* SD Python Meetup visualization */
#sdpython-meetup .axis path,
#sdpython-meetup .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
#sdpython-meetup .x.axis path {
display: none;
}
#sdpython-meetup .line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
#sdpython-meetup .dot {
opacity: 0.5;
fill: steelblue;
}
#sdpython-meetup .dot.poi {
opacity: 1;
fill: steelblue;
}
#sdpython-meetup .dot.poi:hover {
opacity: 1;
fill: orange;
}
#sdpython-meetup-tooltip {
background-color: rgba(242, 242, 242, 0.8);
border: 1px solid #666;
padding: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment