D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
grybnicky
Full window
Github gist
Biosymposium Pamphlet
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) d3.csv("Biosymposium Test Data.csv", function(error, data) { if (error) throw error; var entry = svg.selectAll('.entry') .data(data) .enter() entry.append('g').attr("transform", function(d, i) { return "translate(150," + (100 + (i*225)) + ")"; }) .append("text") .html(function (d){return d.Author}) .attr("x", 120) .style("font-size", 36) .style("font-family", "monospace") entry.append('g').attr("transform", function(d, i) { return "translate(0," + (150 + (i*225)) + ")"; }) .append("text") .html(function (d){return d.Title}) .attr("x", 120) .style("font-size", 36) .style("font-family", "monospace") entry.append('g').attr("transform", function(d, i) { return "translate(0," + (65 + (i*225)) + ")"; }) .append("rect") .attr("x", 120) .attr("width", 140) .attr("height", 50) .attr("fill", "none") .attr("stroke", "black") entry.append('g').attr("transform", function(d, i) { return "translate(100," + (100 + (i*225)) + ")"; }) .append("text") .html(function (d){return d.Presentation}) .attr("x", 120) .style("font-size", 36) .style("font-family", "monospace") .attr("color", "green") entry.append('g').attr("transform", function(d, i) { return "translate(0," + (150 + (i*225)) + ")"; }) .append("text") .html(function (d){return d.Title + "<br>" + d.Author}) .attr("x", 120) .style("font-size", 36) .style("font-family", "monospace") }); </script> </body>
https://d3js.org/d3.v4.min.js