John C. Hart flunky

## index.html
<!DOCTYPE html>
<style> .chart rect { fill: steelblue } </style>

<html><body><p>Here are the magic numbers from Lost:</p>

<svg class="chart" width="120" height="420">
  <g transform="translate(0,380)">
    <rect width="19" height="40"></rect>
  </g>
  <g transform="translate(20,340)">

## index.html
<!DOCTYPE html>
<style> .chart rect { fill: steelblue } </style>

<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>

<svg class="chart" width="120" height="500">
    <rect id="bar-1"></rect>
    <rect id="bar-2"></rect>
    <rect id="bar-3"></rect>

## README.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                flunky
                / README.md
            
            
              Last active
              March 25, 2017 04:57
            
              
                Manual SVG Bar Chart
              
          
    This code creates a bar chart using an SVG node embedded in the HTML. The SVG node uses class "chart" which the style specification at the top refers to as ".chart" and specifies that rectangles should be filled with a steel blue color. The SVG node contains six rectangles, hard coded using "x" and "y" attributes for positioning, and "width" and "height" attributes for sizing. Note also that the SVG coordinate system has its origin in the upper-left corner, so that x values increase to the right and y values increase down from the top of the image.

  
## .block
height: 350

## .block
height: 450

## index.html
<!DOCTYPE html>
<script src="//d3js.org/d3.v3.min.js"></script>

<style>
.chart rect { fill: steelblue }
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;

## index.html
<!DOCTYPE html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style> .chart rect { fill: steelblue } </style>

<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>

<svg class="chart" width="120" height="500">
    <rect></rect>
    <rect></rect>

## index.html
<!DOCTYPE html>
<script src="http://d3js.org/d3.v3.min.js"></script>

<style> .chart rect { fill: steelblue } </style>

<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>

<svg class="chart" width="120" height="500">
</svg>

## index.html
<!DOCTYPE html>
<script src="http://d3js.org/d3.v4.min.js"></script>

<style> .chart rect { fill: steelblue } </style>

<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>

<svg class="chart"></svg>

## .block
license: gpl-3.0
	<!DOCTYPE html>
	<style> .chart rect { fill: steelblue } </style>

	<html><body><p>Here are the magic numbers from Lost:</p>

	<svg class="chart" width="120" height="420">
	<g transform="translate(0,380)">
	<rect width="19" height="40"></rect>
	</g>
	<g transform="translate(20,340)">
	<!DOCTYPE html>
	<style> .chart rect { fill: steelblue } </style>

	<html><body>
	<p>Here are the magic numbers from Lost: <span id="data"></span></p>

	<svg class="chart" width="120" height="500">
	<rect id="bar-1"></rect>
	<rect id="bar-2"></rect>
	<rect id="bar-3"></rect>
	<!DOCTYPE html>
	<script src="//d3js.org/d3.v3.min.js"></script>

	<style>
	.chart rect { fill: steelblue }
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	<!DOCTYPE html>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style> .chart rect { fill: steelblue } </style>

	<html><body>
	<p>Here are the magic numbers from Lost: <span id="data"></span></p>

	<svg class="chart" width="120" height="500">
	<rect></rect>
	<rect></rect>
	<!DOCTYPE html>
	<script src="http://d3js.org/d3.v4.min.js"></script>

	<style> .chart rect { fill: steelblue } </style>

	<html><body>
	<p>Here are the magic numbers from Lost: <span id="data"></span></p>

	<svg class="chart"></svg>