D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
hugolpz
Full window
Github gist
bl.ocks.org -- D3js porfolio for dataviz' professionals: How to.
bl.ocks.org's How to
for my dear brother, a skilled D3js developer
@ProbeMeteo
.
<!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="https://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="https://d3js.org">D3js</a> creator's <a href="https://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="https://twitter.com/#D3js">#D3js</a> and <a href="https://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="https://d3js.org">D3</a>, <a href="https://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery">jQuery</a>, <a href="https://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="https://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 https://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>