D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
molliemarie
Full window
Github gist
Scatter1_HTML_ClassWork
Built with
blockbuilder.org
forked from
molliemarie
's block:
Scatter1_HTML_Starter
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>First Scatter Plot Using HTML!</title> <style> /* 5) Set `circle` elements to have a "fill" of "purple" or whatever color you choose */ circle { fill: purple; } svg { border: 1px solid #f0f; } </style> </head> <body> <!-- 1) Make a container `<div>` in which you'll render your content --> <div> <p>My HTML Scatter</p> <svg width=300 height=400> <circle cx=100 cy=100 r=10></circle> <circle cx=150 cy=150 r=15></circle> <circle cx=200 cy=200 r=20></circle> </svg> </div> <!-- 2) Create a `<p>` element in which you write "My HTML Scatter" --> <!-- 3) Make a container `<svg>` element in which you'll place your circles --> <!-- Set your svg's `width` to 300, and `height` to `400` --> <!-- 4) Put 3 `<circle>` inside of your `<svg>`, setting the properties for each one: --> <!-- - `cx`: How far to move the circle in the `x` direction (right). Should be 100, 150, and 200. - `cy`: How for to move the circle in the `y` direction (down from the top). Should be 100, 150, and 200. - 'r': circle's radius. Should be 10, 15, and 20. --> </body> </html>