Skip to content

Instantly share code, notes, and snippets.

@hugolpz

hugolpz/1_create.png

Last active January 1, 2016 07:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hugolpz/8114292 to your computer and use it in GitHub Desktop.
Save hugolpz/8114292 to your computer and use it in GitHub Desktop.
Download ZIP
bl.ocks.org -- D3js porfolio for dataviz' professionals: How to.
Raw
README.md

bl.ocks.org's How to for my dear brother, a skilled D3js developer @ProbeMeteo.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- Introduction -->
<p><a href="http://bl.ocks.org">bl.ocks.org</a> is a simple viewer for code examples hosted on <a href="https://gist.github.com/">GitHub Gist</a>. Code up an example using Gist, and then point people here to view the example and the source code, live!</p>
<p>Created by <a href="http://d3js.org">D3js</a> creator's <a href="http://bl.ocks.org/mbostock">Mike Bostocks</a>, bl.ocks.org is now the main place for <b>D3js</b> and <b>Topojson</b> professionals to show out, porfolio, then socially share their <a href="http://twitter.com/#D3js">#D3js</a> and <a href="http://twitter.com/#topojson">#topojson</a> creations.</p>
<!-- How to -->
<p>Blocks/Gists need 3 files:</p>
<li><code>index.html</code> (compulsory): The main source code for your example, with html and D3js codes. You can add relative links to other files in your Gist; absolute links to shared files, such as <a href="http://d3js.org">D3</a>, <a href="http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery">jQuery</a>, <a href="http://leaflet.cloudmade.com/">Leaflet</a>, and <a href="//cdnjs.org">other libraries</a>.</li>
<li><code>README.md</code> helpfully comment your example. To write using <a href="http://daringfireball.net/projects/markdown/">Markdown</a>.</li>
<li><code>thumbnail.png</code> (230/120px) is a raster snap of your dataviz, for your porfolio at bl.ocks.org/yourGithubUserName.</li>
<p>gist.github.com online allow text editing only, and doesn't allow folders. The following is necessary for <code>thumbnail.png</code>:
<li>1. On gist.github.com > sign in > create a gist</li>
<img src="1_create.png" width="800px" title="Create gist on http://gist.github.com"/>
<li>2. Create <code>index.html</code>. Create <code>README.md</code>.</li>
<li>3. In terminal: <br />
<p class="terminal">
<code>cd /path/to/suitable/directory</code><br />
<code>git clone https://gist.github.com/8075193.git #clone gist from github to local</code>
</p>
<img src="2_clone.png" width="800px" title="Clone gist to your PC"/>
</li>
<li>4. Develop locally.</li>
<li>5. <code>Thumbnail.png</code> (230/120px) screenshot to add.</li>
<li>6. In terminal: <br />
<p class="terminal">
<code>git add .</code><br />
<code>git commit -m "edit:I_did_this. OR add:I_added_that." </code><br />
<code>git push #need username and github password</code>
</p>
</li>
</p>
</body>
</html>
Raw
styles.css
.terminal { width: 80%; background-color: #222; color: white; font-weight: 900; margin: 3px; padding-left: 0.5em;}
.terminal > *:before { content: "$ "; color: green; }
img { align: center; margin: 3px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment