block by hugolpz 8114292

bl.ocks.org -- D3js porfolio for dataviz' professionals: How to.

Full Screen

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

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="//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="//d3js.org">D3js</a> creator's <a href="//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="//twitter.com/#D3js">#D3js</a> and <a href="//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="//d3js.org">D3</a>, <a href="//docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery">jQuery</a>, <a href="//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="//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 //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>

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