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