Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
YYujunliu95
Last edited Apr 6, 2023
Created on Apr 6, 2023
Forked from HTML Starter

This visualization displays multiple stock price trends over time as colored lines on a shared time-series chart. The code loads data from a CSV file, parses dates, and groups entries by symbol using `d3.group`. It renders SVG paths with a steelblue stroke overridden by a categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`), and adds axes via `d3.axisBottom` and `d3.axisLeft`.

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 visualization displays the relative performance of multiple stocks over time, with lines for each stock colored according to a categorical palette. The y-axis uses a logarithmic scale to show the ratio of each stock’s current value to its initial value, enabling comparison of percentage changes across different price levels. The chart is built with D3.js v6 within a React framework, using `d3.scaleLog`, `d3.line`, and `d3.axisLeft` with gridlines, and is rendered as an SVG with animation support. Data is fetched from a CSV file containing stock prices and volumes.

Yyinghao11
87% match
Loading thumbnail…

Untitled

This visualization combines a line chart with a filled area to display stock prices over time. The chart uses a time-series x-axis and a linear y-axis, with the area under the curve highlighted in green to emphasize the cumulative trend. Data is loaded from a CSV file using `d3.csv`, while scales and axes are constructed with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The line and area paths are generated using `d3.line` and `d3.area` with a basis curve, rendered as SVG within a styled HTML page.

Ssri7harsha
85% match
Loading thumbnail…

Untitled

This visualization displays the closing prices and trading volumes of ten stocks over time, using a logarithmic scale to compare relative changes across different price and volume ranges. Each stock is drawn as a colored line, with a dropdown or toggle option to switch between close price and volume metrics. The chart uses D3 v6 with SVG rendering and includes gridlines, axis ticks, and a time-based x-axis. Data is loaded from a CSV file hosted on GitHub, and the color palette assigns a distinct hue to each stock symbol.

Lluxingyu
85% match
Loading thumbnail…

Untitled

This example displays a time-series line chart of stock prices from January 2017 to December 2022, with the price on the y-axis and the year on the x-axis. Using D3 v4 with SVG rendering, it loads data from a CSV file via `d3.csv`, parses dates with `d3.timeParse`, and constructs scales with `d3.scaleTime` and `d3.scaleLinear`. The line is drawn using `d3.line` with a cardinal curve, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Ssri7harsha
84% match
Loading thumbnail…

Untitled

This example presents an interactive stock chart with candlestick and line plots, accompanied by technical indicators such as moving averages, MACD, RSI, and volume. The chart also supports zooming, panning, and draggable annotations for trendlines and support/resistance levels. It uses the D3 v4 library with techan.js for financial charting, rendering to SVG within a React framework. Data is loaded from a TSV file containing historical stock prices and parsed using `d3.timeParse`.

SSheela2930
83% match
Loading thumbnail…

Untitled

A line chart compares the daily open and close prices of a financial asset, plotting both series over time with a steelblue line for close values and a red line for open values. The code uses `d3.csv` to load data from `data2.csv`, `d3.timeParse` to convert date strings, and `d3.scaleTime` and `d3.scaleLinear` to set up the axes. SVG paths are drawn with `d3.line`, and `d3.axisBottom` and `d3.axisLeft` render the time and price scales.

Yyinghao11
83% match
Loading thumbnail…

Untitled

This interactive scatterplot displays stock data with price on the x-axis and true value on the y-axis, using colored circles to represent stock types. Users filter the visualization through a dropdown menu for sector selection and jQuery UI sliders that adjust volume and delta ranges. The D3.js code loads data from a CSV file, applies keyed enter/update/exit selections, and includes hover tooltips that highlight individual stocks. The SVG renderer uses d3.axisBottom and d3.axisLeft for axes, with d3.scaleOrdinal for categorical coloring.

Mmkolowrat
83% match
Loading thumbnail…

Untitled

This example shows a dual-line chart comparing the closing and opening prices of a dataset over time. Two lines are rendered on a time-scaled x-axis and a linear y-axis, with the closing price in steel blue and the opening price in red. The visualization uses D3 v4’s `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to generate the SVG paths and axes. Data is loaded from a CSV file with d3.csv, and dates are parsed with `d3.timeParse`.

Ttayyabanisar
82% match