Skip to content

Instantly share code, notes, and snippets.

Viz Data Ltd emmasaunders

Block or report user

Report or block emmasaunders

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@emmasaunders
emmasaunders / index.html
Last active Aug 6, 2016
Spiral calendar (v3)
View index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Calendar spiral in d3.js</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style>
body {
font-family: 'Helvetica', sans-serif;
margin: 0px;
@emmasaunders
emmasaunders / flow.json
Last active Aug 6, 2016
Tree diagram (v3)
View flow.json
{
"name": "Oil, gas, coal",
"children": [
{
"name": "Ethylene",
"children": [
{"name":"LDPE", "children": [{ "name":"Food packaging, film, rubbish bags, nappies, toys, housewares","class":"last"}]},
{"name":"LLDPE", "children": [{ "name":"Food packaging, film, rubbish bags, nappies, toys, housewares", "class":"last"}]},
{"name":"HDPE", "children": [{ "name":"Drums, crates, housewares, bottles, food containers", "class":"last"}]},
@emmasaunders
emmasaunders / readme.md
Last active May 12, 2016
Making a d3 block
View readme.md

##Explanation Anyone can share their d3 creations on bl.ocks.org. This page explains how to do it. These instructions are mainly for people who want to display thumbnail images on their block (which is the hard part of creating a d3 block). The instructions are going to be most accurate for those using a mac, who have used terminal before (and downloaded various libraries) but who are generally unfamiliar with the terminal app and git commands. Hope it helps!

##Instructions

  1. Create an account, if required, at https://gist.github.com/. If graphic width is set in absolute terms to be greater than 960 x 500px, you might need to make it smaller. (100% width and 100% height that end up being larger than these dimensions is fine.)
  2. Go to your personal page eg https://gist.github.com/emmasaunders. Click New gist. Type in gist description.
  3. Type in index.html and copy and paste the contents of the page you are trying to re-create (which is p
@emmasaunders
emmasaunders / index.html
Last active Aug 6, 2016
d3 interpolate (v3)
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Interpolation methods in d3.js</title>
<script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
View axis.js
var chartWidth = 300;
var chartHeight = 50;
var stringDates = ['1/1/2003', '2/1/2003', '3/1/2003', '4/1/2003', '5/1/2003', '6/1/2003'];
var parseDate = d3.time.format("%m/%d/%Y").parse;
var a = d3.scale.ordinal().domain(['Apples','Oranges','Pears','Plums']).rangePoints([0,chartWidth]);
var b = d3.scale.ordinal().domain([1, 2, 3, 4]).rangePoints([0, chartWidth]);
var c = d3.scale.ordinal().domain([1, 2, 3, 4]).rangePoints([0, chartWidth], 1);
var d = d3.scale.ordinal().domain([1, 2, 3, 4]).rangeRoundBands([0, chartWidth]);
@emmasaunders
emmasaunders / index.html
Last active Aug 6, 2016
d3 svg text alignment (v3)
View index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>SVG text alignment using d3.js</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style>
html, body {
margin: 0;
View d3Functions.json
{
"name": "d3",
"children": [
{
"name": "svg",
"children": [
{"name":"axis"},
{ "name":"line", "children": [{"name":"radial"}]},
{ "name":"area", "children": [{"name":"radial"}] },
@emmasaunders
emmasaunders / index.html
Last active Oct 19, 2016
d3 color scales & colorbrewer (v3)
View index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>D3 and colorbrewer color ranges in d3.js</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://colorbrewer2.org/export/colorbrewer.js"></script>
<style>
html, body {
@emmasaunders
emmasaunders / index.html
Last active Oct 19, 2016
Line chart from csv (v3)
View index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Line chart from CSV using d3.js</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style>
html, body {
margin: 0;
@emmasaunders
emmasaunders / index.html
Last active Oct 20, 2016
Line chart from csv (v4)
View index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Line chart from CSV using d3.js</title>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style>
html, body {
margin: 0;
You can’t perform that action at this time.