D3 Examples - JDR VI3 for CS725@ODU

Joel D. Rodriguez-Ortiz

3 New Things Learned

During this week's tutorials I learned how to make scatterplots.

During this week's tutorials I learned how to label and position data points.

During this week's tutorials I learned how to use scales in D3.

During this week's tutorials I learned how to create axes in D3.

During this week's tutorials I learned how to manipulate page elements using transitions in D3.

This week in general, helped me realize how D3 iterates internally over the elements it creates. This was a doubt I needed to clarify last week. It also helped me realize general D3 semantics and selection patterns. I think I'm starting to "get the flow" of D3.

Important Note

I'm having a hard time getting the bl.ocks.org preview to render the page correctly. The page renders correctly when observed outside the preview using the raw address. I think this might be related to separating the tutorials into separate JavaScript files for organization, but I haven't confirmed this.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
        .axis path,
        .axis line 
        {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
​
        .axis text 
        {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
</head>
<body style="text-align: center;">
    <div style="padding: 10px;">
        <h3>Initial Scatterplot Example</h3>
        <script type="text/javascript" src="scatterplot.js"></script>
    </div>
    <div style="padding: 10px;"> 
        <h3>Final Scatterplot Example</h3>
        <script type="text/javascript" src="scatterplot_final.js"></script>
    </div>
    <div style="padding: 10px;">
        <h3>Fun Transitions!</h3>
        <script type="text/javascript" src="transitions.js"></script>
    </div>
</body>
​
    