Line Chart

100%

✓ Published0🌍 Public

Last edited Nov 7, 2015

Created on Nov 7, 2015

This visualization shows the approval ratings of multiple U.S. presidents over time, plotting separate lines for George W. Bush and Barack Obama. The view uses a time-scaled x-axis and a linear y-axis from 0 to 90, with a grid and tick marks on the right. The code loads data from CSV files, including presidential popularity data, and renders the two lines with D3 v3’s `d3.svg.line` and `d3.time.scale`. The SVG chart is drawn inside a 500x1500 pixel canvas, with the source data cited.

AI-generated description

A simple line chart of presidential popularity.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/98724f36aa2cbf413718'>Simple Line Chart</a>

Similar vizzes

Loading thumbnail…

Difference Chart

This visualization compares public approval, disapproval, and undecided ratings for multiple U.S. presidents by aligning their time in office along a common axis. It renders three separate charts side-by-side, each showing two presidential terms overlaid. The chart uses filled red and blue areas to highlight where one president’s rating exceeds the other’s, with dark red and dark blue lines tracing each individual series. The code uses D3 v3 with `d3.time.scale` and `d3.svg.area` to interpolate between sampled data points from CSV files. Data is sourced from the UCSB presidency popularity dataset.

BBeaupe

81% match

Loading thumbnail…

Line Chart

This line chart displays the population of the USA from 1960 to 2021. The visualization uses D3 v5 to load CSV data and render an SVG path. It employs `scaleTime` and `scaleLinear` for the axes, with `axisBottom` and `axisLeft` to generate ticks and gridlines. The line is drawn using the `line` generator, and the dataset is parsed with `d3.timeParse`.

Aakhila157

67% match

Loading thumbnail…

Line Chart with Multiple Lines

This example visualizes projected delivery dates for Social Security numbers across multiple report years, using a smooth, curved line to show the relationship between report year and projected delivery time. The chart employs time-scaled axes on both dimensions, with a maroon line path rendered in SVG. Built with D3 v5, it uses d3.csv to load external data, d3.scaleTime for temporal scaling, d3.line with d3.curveBasis for the smoothed path, and d3.axisBottom and d3.axisLeft for labeled axes with grid ticks.

SSean Moore

66% match

Loading thumbnail…

Line Chart

This line chart shows the life expectancy of the USA from 1800 to 2016, with the years on the x-axis and expectancy values on the y-axis. The React-based visualization uses D3 v5 scales and the `d3.line` generator to create the SVG path, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file using `d3.csv` and parsed with `d3.timeParse`. Gridlines, axis labels, and a green stroke line are styled through CSS.

SSonuSriN

65% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays the count of a phenomenon across U.S. states, grouped by region (South, West, Midwest, Northeast) over five years (2011–2015), with each region represented by a distinct colored line. The visualization uses D3 v5’s `nest()` and `rollup()` to aggregate state-level data from a CSV file, then renders paths with `d3.line()`. It employs `scaleTime`, `scaleLinear`, and `scaleOrdinal` with `schemeCategory10` for axes and color encoding, plus a custom `colorLegend` component for region labels. SVG rendering includes axis labels and a title, with data sourced from the Data Canvas - Sense Your City project.

Sshehryar-hashir

65% match

Loading thumbnail…

Line chart with multiple lines

A line chart displays the number of reviews per day for multiple US states, with each state represented by a colored line. A legend allows clicking to highlight or fade individual states. Built with D3 v5, the visualization uses `d3.nest`, `d3.line`, `d3.curveBasis`, `scaleLinear`, and `scaleOrdinal` with `schemeCategory10`. Data is loaded via `d3.csv` from a VizHub dataset. SVG rendering includes axes, gridlines, and a title.

RResl411

65% match

Loading thumbnail…

Line Chart (ICE 7)

This example displays the average population of the United States over time, using a smooth, curved line to connect annual data points ordered by year. The chart is rendered as an SVG with React, using D3’s `scaleTime`, `scaleLinear`, `line()`, and `curveNatural` to map and draw the trend. Axis ticks are generated by reusable React components, and the data is loaded asynchronously from a CSV URL using D3’s `csv` and React’s `useState`/`useEffect`. The visualization is styled with Lato font and a minimal, grid-based aesthetic.

AAashish Pandey

65% match

Loading thumbnail…

Line Chart

A line chart displays US temperature readings over time, with the x-axis representing time and the y-axis representing temperature. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to render the SVG path. The line is styled with a blue stroke, and the chart includes labeled axes and a title. The data is loaded from a CSV file via the `csv` function from D3.

AAmruthaVee

65% match