Skip to main content
100%

closer

✓ Published0🌍 Public
Aandrewcowley
Last edited Apr 16, 2018
Created on Apr 12, 2018

Two line charts show how values change over time for different series. The visualization displays two buttons that switch between two distinct datasets: one containing series A and B, the other containing only series C. Built with D3 v4, the code uses d3.line, d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10 to render SVG paths with distinct colors per series. Axes are drawn with crispEdges rendering, and button clicks trigger an update function that rebinds data, redraws lines, and removes exiting series.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

2 - Multiple line graphs with labels

This example shows a dual line chart comparing close and open values over time, using data loaded from two CSV files. Two lines are drawn with D3 v3's SVG line generator: one solid steelblue line for the close values and one dashed red line for the open values. The chart includes a time-scaled x-axis, a linear y-axis, background grid lines, and labeled axes for Date and Value. A white shadow effect behind the title text improves readability, and the visualization demonstrates how to plot multiple series with distinct styles on the same axes.

Aadry34160
77% match
Loading thumbnail…

Untitled

Two time series line charts display closing values over date ranges from two CSV datasets. Each chart uses a separate SVG canvas, with the x-axis as a time scale and the y-axis as a linear scale, both with five ticks. The code employs d3.time.format for date parsing, d3.time.scale and d3.scale.linear for axis ranges, and d3.svg.axis for axis rendering. Each dataset’s path is drawn with d3.svg.line, styled with a steelblue stroke via CSS.

Aachintyatripathi
77% match
Loading thumbnail…

Changing data

An interactive chart uses D3 to display circles representing two datasets. Clicking a button switches between datasets, triggering D3 transitions that animate the circles to their new positions and radii. The SVG rendering uses D3’s selection, data joins, enter/exit, and transition API to smoothly update the visualization, with a text label that updates accordingly.

SSerhii Ponomarov
75% match
Loading thumbnail…

Untitled

A line chart displays stock closing prices over time for two datasets. An "Update" button triggers an animated transition between the datasets, smoothly interpolating both the line path and the x- and y-axes using D3.js transitions with a 750-millisecond duration. The visualization uses d3.svg.line, d3.time.scale for time-based x-axis formatting, and d3.svg.axis, with data loaded from CSV files via d3.csv. The SVG path and axes are updated in place, demonstrating dynamic data swapping.

CChase Hall
75% match
Loading thumbnail…

Untitled

Three bar charts show categorical values for groups A, B, and C, with a button-driven transition between two predefined datasets. Using d3.v4 with React, the visualization renders SVG rectangles that animate their heights and positions over one second via `transition()`. The y-axis scale is fixed from 0 to 20, while the x-axis uses `d3.scaleBand`. Clicking the buttons calls an `update` function that rebinds data and triggers the smooth visual change.

GGinnWG
75% match
Loading thumbnail…

Multi-Line and Difference Area Chart

This interactive chart presents two time-series datasets, toggling between a multi-line view and a difference area view. Hovering reveals the closest data point’s y-axis measurement. Built with D3 v4, it uses SVG and animated transitions to shift scales and redraw paths via `d3.area` and `d3.curveLinear`, with a Voronoi overlay for mouse tracking.

TTommyCoin80
74% match
Loading thumbnail…

d3.js line graph with dual Y axes

This example shows two time-series lines—one for closing values and one for opening values—plotted against a shared time axis but with separate y scales on the left and right sides. The SVG graphic uses D3.js version 3.5.17 with `d3.time.scale`, `d3.scale.linear`, and `d3.svg.axis` to render the axes and lines, while `d3.csv` loads the date-stamped data from a local CSV file. The left axis and blue line correspond to the close column, and the right axis and red line correspond to the open column, making it easy to compare trends across different value ranges.

Dd3noob
74% 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
74% match