Gist b26af969008f2443c96d3f0f8d66cb14

100%

Gist b26af969008f2443c96d3f0f8d66cb14

✓ Published0🌍 Public

Last edited Apr 7, 2018

Created on Apr 7, 2018

This example shows a simple line chart plotting the three values from `stuff.csv` (1, 2, 3) as a continuous series. The visualization uses D3.js to load the CSV and bind the data to SVG circles and a path, with scales mapping the x- and y-positions. A hover interaction highlights the nearest data point by enlarging the circle, while the line itself is drawn using `d3.line`. The chart includes axis ticks and labels generated with `d3.axisBottom` and `d3.axisLeft`, providing a minimal but clear view of the data’s upward trend.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged

76% match

Loading thumbnail…

D3 multi-series line chart with tooltips and legend

This interactive multi-series line chart displays four data columns over time, with a dropdown menu to switch between three value groups. Users hover over the lines to see tooltips with the series name, formatted value, and date, powered by the jQuery Tipsy plugin. The visualization uses D3.js v3 to render SVG elements, including axes and animated transitions when the selection changes, while a legend updates based on the current data subset. Data is loaded from a CSV file using `d3.csv`.

MMatthew-Weber

74% match

Loading thumbnail…

Gist b126925b336690e07481fe09b384f125

This example demonstrates a time-series line chart showing closing values over a two-month period. The visualization uses a single blue line to connect data points, with a time-scaled x-axis and a linear y-axis that starts at zero. The code employs D3 v4’s `d3.line()` generator, `d3.scaleTime()`, and `d3.scaleLinear()` to map the data, which is loaded from an external tab-separated file. Axes are rendered via `d3.axisBottom()` and `d3.axisLeft()`, with the SVG canvas sized at 960 by 500 pixels plus margins.

335degrees

74% match

Loading thumbnail…

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

EEleonore9

74% match

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8

73% match

Loading thumbnail…

Simple line graph in d3.js

This simple line graph visualizes a small dataset of numeric date-value pairs loaded from a CSV file. It shows a single steel-blue polyline plotted against linear x and y axes, with five ticks per axis. The example uses d3.js v3 to parse the CSV, apply linear scales, and render the chart as SVG. It defines axes with d3.svg.axis and constructs the line path with d3.svg.line, demonstrating core D3 data-binding and scaling techniques for teaching purposes. The graph focuses on the essential structure of a D3 chart without additional interactivity or annotations.

MMNoichl

73% match

Loading thumbnail…

Line chart.js!

This line chart visualizes yearly data from a CSV file, plotting values against years with a blue line on axes labeled "Year" and "Value." It uses D3 v7 to load the data via `d3.csv`, scales the x- and y-axes with `d3.scaleLinear`, and renders the line path using the `d3.line` generator. The chart explicitly appends axes, labels, and the line to an SVG element, with margins set to accommodate tick marks and text. The example demonstrates basic DOM manipulation and data binding in D3.

Vvishnupriya eupuri

73% match

Loading thumbnail…

Line Time 2

The chart displays a stepped line tracing a time series of monthly values from a CSV file, with data points highlighted by large circles. The visualization renders to an SVG element, using D3 v7’s `scalePoint`, `scaleLinear`, `line`, and `curveStep` APIs to construct the path, alongside `axisBottom` and `axisLeft` for the axes. Data is loaded via `csv`, sorted by date, and mapped onto the scales with a 0.5 padding factor. A title text element sits above the plotting area.

Ddiegobrivo

73% match