I wrote the HTML in Word. Saved it in text format with .html after the file.
The code is below.
I don't understand it and we are lacking BOTH the Y axis and X axis. It's not scaled which is unfortunate but hey I am making progress.
Can I improve this and serve it to the net?
I would REALLY like to add the colours of the Awards as a kind of blocked bar chart.
More to do...
Here's the code:
<!doctype html>
<html>
<head>
<title>
Athena SWAN Awards in a D3 graph</title>
<script
src=http://d3js.org/d3.v3.min.js></script>
</head>
<body>
<h2> This graph shows the number of Athena SWAN
awards across the last few years </h2>
<script>
var
yrs = [2009, 2010, 2011, 2012];
var
aws = [35, 30, 39, 93];
var
width = 600;
var
height = 500;
var
canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height",
height)
.append(“g”)
.attr(“transform”,
“translate(100,0)”);
var
bars = canvas.selectAll("rect")
.data(aws)
.enter()
.append("rect"
)
.attr(“fill”,
“red”)
.attr("width",
function(d) {return (d*5);})
.attr("height",
50)
.attr("y",
function(d, i) {return i *55});
</script>
</body>
</html>
No comments:
Post a Comment