Skip to content

Instantly share code, notes, and snippets.

View DimsumPanda's full-sized avatar

DimsumPanda DimsumPanda

3 followers · 0 following
View GitHub Profile
@DimsumPanda
DimsumPanda / maternalMortalityRate.csv
Created August 31, 2015 04:08
Week 1: CSV data
Country 2013 2010 2005 2000 1995 1990 Change in Mortality Rate (1990-2013)
Afghanistan 400 500 730 1100 1200 1200 -0.666666667
Albania 21 21 24 28 29 31 -0.322580645
Algeria 89 92 100 120 140 160 -0.44375
Angola 460 530 750 1100 1400 1400 -0.671428571
Argentina 69 76 70 63 60 71 -0.028169014
Armenia 29 31 37 43 51 47 -0.382978723
Australia 6 5 6 9 8 7 -0.142857143
Austria 4 3 5 5 7 10 -0.6
Azerbaijan 26 27 36 57 83 60 -0.566666667
@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 12:30
Week 1: Style article

Week 1: Style Article

Basic CSS practice to style the HTML page with headlines, byline, body text, and images in an external style sheet.

@DimsumPanda
DimsumPanda / index.html
Last active September 7, 2015 23:48
Week2: High Charts
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Highcharts Extract Example</title>
<!-- Code example for class extracted from http://datatools.urban.org/Features/wealth-inequality-charts/ with code from Tim Meko and Ben Chartoff -->
<style>
body {
@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 13:45
Week 2: Paragraph Data load

Week 2: Paragraph Data load

Read in data for the Maternal Mortality Rates in the World with d3.js. Logs the data in the console. This gist was not done in the real D3 'way.' This uses a JS loop that will add p elements for each item in the data set manually instead of using enter().

Logging Data with D3

d3.csv("maternalMortalityRate.csv", function (mydata) {

	//Everything involving the dataset should go here.
@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 14:13
Week 3: Cleaned data file

Week 3: Cleaned data file

Assigment:

  • fix any column names you think should/could be improved in the csv (and give it a new name)
  • load your data in d3 using d3.csv, and in the function in d3.csv:
  • add a property to the data set in javascript that is the sum of the years' values for each
  • add a property to the data set in javascript that is the difference between 2010 and 2013
  • sort the data by the new value that is the sum of the refugees
  • draw your

    's for each row of the fixed data set, using the sort order for sum of refugees (largest at the top)

@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 14:19
Week 3: My Data the D3 Way

Week 3: My Data the D3 Way

Read in the maternal mortality rates data with D3 and sorted by the change in rates from 1990-2013.

@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 14:46
Week 3: Basic D3 Table

Week 3: Basic D3 Table

Binded data by following Scott Murray's chapter on binding data

Used vLookup and an external table with country and regions to match country by regions. Sorted the table by region. Styled the table to match the UNICEF brandtoolkit colors.

Sorted the data by region:

myData.sort(function(a, b){
	return d3.ascending(a.region, b.region);
@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 15:03
Week4: Heatmap table

Week 4: Heatmap Table

A table of Maternal Mortality Rates sorted by Region. The differences between 1990 and 2013 is highlighted with a color scale. The lighter the color, the larger the decrease in the mortality rate in the particular country.

This week we focused on the concept of scales in D3.

The color scale that I used:

        var colorScale = d3.scale.linear()
 .domain(d3.extent(allDifferences))
@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 15:30
Week 4: SVG fixes

Week 4: SVG fixes

We were given a file with random SVGs. Assignment:

  • Using d3 to select all the ellipses, re-style all the ellipses so their fill is blue.
  • Using d3 to select all the rectangles, re-style them so their stroke width is 2px instead.
  • Use d3 to style all the rectangles so they are pink.
  • Then use d3 to style the first rectangle so it is blue.
  • Use d3 to select the rectangle with id svg_2 and make the color of the stroke orange.
  • Use a CSS style to set the background color of the SVG to a light gray.
@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 15:47
Week 4: Bar Chart

Week 4: Bar Chart

Reading the data in with D3 and appending rectangles to the SVG to create a basic bar chart. This is my first bar chart.

Create a SVG:

var svg = d3.select("body")
						.append("svg")
						.attr("width", width)
 .attr("height", height);