D3 Workshop

Course Site
Lessons
Youtube Webcast
Data Intensive Biology Training Program
Data File
create Javascript objects w/ brackets { }
cast an object as a number use a plus (+) before an object

D3

To select by *** use '#'
'g' - Group - D3 element

Create Scales + Axes

Create scale: d3.scale
Create axis: d3.svg.axis()

Graphing data

Bind data to DOM-elements via data function:
- .data()

Sliders

Add slider element to HTML

index.html
- <input>...

Modify year variable in MAIN.JS
Create update function

enter
exit

(Optional) Add transitions

Built with blockbuilder.org

forked from anonymous's block: D3 Workshop

xxxxxxxxxx
 
<!DOCTYPE html>
<html> 
    <head> 
        <!--meta-data (like page title, inclusion of other files) -->
      <link rel='stylesheet' type='text/css' href='style.css'></link>
    
    </head> 
  
    <body> 
      <h1>Introduction</h1>
     
          <svg>
        <circle class="prettycircle"; cx="75"; cy="75"; r="60">
        </circle>
        
        <rect class="darkblue"; x="100"; y="100"></rect>
      </svg>
      
      <div id="chart_area"></div>
      <input type="range" name="range" class="slider" id="year_slider" value="1979" min="1950" max="2008" step="1" ><br>
​
      
      <script src="https://d3js.org/d3.v3.min.js"></script>
      <script src="main.js"></script>
​
    </body> 
  
</html> 
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js