Line Chart

100%

✓ Published0🌍 Public

Last edited Dec 29, 2011

Created on Dec 29, 2011

Two small line charts, built with the D3.js library and jQuery, visualize two hard-coded data arrays of nine points each. The charts plot the data on a linear scale, with an orange line connecting circular data points. Interactive mouseover events enlarge the circles, and clicking a point logs its value and index to the browser console. The rendering includes grid lines, axis ticks, and labels, all styled with CSS. The data is hardcoded within the script, not loaded from an external source.

AI-generated description

Similar vizzes

Loading thumbnail…

d3.js line chart with multiple lines and points

This example shows two multi-series line charts overlaid in a single SVG, with each line distinguished by its own path and circular data points. It demonstrates how to map linear scales to x- and y-axes, render gridlines and tick labels, and add interactive hover effects that enlarge points on mouseover. The code uses D3.js v3 APIs including `d3.svg.line()`, `d3.scale.linear()`, and selection methods like `append`, `attr`, and `on`. The data is a hardcoded array of two numeric arrays, with axes and points generated programmatically from the same scales.

CCaged

82% match

Loading thumbnail…

Line Chart

This example demonstrates two identical line charts generated side by side, each plotting two data series with different value sets. The charts are rendered using the C3.js library, which builds upon D3.js to create the visualizations. The page layout uses a CSS Grid structure to position a header, menu, content area, and footer, with one chart embedded within a quadrant of the content grid and the second placed below the main container. The code initializes each chart by calling `c3.generate()`, binding to distinct HTML elements and supplying the same two-column dataset for both, showing how the same chart configuration can be reused in different page locations.

GGerardoFurtado

79% match

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

78% match

Loading thumbnail…

Line Chart

This line chart visualizes monthly values for categories A through L, showing trends over time with a thick orange line connecting circular data points. The chart includes value labels and date labels for each point. Built with D3.js v3, it uses an ordinal x-scale, a linear y-scale, and SVG rendering. Hovering over a circle triggers a smooth transition that enlarges the point to yellow, reveals its corresponding value text, and draws a vertical orange line from the baseline, using D3's selection filtering and transition methods. The data comes from a local JSON file.

BBerengerCunillera

78% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of twelve monthly data points, where each point is marked by a red circle. The chart highlights the final value with a large number label and allows interactive exploration: hovering over a point turns it blue and draws a temporary vertical dashed line to the x-axis with the corresponding value displayed. The visualization is built with D3.js v3, using an ordinal scale for the x-axis (categories A–L) and a linear scale for the y-axis. Data is loaded from an external JSON file via `d3.json`, and the line, circles, and text are rendered as SVG elements with CSS transitions for hover effects.

BBrunoDumas

78% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

77% match

Loading thumbnail…

Line chart with information box

A line chart displays 200 randomly generated data points, with each point’s x-position based on its sequential ID and y-position on its value. Hovering over a point triggers an animated transition that highlights the selected point with a larger orange circle and reveals an information box on the right, showing the point’s ID and value. The visualization uses D3 v4 to build the SVG line and circles, while Bootstrap provides layout styling for the chart and info panel. The interaction relies on D3’s `mouseover` event and `transition` methods to update the box’s visibility and text content dynamically.

EEfratVil

77% match

Loading thumbnail…

Simple line chart

A simple line chart displays twelve months of numeric values, with a black polyline connecting evenly spaced points and a large label showing the final value. The chart includes interactive circles that turn red on hover, revealing the corresponding value and a dashed vertical guide line using SVG transitions. Built with D3.js v3, it uses ordinal and linear scales, SVG paths for the line, and JSON data loaded via `d3.json`.

JJulesSauvinet

77% match