Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
CCrossZeigler
Last edited May 17, 2023
Created on May 17, 2023
Forked from HTML Starter

This example shows a multi-series line chart with a dropdown menu to switch between different data groups, highlighting one series at a time. The code uses d3.csv to load a dataset from a GitHub repository, then creates an SVG chart with d3.scaleLinear for axes and a d3.scaleOrdinal color scale based on d3.schemeSet2. Selecting a new group triggers the update function, which animates a transition on the path’s d attribute over 1000ms, changing its stroke color accordingly. The visualization is built with d3.v4 and includes an HTML select element populated with group names.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar
92% match
Loading thumbnail…

Untitled

A dropdown menu switches between three data series in this connected scatterplot, updating both a line path and circular points with smooth transitions. The visualization reads time-series data from an external CSV file and renders it as an SVG using d3.line, scaleLinear axes, and transition methods for animated updates. A second custom chart built with d3's modular API and scalePoint scales demonstrates categorical axis support with staggered circle entrance animations.

Eemberix@gmail.com
87% match
Loading thumbnail…

Untitled

This example shows a small multiple chart with one line chart per data group, where each group represents a category from a CSV file and displays its numeric trend over time. The visualization is built with D3.js v4 and renders SVG graphics. The code uses `d3.nest()` to group data by category, `d3.line()` to draw each line, and `d3.axisBottom` and `d3.axisLeft` for axes. Colors are assigned via `d3.scaleOrdinal`, and each small chart is labeled with its group name.

AAmr Eldemerdash
83% match
Loading thumbnail…

Untitled

This chart displays multiple lines tracking the change in a numeric value over time, with each line representing a different named group. It uses d3.csv to load the dataset from a GitHub URL, then d3.nest groups rows by name to create a series per category. Each series is drawn as a separate path using d3.line, with a d3.scaleOrdinal assigning colored strokes from a categorical palette. An SVG is rendered into the page, with d3.axisBottom and d3.axisLeft providing the x and y scales for the time-based and numeric axes.

Hhshs1115
83% match
Loading thumbnail…

Untitled

A dropdown menu controls a single line chart that plots baby name popularity over time, showing the annual count for a selected name. The code reads from a CSV file and uses D3 v4 to render an SVG with axes and a smooth animated transition. The user selects a name from the menu to trigger a `transition` that updates the line path, colored via a sequential scale. The display uses `d3.csv` for data loading and `d3.line` for the path generation, with a simple but effective interactive filter.

Mmab3105
82% match
Loading thumbnail…

Untitled

A dropdown menu lets the viewer select one of five technology companies—APPLE, IBM, MICROSOFT, SALESFORCE, or VISA—to draw a corresponding line chart of stock data over time. The chart uses an SVG path with a color from the `d3.schemeSet2` palette, and the line updates with a smooth transition animation when a new company is chosen. The data comes from a CSV file loaded via `d3.csv`. The implementation uses `d3.select`, `d3.scaleLinear`, `d3.line`, and the `transition` method for animation.

AAdvait Maduskar
81% match
Loading thumbnail…

Untitled

This example presents an interactive bar chart visualization built with D3 v2 and React, rendering as an SVG with animated transitions. It displays categorical data along the x-axis with corresponding numeric values on the y-axis, using a drop-shadow filter effect on the bars. The chart dynamically rescales its ordinal and linear scales based on the input data, with axis tick labels drawn from a caption mapping. The code leverages jQuery for DOM manipulation, D3’s `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` APIs, and applies a custom SVG filter for visual styling.

Ssitaramchallapalli
81% match
Loading thumbnail…

Untitled

This visualization shows how multiple data series change over time using a streamgraph with a silhouette offset, where each colored area represents a different category. The chart loads CSV data from a GitHub repository and displays it as stacked areas with a diverging y-axis centered around zero. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for the categorical color palette, and d3.stack with d3.stackOffsetSilhouette to compute the layered areas, which are rendered as SVG paths using d3.area.

LLAOKE1997
80% match