To begin, please paste your javascript n3.vis wrappers in the textbox below. Feel free to enter multiple visualizations at once.

var fullData = [ {"budgetYear": 1980, "forecastYear": 1980, "value": -103}, {"budgetYear": 1980, "forecastYear": 1981, "value": -37}, {"budgetYear": 1980, "forecastYear": 1982, "value": 10}, {"budgetYear": 1980, "forecastYear": 1983, "value": 51}, {"budgetYear": 1981, "forecastYear": 1980, "value": -192}, {"budgetYear": 1981, "forecastYear": 1981, "value": -129}, {"budgetYear": 1981, "forecastYear": 1982, "value": -60}, {"budgetYear": 1981, "forecastYear": 1983, "value": -17}, {"budgetYear": 1981, "forecastYear": 1984, "value": 63}, {"budgetYear": 1982, "forecastYear": 1981, "value": -185}, {"budgetYear": 1982, "forecastYear": 1982, "value": -215}, {"budgetYear": 1982, "forecastYear": 1983, "value": -190}, {"budgetYear": 1982, "forecastYear": 1984, "value": -164}, {"budgetYear": 1982, "forecastYear": 1985, "value": -137}, {"budgetYear": 1983, "forecastYear": 1982, "value": -280}, {"budgetYear": 1983, "forecastYear": 1983, "value": -432}, {"budgetYear": 1983, "forecastYear": 1984, "value": -373}, {"budgetYear": 1983, "forecastYear": 1985, "value": -371}, {"budgetYear": 1983, "forecastYear": 1986, "value": -275}, {"budgetYear": 1984, "forecastYear": 1983, "value": -432}, {"budgetYear": 1984, "forecastYear": 1984, "value": -363}, {"budgetYear": 1984, "forecastYear": 1985, "value": -345}, {"budgetYear": 1984, "forecastYear": 1986, "value": -330}, {"budgetYear": 1984, "forecastYear": 1987, "value": -326}, {"budgetYear": 1984, "forecastYear": 1988, "value": -267}, {"budgetYear": 1984, "forecastYear": 1989, "value": -209}, {"budgetYear": 1985, "forecastYear": 1984, "value": -367}, {"budgetYear": 1985, "forecastYear": 1985, "value": -425}, {"budgetYear": 1985, "forecastYear": 1986, "value": -336}, {"budgetYear": 1985, "forecastYear": 1987, "value": -298}, {"budgetYear": 1985, "forecastYear": 1988, "value": -253}, {"budgetYear": 1985, "forecastYear": 1989, "value": -182}, {"budgetYear": 1985, "forecastYear": 1990, "value": -135}, {"budgetYear": 1986, "forecastYear": 1985, "value": -406}, {"budgetYear": 1986, "forecastYear": 1986, "value": -378}, {"budgetYear": 1986, "forecastYear": 1987, "value": -260}, {"budgetYear": 1986, "forecastYear": 1988, "value": -164}, {"budgetYear": 1986, "forecastYear": 1989, "value": -114}, {"budgetYear": 1987, "forecastYear": 1986, "value": -412}, {"budgetYear": 1987, "forecastYear": 1987, "value": -313}, {"budgetYear": 1987, "forecastYear": 1988, "value": -189}, {"budgetYear": 1987, "forecastYear": 1989, "value": -157}, {"budgetYear": 1987, "forecastYear": 1990, "value": -98}, {"budgetYear": 1987, "forecastYear": 1991, "value": -33}, {"budgetYear": 1987, "forecastYear": 1992, "value": 19}, {"budgetYear": 1988, "forecastYear": 1987, "value": -271}, {"budgetYear": 1988, "forecastYear": 1988, "value": -257}, {"budgetYear": 1988, "forecastYear": 1989, "value": -219}, {"budgetYear": 1988, "forecastYear": 1990, "value": -166}, {"budgetYear": 1988, "forecastYear": 1991, "value": -124}, {"budgetYear": 1988, "forecastYear": 1992, "value": -77}, {"budgetYear": 1988, "forecastYear": 1993, "value": -34}, {"budgetYear": 1989, "forecastYear": 1988, "value": -272}, {"budgetYear": 1989, "forecastYear": 1989, "value": -273}, {"budgetYear": 1989, "forecastYear": 1990, "value": -152}, {"budgetYear": 1989, "forecastYear": 1991, "value": -105}, {"budgetYear": 1989, "forecastYear": 1992, "value": -49}, {"budgetYear": 1989, "forecastYear": 1993, "value": -4}, {"budgetYear": 1989, "forecastYear": 1994, "value": 48}, {"budgetYear": 1990, "forecastYear": 1989, "value": -258}, {"budgetYear": 1990, "forecastYear": 1990, "value": -203}, {"budgetYear": 1990, "forecastYear": 1991, "value": -99}, {"budgetYear": 1990, "forecastYear": 1992, "value": -38}, {"budgetYear": 1990, "forecastYear": 1993, "value": 8}, {"budgetYear": 1990, "forecastYear": 1994, "value": 15}, {"budgetYear": 1990, "forecastYear": 1995, "value": 13}, {"budgetYear": 1991, "forecastYear": 1990, "value": -363}, {"budgetYear": 1991, "forecastYear": 1991, "value": -499}, {"budgetYear": 1991, "forecastYear": 1992, "value": -424}, {"budgetYear": 1991, "forecastYear": 1993, "value": -296}, {"budgetYear": 1991, "forecastYear": 1994, "value": -89}, {"budgetYear": 1991, "forecastYear": 1995, "value": 4}, {"budgetYear": 1991, "forecastYear": 1996, "value": 27}, {"budgetYear": 1992, "forecastYear": 1991, "value": -422}, {"budgetYear": 1992, "forecastYear": 1992, "value": -603}, {"budgetYear": 1992, "forecastYear": 1993, "value": -514}, {"budgetYear": 1992, "forecastYear": 1994, "value": -306}, {"budgetYear": 1992, "forecastYear": 1995, "value": -272}, {"budgetYear": 1992, "forecastYear": 1996, "value": -249}, {"budgetYear": 1992, "forecastYear": 1997, "value": -252}, {"budgetYear": 1993, "forecastYear": 1992, "value": -438}, {"budgetYear": 1993, "forecastYear": 1993, "value": -465}, {"budgetYear": 1993, "forecastYear": 1994, "value": -367}, {"budgetYear": 1993, "forecastYear": 1995, "value": -323}, {"budgetYear": 1993, "forecastYear": 1996, "value": -258}, {"budgetYear": 1993, "forecastYear": 1997, "value": -243}, {"budgetYear": 1994, "forecastYear": 1993, "value": -375}, {"budgetYear": 1994, "forecastYear": 1994, "value": -339}, {"budgetYear": 1994, "forecastYear": 1995, "value": -232}, {"budgetYear": 1994, "forecastYear": 1996, "value": -233}, {"budgetYear": 1994, "forecastYear": 1997, "value": -250}, {"budgetYear": 1994, "forecastYear": 1998, "value": -253}, {"budgetYear": 1994, "forecastYear": 1999, "value": -238}, {"budgetYear": 1995, "forecastYear": 1994, "value": -293}, {"budgetYear": 1995, "forecastYear": 1995, "value": -270}, {"budgetYear": 1995, "forecastYear": 1996, "value": -270}, {"budgetYear": 1995, "forecastYear": 1997, "value": -286}, {"budgetYear": 1995, "forecastYear": 1998, "value": -261}, {"budgetYear": 1995, "forecastYear": 1999, "value": -259}, {"budgetYear": 1995, "forecastYear": 2000, "value": -249}, {"budgetYear": 1996, "forecastYear": 1995, "value": -230}, {"budgetYear": 1996, "forecastYear": 1996, "value": -200}, {"budgetYear": 1996, "forecastYear": 1997, "value": -188}, {"budgetYear": 1996, "forecastYear": 1998, "value": -130}, {"budgetYear": 1996, "forecastYear": 1999, "value": -84}, {"budgetYear": 1996, "forecastYear": 2000, "value": -35}, {"budgetYear": 1996, "forecastYear": 2001, "value": 10}, {"budgetYear": 1996, "forecastYear": 2002, "value": 54}, {"budgetYear": 1997, "forecastYear": 1996, "value": -147}, {"budgetYear": 1997, "forecastYear": 1997, "value": -169}, {"budgetYear": 1997, "forecastYear": 1998, "value": -160}, {"budgetYear": 1997, "forecastYear": 1999, "value": -154}, {"budgetYear": 1997, "forecastYear": 2000, "value": -112}, {"budgetYear": 1997, "forecastYear": 2001, "value": -45}, {"budgetYear": 1997, "forecastYear": 2002, "value": 21}, {"budgetYear": 1998, "forecastYear": 1997, "value": -29}, {"budgetYear": 1998, "forecastYear": 1998, "value": -13}, {"budgetYear": 1998, "forecastYear": 1999, "value": 12}, {"budgetYear": 1998, "forecastYear": 2000, "value": 11}, {"budgetYear": 1998, "forecastYear": 2001, "value": 35}, {"budgetYear": 1998, "forecastYear": 2002, "value": 110}, {"budgetYear": 1998, "forecastYear": 2003, "value": 98}, {"budgetYear": 1998, "forecastYear": 2004, "value": 127}, {"budgetYear": 1998, "forecastYear": 2005, "value": 153}, {"budgetYear": 1998, "forecastYear": 2006, "value": 178}, {"budgetYear": 1998, "forecastYear": 2007, "value": 228}, {"budgetYear": 1999, "forecastYear": 1998, "value": 92}, {"budgetYear": 1999, "forecastYear": 1999, "value": 104}, {"budgetYear": 1999, "forecastYear": 2000, "value": 150}, {"budgetYear": 1999, "forecastYear": 2001, "value": 167}, {"budgetYear": 1999, "forecastYear": 2002, "value": 229}, {"budgetYear": 1999, "forecastYear": 2003, "value": 218}, {"budgetYear": 1999, "forecastYear": 2004, "value": 242}, {"budgetYear": 2000, "forecastYear": 1999, "value": 165}, {"budgetYear": 2000, "forecastYear": 2000, "value": 214}, {"budgetYear": 2000, "forecastYear": 2001, "value": 230}, {"budgetYear": 2000, "forecastYear": 2002, "value": 229}, {"budgetYear": 2000, "forecastYear": 2003, "value": 221}, {"budgetYear": 2000, "forecastYear": 2004, "value": 227}, {"budgetYear": 2000, "forecastYear": 2005, "value": 241}, {"budgetYear": 2000, "forecastYear": 2006, "value": 277}, {"budgetYear": 2000, "forecastYear": 2007, "value": 308}, {"budgetYear": 2000, "forecastYear": 2008, "value": 320}, {"budgetYear": 2000, "forecastYear": 2009, "value": 334}, {"budgetYear": 2000, "forecastYear": 2010, "value": 363}, {"budgetYear": 2001, "forecastYear": 2000, "value": 302}, {"budgetYear": 2001, "forecastYear": 2001, "value": 351}, {"budgetYear": 2001, "forecastYear": 2002, "value": 284}, {"budgetYear": 2001, "forecastYear": 2003, "value": 290}, {"budgetYear": 2001, "forecastYear": 2004, "value": 305}, {"budgetYear": 2001, "forecastYear": 2005, "value": 302}, {"budgetYear": 2001, "forecastYear": 2006, "value": 331}, {"budgetYear": 2001, "forecastYear": 2007, "value": 359}, {"budgetYear": 2001, "forecastYear": 2008, "value": 380}, {"budgetYear": 2001, "forecastYear": 2009, "value": 427}, {"budgetYear": 2001, "forecastYear": 2010, "value": 465}, {"budgetYear": 2001, "forecastYear": 2011, "value": 519}, {"budgetYear": 2002, "forecastYear": 2001, "value": 160}, {"budgetYear": 2002, "forecastYear": 2002, "value": -130}, {"budgetYear": 2002, "forecastYear": 2003, "value": -96}, {"budgetYear": 2002, "forecastYear": 2004, "value": -16}, {"budgetYear": 2002, "forecastYear": 2005, "value": 68}, {"budgetYear": 2002, "forecastYear": 2006, "value": 93}, {"budgetYear": 2002, "forecastYear": 2007, "value": 110}, {"budgetYear": 2003, "forecastYear": 2002, "value": -194}, {"budgetYear": 2003, "forecastYear": 2003, "value": -364}, {"budgetYear": 2003, "forecastYear": 2004, "value": -357}, {"budgetYear": 2003, "forecastYear": 2005, "value": -233}, {"budgetYear": 2003, "forecastYear": 2006, "value": -218}, {"budgetYear": 2003, "forecastYear": 2007, "value": -188}, {"budgetYear": 2003, "forecastYear": 2008, "value": -193}, {"budgetYear": 2004, "forecastYear": 2003, "value": -452}, {"budgetYear": 2004, "forecastYear": 2004, "value": -606}, {"budgetYear": 2004, "forecastYear": 2005, "value": -409}, {"budgetYear": 2004, "forecastYear": 2006, "value": -290}, {"budgetYear": 2004, "forecastYear": 2007, "value": -254}, {"budgetYear": 2004, "forecastYear": 2008, "value": -243}, {"budgetYear": 2004, "forecastYear": 2009, "value": -241}, {"budgetYear": 2005, "forecastYear": 2004, "value": -480}, {"budgetYear": 2005, "forecastYear": 2005, "value": -479}, {"budgetYear": 2005, "forecastYear": 2006, "value": -423}, {"budgetYear": 2005, "forecastYear": 2007, "value": -329}, {"budgetYear": 2005, "forecastYear": 2008, "value": -255}, {"budgetYear": 2005, "forecastYear": 2009, "value": -237}, {"budgetYear": 2005, "forecastYear": 2010, "value": -207}, {"budgetYear": 2006, "forecastYear": 2005, "value": -357}, {"budgetYear": 2006, "forecastYear": 2006, "value": -458}, {"budgetYear": 2006, "forecastYear": 2007, "value": -373}, {"budgetYear": 2006, "forecastYear": 2008, "value": -227}, {"budgetYear": 2006, "forecastYear": 2009, "value": -211}, {"budgetYear": 2006, "forecastYear": 2010, "value": -183}, {"budgetYear": 2006, "forecastYear": 2011, "value": -202}, {"budgetYear": 2007, "forecastYear": 2006, "value": -269}, {"budgetYear": 2007, "forecastYear": 2007, "value": -257}, {"budgetYear": 2007, "forecastYear": 2008, "value": -240}, {"budgetYear": 2007, "forecastYear": 2009, "value": -190}, {"budgetYear": 2007, "forecastYear": 2010, "value": -94}, {"budgetYear": 2007, "forecastYear": 2011, "value": -53}, {"budgetYear": 2007, "forecastYear": 2012, "value": 59}, {"budgetYear": 2008, "forecastYear": 2007, "value": -170}, {"budgetYear": 2008, "forecastYear": 2008, "value": -417}, {"budgetYear": 2008, "forecastYear": 2009, "value": -414}, {"budgetYear": 2008, "forecastYear": 2010, "value": -160}, {"budgetYear": 2008, "forecastYear": 2011, "value": -94}, {"budgetYear": 2008, "forecastYear": 2012, "value": 47}, {"budgetYear": 2008, "forecastYear": 2013, "value": 28}, {"budgetYear": 2009, "forecastYear": 2008, "value": -467}, {"budgetYear": 2009, "forecastYear": 2009, "value": -1781}, {"budgetYear": 2009, "forecastYear": 2010, "value": -1171}, {"budgetYear": 2009, "forecastYear": 2011, "value": -899}, {"budgetYear": 2009, "forecastYear": 2012, "value": -563}, {"budgetYear": 2009, "forecastYear": 2013, "value": -507}, {"budgetYear": 2009, "forecastYear": 2014, "value": -532}, {"budgetYear": 2009, "forecastYear": 2015, "value": -534}, {"budgetYear": 2009, "forecastYear": 2016, "value": -573}, {"budgetYear": 2009, "forecastYear": 2017, "value": -562}, {"budgetYear": 2009, "forecastYear": 2018, "value": -551}, {"budgetYear": 2009, "forecastYear": 2019, "value": -607}, {"budgetYear": 2010, "forecastYear": 2009, "value": -1436}, {"budgetYear": 2010, "forecastYear": 2010, "value": -1556}, {"budgetYear": 2010, "forecastYear": 2011, "value": -1250}, {"budgetYear": 2010, "forecastYear": 2012, "value": -803}, {"budgetYear": 2010, "forecastYear": 2013, "value": -692}, {"budgetYear": 2010, "forecastYear": 2014, "value": -659}, {"budgetYear": 2010, "forecastYear": 2015, "value": -689}, {"budgetYear": 2010, "forecastYear": 2016, "value": -700}, {"budgetYear": 2010, "forecastYear": 2017, "value": -688}, {"budgetYear": 2010, "forecastYear": 2018, "value": -682}, {"budgetYear": 2010, "forecastYear": 2019, "value": -775}, {"budgetYear": 2010, "forecastYear": 2020, "value": -841} ]; var vis = n3.vis('budgetForecast') .data(fullData) .stage('#stage', 700, 400) .state('year', ['1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010']) .state('plotForecasts', ['true', 'false']) .const('minYear', 1980) .const('maxYear', 2010) .const('maxYearForecast', 2020) .const('minValue', -1781) .const('maxValue', 519) .const('sx', function() { return d3.scale.linear() .domain([vis.const('minYear'), vis.const('maxYearForecast')]) .range([0, vis.width()]); }) .const('sy', function() { return d3.scale.linear() .domain([vis.const('minValue'), vis.const('maxValue')]) .range([vis.height(), 0]); }) .const('drawLineGraph', function() { return d3.svg.line() .x(function(d, i){ return vis.const('sx')()(d.forecastYear); }) .y(function(d, i){ return vis.const('sy')()(d.value); }); }) .render(function() { // First draw zero line drawAxes(this); // Plot forecasts drawForecasts(this); // Plot actual budget figures drawActual(this); }); function drawAxes(vis) { var sx = vis.const('sx')(); var sy = vis.const('sy')(); var formatNumber = function(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + '.' + '$2'); } var newStr = x1 + x2; if(newStr.indexOf('-') != -1) { newStr = '-$' + newStr.substring(1); } else { newStr = '$' + newStr; } return newStr; } var xAxis = d3.range(vis.const('minYear'), vis.const('maxYearForecast'), 2); var yAxis = d3.range(vis.const('minValue'), vis.const('maxValue'), 200); vis.stage() .selectAll('line.xAxis') .data(xAxis) .enter() .append("svg:line") .attr("x1", function(d) { return sx(d); }) .attr("y1", function() { return vis.height() + 20 }) .attr("x2", function(d) { return sx(d); }) .attr("y2", 0) .attr("stroke", "#fff") .attr("class", "xAxis"); vis.stage() .selectAll("line.yAxis") .data(yAxis) .enter() .append("svg:line") .attr("x1", -20) .attr("y1", function(d) { return sy(d); }) .attr("x2", function(d) { return vis.width() + 20 }) .attr("y2", function(d) { return sy(d); }) .attr("stroke", "#fff") .attr("class", "yAxis"); vis.stage() .selectAll("text.xAxisLabels") .data(xAxis) .enter() .append("svg:text") .text(function(d) { if(d == vis.const('minYear') || d == vis.const('maxYearForecast')) return; var fullYear = d + ''; return "'" + fullYear.substring(2); }) .attr("x", function(d) { return sx(d); }) .attr("dx", "10") .attr("y", function(d) { return sy(0); }) .attr("dy", "-5") .attr("class", "xAxisLabels") .attr("fill", "#aaa") .attr("text-anchor", "end"); vis.stage() .selectAll("text.yAxisLabels") .data(yAxis) .enter() .append("svg:text") .text(function(d) { if(d != 19 && d != vis.const('minValue')) return formatNumber(Math.round(d)) + ((Math.abs(d) > 1000) ? ' trillion' : ' billion'); }) .attr("x", 75) .attr("dx", function(d) { return Math.abs(d) > 1000 ? 15 : 0 }) .attr("y", function(d) { return sy(d); }) .attr("dy", "4") .attr("class", "yAxisLabels") .attr("fill", "#aaa") .attr("text-anchor", "end"); var zeroData = []; for(var i = vis.const('minYear'); i <= vis.const('maxYearForecast'); i++) zeroData[zeroData.length] = {'budgetYear': i, 'forecastYear': i, 'value': 0}; var path = vis.stage().selectAll('path#zero') .data([zeroData]); path.enter() .append('svg:path') .attr('id', 'zero') .attr('d', vis.const('drawLineGraph')()); } function drawForecasts(vis) { var plot = vis.state('plotForecasts'); var year = vis.state('year'); var drawLineGraph = vis.const('drawLineGraph')(); var dataTransform = vis.const('dataTransform'); var fullData = vis.data(); var data = []; if(plot == 'true') { var years = d3.range(vis.const('minYear'), vis.const('maxYear')+1); for(var i = 0; i < years.length; i++) { if(years[i] > year) break; var forecastData = []; for(var j = 0; j < fullData.length; j++) { if(fullData[j].budgetYear != years[i]) continue; forecastData[forecastData.length] = fullData[j]; } data[data.length] = forecastData; } } var forecast = vis.stage() .selectAll('path.forecast') .data(data); forecast.enter() .append('svg:path') .attr('d', drawLineGraph) .attr('class', 'forecast'); forecast.transition() .attr('d', drawLineGraph) forecast.exit() .remove(); } function drawActual(vis) { var year = vis.state('year'); var drawLineGraph = vis.const('drawLineGraph')(); var dataTransform = vis.const('dataTransform'); var fullData = vis.data(); var data = []; for(var i = 0; i < fullData.length; i++) { var d = fullData[i]; if(d.budgetYear > year) continue; if(d.forecastYear != d.budgetYear - 1) continue; data[data.length] = d; } var actual = vis.stage().selectAll('path#actual') .data([data]); actual.enter() .append('svg:path') .attr('d', drawLineGraph) .attr('id', 'actual'); actual.transition().attr('d', drawLineGraph); actual.exit().remove(); // 2010 projection var projectedData = []; if(year >= 2010) { for(var i = 0; i < fullData.length; i++) { var d = fullData[i]; if(d.budgetYear != 2010) continue; projectedData[projectedData.length] = d; } } var projected = vis.stage() .selectAll('path#projected') .data([projectedData]); projected.enter() .append('svg:path') .attr('d', drawLineGraph) .attr('id', 'projected'); projected.transition().attr('d', drawLineGraph); projected.exit().remove(); }

Add new scene transition

Bind to data

Fill: color: Bind     opacity: Bind

Border: color: Bind     width: Bind

Widget Type: Checkbox Radio Buttons Drop-down Menu Slider Step:

Bound To: Select state...

Javascript:

HTML: