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 / Thumbs.db
Last active November 18, 2015 01:49
Week 7: Transition Plot
@DimsumPanda
DimsumPanda / index.html
Last active October 12, 2015 00:56
Week 7: Dots on Lines
<!DOCTYPE html>
<!-- Modification of an example by Scott Murray from Knight D3 course -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Chart with Multiple Lines</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
@DimsumPanda
DimsumPanda / index.html
Created October 5, 2015 20:35
Week 6: My Line Plot
<!DOCTYPE html>
<!-- Modification of an example by Scott Murray from Knight D3 course -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Chart with Multiple Lines</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
@DimsumPanda
DimsumPanda / index.html
Last active November 18, 2015 00:18
Week 6: Scatter tooltips
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Maternal Mortality Rate in 2013 by Country</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
@DimsumPanda
DimsumPanda / README.md
Last active November 17, 2015 20:34
Week 5: Dot Plot

Week 5: Dot Plot

Assignment: Create a scatterplot using any of the data in the CSV file.

Selected only the data for 1990 and compare it against 2015. A lot of the challenge came from the spacing of the dots and the labels in the graph.

@DimsumPanda
DimsumPanda / index.html
Last active September 28, 2015 16:13
Week 5: Scatterplot with my Data
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Maternal Mortality Rate in 2013 by Country</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 19:11
Week 5: Bar Chart

Week 5:

Assignment: Adding labels, axis, and colors in the bar chart.

@DimsumPanda
DimsumPanda / README.md
Last active November 15, 2015 18:52
Week 5: Scatterplot

Week 5: Scatterplot

Assignment: Create a scatterplot using any of the data in the CSV file.

  • Dots for the data rows.
  • Margins set up with an object (margin.top...)
  • Scales that use the margin settings.
  • A label on the X axis, positioned with transform, translate.
  • A special case color on the one of the dots, using an if statement.
@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);
@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.