Emma Saunders emmasaunders

## readme.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                emmasaunders
                / readme.md
            
            
              Last active
              May 12, 2016 10:23
            
              
                Making a d3 block 
              
          
    ##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

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.)
Go to your personal page eg https://gist.github.com/emmasaunders. Click New gist. Type in gist description.
Type in index.html and copy and paste the contents of the page you are trying to re-create (which is p


## d3Functions.json

{
 "name": "d3",
 "children": [
  {
   "name": "svg",
   "children": [
		{"name":"axis"},
		{ "name":"line", "children": [{"name":"radial"}]},
		{ "name":"area", "children": [{"name":"radial"}] },

## 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;

## 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]);

## 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>


## 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"}]},

## 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;

## 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;

## 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 {

## d3Functions.json

{
 "name": "d3",
 "children": [
  {
   "name": "svg",
   "children": [
		{"name":"axis"},
		{ "name":"line", "children": [{"name":"radial"}]},
		{ "name":"area", "children": [{"name":"radial"}] },

	{
	"name": "d3",
	"children": [
	{
	"name": "svg",
	"children": [
	{"name":"axis"},
	{ "name":"line", "children": [{"name":"radial"}]},
	{ "name":"area", "children": [{"name":"radial"}] },
	<!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;
	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]);
	<!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>

	{
	"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"}]},