Simple d3.js Graph

Simple line graph in d3.js

This example shows a simple line graph plotting stock closing prices over time, with date values on the x-axis and price on the y-axis. The visualization uses D3.js version 3.5.17, employing `d3.time.scale` for the date range, `d3.scale.linear` for the value axis, and `d3.svg.line` to generate the path. Data is loaded from a local CSV file via `d3.csv`, with the axes created through `d3.svg.axis`. The SVG rendering includes styled axis lines and a steelblue line, providing a minimal teaching example for D3 chart construction.

91% match

Simple Line Graph v7

This chart displays the closing price of a stock over time from late March to early May 2012, using a single blue line. It renders data from a CSV file as an SVG path, with the x-axis showing dates and the y-axis showing price values. The code loads the data via `d3.csv`, parses dates with `d3.timeParse`, scales the axes with `d3.scaleTime` and `d3.scaleLinear`, and draws the line using `d3.line`. It appends axes with `d3.axisBottom` and `d3.axisLeft` to complete the visualization.

90% match

Simple d3.js graph with internal data

This example shows a line chart of stock closing prices over a three-week period in April and May 2012. The data is declared internally as a JavaScript array of date-value pairs. The visualization uses D3.js version 3.5.17, with `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line` to render the axes and the line path in SVG. The chart includes styled axes and a steelblue line, with the date parsed via `d3.time.format`.

Simple line graph with v4

This simple line graph displays the daily closing value of a stock over a month, using data from a CSV file. The SVG chart is built with D3.js v4, employing `d3.scaleTime` and `d3.scaleLinear` to map dates and prices, while `d3.line` generates the path. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the line is styled with a steel-blue stroke.

Simple Line Graph v5

A simple line graph displays daily closing prices over roughly six weeks, extracted from a CSV file with date and value columns. The visualization uses an SVG path rendered through D3 v5's `d3.line()` generator, with a time scale for the x-axis and a linear scale for the y-axis. Margins are set explicitly, and both axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`. The date strings are parsed with `d3.timeParse()`, and the line is styled with a steelblue stroke.

d3.js Graph with many features

This graph displays stock closing prices against dates, with a steel-blue value line and a lightsteelblue filled area beneath it. The chart includes labeled x and y axes, a title, and light grey grid lines for both axes. The d3.js code uses `d3.time.scale` and `d3.scale.linear` for the coordinate systems, along with d3.js APIs such as `d3.svg.axis`, `d3.svg.line`, and `d3.svg.area` for rendering. The data is loaded from a local CSV file, and the visualization is rendered as an SVG.

Simple Line Graph v6

A simple line graph plots daily closing values over time, with the y-axis scaled from zero to the data maximum and dates parsed using `d3.timeParse`. Rendered as an SVG, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` generates the steelblue path. The code loads a CSV file via `d3.csv` and displays the result with `d3.axisBottom` and `d3.axisLeft`, serving as a minimal D3 v6 template.

86% match