you-draw-it

100%

✓ Published0🌍 Public

Last edited Jan 15, 2017

Created on Jan 15, 2017

This interactive chart displays U.S. debt as a percentage of GDP from 2001 to 2015, showing the historical trend up to 2008 and inviting the user to draw the subsequent path. After 2008, the line is dashed and user-controlled via `d3.drag`; dragging updates the data points, and once all years are defined, a clipped area reveals the actual values through a `clipPath` with a `transition`. The visualization uses D3 v4 APIs including `d3.area`, `d3.line`, and `d3.mouse`, rendering as SVG with axes and a grid, based on data embedded in the script.

AI-generated description

Early/simplifed version of You Draw It: What Got Better or Worse During Obama’s Presidency

d3.drag is pretty great!

Similar vizzes

Loading thumbnail…

step-path-transition

The visualization shows a line chart of U.S. GDP real values and forecasts over time, with an animated path transition. A glowing dot with a text label traces the data points sequentially as the user clicks “Next,” updating the line segment by segment. A “Restart” button resets the animation. The chart uses D3’s SVG line generator with a dynamic counter to progressively reveal the series, while axes and gridlines frame the data.

11wheel

72% match

Loading thumbnail…

Debt over time plot - India

This line chart displays the revenue generated through taxes by the United States government from 1800 to 2011, with the y-axis reporting revenue as a percentage of GDP and the x-axis reporting the year. It uses d3’s `csv` loader to fetch data from the described IMF dataset, then renders the line with `d3.line` and a `curveBasis` curve. The chart uses `scaleLinear` with `nice()` for both axes, and `axisBottom` and `axisLeft` for tick marks. The line is styled with a green stroke and 0.4 opacity, with titles and labels rendered as SVG text.

MMukund Khandelwal

70% match

Loading thumbnail…

Sample Line Chart

This sample line chart displays US GDP data from 1980 to 2020, drawing a smooth basis curve through the points. The code uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with curveBasis to generate the path. It loads data from a CSV hosted on GitHub, parses the numeric values, and renders the chart as SVG with red strokes and a pink background. The title and axis labels are added via d3 text elements.

MManasa891-git

70% match

Loading thumbnail…

Loading US GDP Data with Interactive Color Legend and Line Chart

This interactive visualization displays US GDP data, showing annual levels and percentage changes over time with a line chart. A scatter plot uses color-coded circles to represent each year, grouped into decades via an interactive color legend that highlights or fades data points on hover. The code relies on D3 v7's `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, and `axisLeft/axisBottom/axisRight` modules to render the axes and chart. Data is fetched as CSV from the BEA via a GitHub raw URL and parsed with `csvParse` and `timeParse`.

SSeekerzero

70% match

Loading thumbnail…

Debt over time plot: India

The chart displays India’s national debt as a percentage of GDP from 1913 to 2011, using a smooth line to reveal spikes tied to historical economic events. Drawn as an SVG, the visualization uses D3 v5’s `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft` to plot the data, which originates from the IMF’s historical debt database. Axes include labeled tick marks and light gridlines, with an orange path highlighting debt variation over time.

MMukund Khandelwal

69% match

Loading thumbnail…

you-draw-it test

This example demonstrates a “you-draw-it” interactive chart where viewers predict a data trend before revealing the actual values. It shows two sequential questions: the first presents a time series of annual values from 2015 to 2020, and the second asks for a single numeric estimate (17.1). The visualization uses the D3 v5 library alongside the `youdrawit` plugin, which handles the drawing and comparison interactions. The chart is initialized via a chained `.chart()` method with questions passed as data, and the plugin renders the drawing canvas and manages user input. No explicit data source is shown beyond the embedded sample values.

EEE2dev

69% match

Loading thumbnail…

Expenditure over time plot

This plot shows United States expenditure as a percentage of GDP since 1800, with a red line charting the yearly values. The visualization uses D3.js v5, scaling the x-axis linearly for years and the y-axis linearly for expenditure percentages. It renders as SVG, with the line generated using `d3.line`, `curveBasis` for smoothing, and axes created via `axisBottom` and `axisLeft`. Data is loaded asynchronously from a CSV file using `d3.csv`.

MMukund Khandelwal

69% match

Loading thumbnail…

Untitled

This example displays the U.S. Federal Funds borrowing rate over time as a single steelblue line chart, with a focus on user interaction. Hovering the mouse over the plot reveals a small black circle and a text label that track the nearest data point, showing its date and rate value. The visualization uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for axes, and d3.line for the path. It also employs a d3.bisector to locate the closest data point, with SVG elements for rendering.

RRobFaj

69% match