Basic Chart, simple dataset

100%

Basic Chart, simple dataset

✓ Published1🌍 Public

Last edited Mar 14, 2020

Created on Mar 14, 2020

This example displays two overlaid line charts, each plotting a distinct series from a tab-separated dataset against the same x-axis. The visualization uses D3 v5 to load data via `d3.tsv`, applies linear scales (`d3.scaleLinear`) to map x and y values, and renders the series as both green and steel-blue circles and connected paths using `d3.line`. The SVG output is transformed by a 25-pixel offset, while the dataset contains paired y-values across nine x-points.

AI-generated description

Bar chart to display population data of most populated countries in the world United Nations: world population prospects 2017 page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Chart, simple dataset

This example shows five red circles positioned in a linear diagonal pattern with x values from 100 to 500 and y values from 50 to 250, loaded from a two-column TSV dataset. The visualization uses D3 v5’s `d3.tsv` function to asynchronously fetch the data, then binds it to SVG `circle` elements through the `data()`, `enter()`, and `append()` chain. Each circle’s `cx` and `cy` attributes are mapped directly from the data columns, while the SVG canvas has a light gray background. The dataset mimics simple population-related coordinates, though it contains no actual population figures.

NNoWizards

86% match

Loading thumbnail…

Basic bar+line chart

This chart combines a bar chart and a line chart in a single SVG visualization, with bars representing one data series and a line overlaid for a second series. It is built as a reusable template driven by a CSV file, where column names for the x-axis, bar values, and line values are configured in the code. The x-axis uses a band scale for categorical years, while the y-axis is linear and shared by both series. Blue bars show the primary values, and a green line connects the secondary values, with a legend distinguishing the two. The chart includes axis labels, a title, and a hover effect on the bars.

EEleonore9

81% match

Loading thumbnail…

simple line chart without dataset

This example shows a simple line chart that uses vertical bars to represent a static dataset of ten numeric values, with the values labeled above each bar. The visualization is rendered as an SVG inside an HTML page, using D3.js v4 to bind the data array to rectangle elements and scale the bar heights proportionally to the maximum value in the dataset. The code defines linear scales for the x- and y-axes, then appends the bars and text labels to a translated group element, with a fixed width for each bar derived from the data length.

EEnzoTheBrown

80% match

Loading thumbnail…

Most Basic Line chart

This example presents a basic line chart displaying a time series from a two-column CSV dataset. A single steelblue line traces the relationship between date and value over time. The chart is built using the D3.js library (v6), which handles CSV loading, date parsing, and the construction of a time-scaled X axis and linear Y axis. The line path is generated via `d3.line()` and rendered as an SVG element within a fixed 500x500 canvas.

Nnicolekevans

79% match

Loading thumbnail…

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

EElisaDnr

79% match

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

79% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a local JSON dataset, with labeled date tick marks and a grey line connecting data points. Each data point is a semi-transparent grey circle that highlights in red with a black value label and connecting dashed line on mouseover, then reverts on mouseout. The chart uses D3 version 3 APIs including `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.line` to create the line path. SVG elements are rendered directly via `d3.select("body").append("svg")`, and the data is loaded with `d3.json`.

MMelanieSalignat

79% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a small dataset, with interactive tooltips that reveal each point’s value and draw a dashed vertical guide down to the x-axis. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line to generate the path, and d3.json to load the data. Circles are added per data point, and mouseover and mouseout events toggle the tooltip and dash-line visibility. The labels and values are rendered as SVG text elements.

HHakkahi

79% match