d3 playground

100%

✓ Published0🌍 Public

Last edited Jul 11, 2021

Created on Jul 3, 2021

This example demonstrates a time-series line chart of daily amounts loaded from a CSV file, using axes with tick labels. It uses d3.csv to parse data, d3.scaleTime and d3.scaleLinear for scales, and d3.axisBottom and d3.axisLeft for the axes. Guide lines are drawn as SVG line elements, followed by circles for each data point, all rendered within an SVG container sized via width and height attributes.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3: Time axis, prettier

This example shows a time-based scatterplot of daily amounts, with vertical grid lines and circular markers positioned along a date axis. The visualization uses D3 v5 and loads data from a CSV file via `d3.csv`, parsing date strings with `d3.timeParse` and formatting axis labels with `d3.timeFormat`. Axes are created using `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime` and `d3.scaleLinear` handle the positioning. The SVG rendering draws lines and circles for each data point, making the temporal trend of the amount values immediately apparent.

Nnikomc

81% match

Loading thumbnail…

D3 Tutorial

This example demonstrates a time series line chart of yearly values from 1970 to 2019, loaded from a CSV file. The visualization uses D3 v6 to bind the data, create a line generator, and render an SVG path within the page. The code references `d3.csv` for data loading and `d3.line` for the path generation, though the chart’s axes and scales are not explicitly implemented.

KKaitlyn Trudeau

81% match

Loading thumbnail…

D3 tryout

This example demonstrates a basic time-series line chart using D3 version 6. It plots a single series of date-value pairs from a remote CSV dataset, with a time-scaled x-axis and a linear y-axis. The code uses `d3.csv` to load and parse the data, `d3.timeParse` for date formatting, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate the SVG path. The visualization renders as a simple steelblue line with axes, using an SVG container created with `d3.select`.

BBinod Sapkota

81% match

Loading thumbnail…

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

EEleonore9

78% match

Loading thumbnail…

Line Time 2

The chart displays a stepped line tracing a time series of monthly values from a CSV file, with data points highlighted by large circles. The visualization renders to an SVG element, using D3 v7’s `scalePoint`, `scaleLinear`, `line`, and `curveStep` APIs to construct the path, alongside `axisBottom` and `axisLeft` for the axes. Data is loaded via `csv`, sorted by date, and mapped onto the scales with a 0.5 padding factor. A title text element sits above the plotting area.

Ddiegobrivo

77% match

Loading thumbnail…

D3 Tutorial

This tutorial demonstrates a simple line chart of yearly values from a CSV file, showing the trend of data points from 1970 to 2019. The visualization uses D3.js v6 to load the `data.csv` file and render an SVG chart. The code sets up a fixed-position chart container and relies on D3's selection and data-joining methods to plot the series. While the JavaScript implementation is incomplete, the example highlights D3’s fundamental workflow for binding external data to visual elements.

KKaitlyn Trudeau

77% match

Loading thumbnail…

D3 Course Code Along - Line Chart

This example shows a line chart of temperature readings over time, with two day patterns displayed as individual data points. The chart includes labeled axes, grid lines, and a title. The code uses D3 v5 with `scaleTime` and `scaleLinear` to map data, `axisLeft` and `axisBottom` to create axes, and `csv` to load the temperature data from a local file. SVG circles are used for each point, with a timestamp parsed into a JavaScript `Date` object.

Rrenenadorp

77% match

Loading thumbnail…

D3 Blanck Canvas

This example demonstrates a line chart visualization with an orange scatter plot overlay, rendered as SVG within a React framework. Using d3.csv to load data and d3.scaleTime and d3.scaleLinear to map dates and values, it plots a maroon line path and orange circles. The axes are drawn with d3.axisLeft and d3.axisBottom, while CSS styles the chart with large labels and a hidden overflow layout.

DDaniel Rivera

76% match