bl.ocks.org's How to for my dear brother, a skilled D3js developer @ProbeMeteo.
Last active
January 1, 2016 07:49
-
-
Save hugolpz/8114292 to your computer and use it in GitHub Desktop.
bl.ocks.org -- D3js porfolio for dataviz' professionals: How to.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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