Nav + main

Ok here's the deal... use it. Just use it. If you make some really cool changes then you have to let me know. This is the liscence for using this code: if you use it to do something cool you have to let me know so I can see it and learn more and give you your high five.

Otherwise enjoy!

BTW this still isn't getting at what I really want which is have several SVG elements and then positioning using d3. I'm sure one day I'll learn how to do that.

Cheers!

Jean Claude VanBantam

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from mscbuck's block: fresh block

<!DOCTYPE html>
<html lang="en">
<html>
  <head>
    <meta charset="utf-8">
    <title>Something a bit more visually appealing</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css"></style>
  </head>
  <body>
    <div id="nav"></div>
    <div id="main"></div>
    <script type="text/javascript">
      var nav = d3.select("#nav") // select the 'body' element
      .append("svg")           // append an SVG element to the body
      .attr("width", 950)      
      .attr("height", 500);
      var main = d3.select("#main") // select the 'body' element
      .append("svg")           // append an SVG element to the body
      .attr("width", 950)      
      .attr("height", 500);

// draw main rectangle
      nav.append("rect")        // attach a rectangle
      .attr("x", 0)         // position the left of the rectangle
      .attr("y", 0)          // position the top of the rectangle
      .attr("height", 500)    // set the height
      .attr("width", 950)    // set the width
      .style("stroke-width", 5)    // set the stroke width
      .style("stroke", "#001400")    // set the line colour
      .style("fill", "#80B280");    // set the fill colour

// draw the two halves
      nav.append("rect")        // attach a rectangle
      .attr("x", 0)         // position the left of the rectangle
      .attr("y", 0)          // position the top of the rectangle
      .attr("height", 500)    // set the height
      .attr("width", 200)    // set the width
      .style("stroke-width", 5)    // set the stroke width
      .style("stroke", "#001400")    // set the line colour
      .style("fill", "white");    // set the fill colour

// draw a circle - center circle
      nav.append("circle")          // attach a circle
      .attr("cx", 475)             // position the x-centre
      .attr("cy", 250)             // position the y-centre
      .attr("r", 60)               // set the radius
      .style("stroke-width", 5)    // set the stroke width
      .style("stroke", "#001400")      // set the line colour
      .style("fill", "none");      // set the fill colour

/*// this is drawing paint 1
      nav.append("rect")        // attach a rectangle
      .attr("x", 0)         // position the left of the rectangle
      .attr("y", 170)          // position the top of the rectangle
      .attr("height", 160)    // set the height
      .attr("width", 190)    // set the width
      .style("stroke-width", 5)    // set the stroke width
      .style("stroke", "#001400")    // set the line colour
      .style("fill", "#80B280");    // set the fill colour */

// drawing paint 2
     	nav.append("rect")        // attach a rectangle
      .attr("x", 760)         // position the left of the rectangle
      .attr("y", 170)          // position the top of the rectangle
      .attr("height", 160)    // set the height
      .attr("width", 190)    // set the width
      .style("stroke-width", 5)    // set the stroke width
      .style("stroke", "#001400")    // set the line colour
      .style("fill", "#80B280");    // set the fill colour

</script>
  </body>
</html>

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

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