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
xxxxxxxxxx<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