First iteration of a tool to create print and online graphics from data entered into a html form.
Type in your own numbers and then click on 'create chart'.
The graphics are created by d3.js http://d3js.org/
Inspired by d3.js barchart generator http://www.d3-generator.com/ And the Quartz workflow http://www.niemanlab.org/2013/05/how-does-quartz-create-visualizations-so-quickly-on-breaking-news/
| body { | |
| color: #000000; | |
| font-family: Verdana,arial,Helvetica,sans-serif; | |
| font-size: 90%; | |
| margin: 50px; | |
| } | |
| .info-chart { | |
| width: 630px; | |
| height: 400px; | |
| position: relative; | |
| } |
| $( document ).ready(function() { | |
| var tableArray = []; | |
| /* Margin, Width and height */ | |
| var margin = {top: 100, right: 30, bottom: 55, left: 70}; | |
| var width = 630 - margin.left - margin.right; | |
| var height = 400 - margin.top - margin.bottom; | |
| var barPadding = 20; | |
| var padding = 60; | |
| /* Colours */ | |
| var colourYellow = ["#F2F0E6","#FFF2AF","#D8C466","#E5AB54"]; | |
| var colourRed = ["#F16622","#EE402D","#D12027","#BF5757","#8A0018"]; | |
| var colourBlue = ["#CBE7D5","#67C6C2","#9BB38C","#7CB490","#585780"]; | |
| var coulourBlack = ["#7F8587","#2B2A29","#000000"]; | |
| function writeDownloadLink(){ | |
| var html = d3.select("svg") | |
| .attr("title", "test2") | |
| .attr("version", 1.1) | |
| .attr("xmlns", "http://www.w3.org/2000/svg") | |
| .node().parentNode.innerHTML; | |
| d3.select("body").append("a") | |
| .attr("class","download") | |
| .attr("title", "file.svg") | |
| .attr('target','_blank') | |
| .attr("href-lang", "image/svg+xml") | |
| .attr("href", "data:image/svg+xml;base64,\n" + btoa(html)) | |
| .text("Download SVG"); | |
| }; | |
| $('#target').submit(function(e) { | |
| var tableValues = $("input"); | |
| tableArray = []; | |
| for (var i = 0; i < (tableValues.length - 1) ; i++) { | |
| var thisValue = tableValues.eq(i).val(); | |
| tableArray.push(parseInt(thisValue)) | |
| }; | |
| buildChart(); | |
| e.preventDefault(); | |
| return false; | |
| }); | |
| function buildChart () { | |
| /* Clear the old SVG and remove the download link */ | |
| $(".info-chart").html(""); | |
| $(".download").remove(); | |
| /* Define Y scale */ | |
| var yScale = d3.scale.linear() | |
| .domain([0, | |
| (d3.max(tableArray) + (d3.max(tableArray) * 0.05)) | |
| ]) | |
| .range([height,0]); | |
| /* Define Y axis */ | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .tickSize(-width,0) | |
| .ticks(7); | |
| /* Define X scale */ | |
| var xScale = d3.scale.ordinal() | |
| .domain(d3.range(tableArray.length)) | |
| .rangeBands([0,width], 0.2, 0.1); | |
| /* Define X axis */ | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .tickSize(5,0); | |
| /* Create SVG element */ | |
| var svg = d3.select(".info-chart") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| svg.append("rect") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .attr("fill",colourYellow[0]); | |
| svg.append("rect") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("fill","white") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| /* Create Y axis */ | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
| .call(yAxis) | |
| /* Add some extra text for the unit alongside the axis */ | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", -padding + 20) | |
| .attr("x", -(height / 2)) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "middle") | |
| .text("Y axis"); | |
| svg.append("text") | |
| .attr("y", (padding/2)) | |
| .attr("x", (padding/2)) | |
| .style("text-anchor", "left") | |
| .attr("dy", ".5em") | |
| .attr("font-family", "'Knockout-48Featherweight'") | |
| .attr("font-size","36") | |
| .attr("letter-spacing","1") | |
| .text("HEADLINE HEADLINE"); | |
| svg.append("text") | |
| .attr("y", padding) | |
| .attr("x", (padding/2)) | |
| .style("text-anchor", "left") | |
| .attr("dy", ".71em") | |
| .attr("font-family", "'NewsGothicMT'") | |
| .attr("font-size","18") | |
| .text("Introduction text to go here"); | |
| var bars = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| bars.selectAll("rect") | |
| .data(tableArray) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d, i){ | |
| return xScale(i); | |
| }) | |
| .attr("y", function(d){ | |
| return yScale(d); | |
| }) | |
| .attr("width", xScale.rangeBand() ) | |
| .attr("height", function(d){ | |
| return height - yScale(d); | |
| }) | |
| .style("fill",colourRed[2]); | |
| /* Create X axis in front of bars */ | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(" + margin.left + "," + (margin.top + height) + ")") | |
| .call(xAxis) | |
| /* Add some extra text for the unit alongside the axis */ | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("y", (padding/2)) | |
| .attr("x", (width/2)) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "middle") | |
| .text("X axis"); | |
| /* Apply the styles that would normally be applied with CSS | |
| so that they are preserved in the download svg*/ | |
| d3.selectAll(".axis line") | |
| .attr("stroke-width", "1") | |
| .attr("fill", "none") | |
| .attr("stroke", "black") | |
| .attr("shape-rendering", "crispEdges") | |
| d3.selectAll(".y.axis path") | |
| .attr("stroke-width", "0") | |
| .attr("fill", "none") | |
| .attr("stroke", "none") | |
| d3.selectAll(".y.axis .tick.major line") | |
| .attr("stroke-width", 1) | |
| .attr("fill", "none") | |
| .attr("stroke", "#666") | |
| .attr("stroke-dasharray","2,2"); | |
| d3.selectAll(".x.axis path ") | |
| .attr("stroke-width", "3") | |
| .attr("fill", "none") | |
| .attr("stroke", "black"); | |
| d3.selectAll(".axis text") | |
| .attr("font-family", "'NewsGothicMT'") | |
| .attr("font-size", 14); | |
| d3.selectAll(".axis text.label") | |
| .attr("font-family", "'NewsGothicMT'") | |
| .attr("font-size", 16); | |
| writeDownloadLink(); | |
| }; | |
| }); |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Auto Graph</title> | |
| <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript" src="auto-graph.js"></script> | |
| <link rel="stylesheet" type="text/css" href="auto-graph.css" media="all"> | |
| </head> | |
| <body> | |
| <div class="info-chart"></div> | |
| <form id="target" action="destination.html"> | |
| <input type="text" value="5"/> | |
| <input type="text" value="10"/> | |
| <input type="text" value="15"/> | |
| <input type="text" value="20"/> | |
| <input type="text" value="30"/> | |
| <input type="submit" value="Create chart" /> | |
| </form> |
