line chart ordinal data

100%

line chart ordinal data

✓ Published1🌍 Public

Last edited Apr 21, 2020

Created on Mar 12, 2020

Forked from saloni

This line chart maps ordinal letter categories (a–m) from a CSV file to their corresponding numeric values. The visualization uses D3 v5’s `scalePoint` for the x-axis and `scaleLinear` for the y-axis, rendering a smooth curve via `line()` with `curveBasis`. Circles mark each data point, while axes are generated with `axisBottom` and `axisLeft`. The SVG output includes a black stroked path and teal circular markers, with data loaded asynchronously through `csv()`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

scatterPlot

A scatter plot displays letters from a CSV file against their corresponding numeric values as circles. The chart uses D3 v5 with an SVG rendering, loading data via `d3.csv` and scaling positions with `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Axes are generated using `axisBottom` and `axisLeft`, with tick lines spanning the plot area.

VVvgupta

76% match

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot displays population estimates for countries, using a linear scale for population and a point scale for country names. The data comes from a CSV file, and the chart renders as SVG circles. The code uses D3 v5 functions including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, with a custom tick formatter that abbreviates large numbers using `format`.

Kkratzbuerste

75% match

Loading thumbnail…

Line chart.js!

This line chart visualizes yearly data from a CSV file, plotting values against years with a blue line on axes labeled "Year" and "Value." It uses D3 v7 to load the data via `d3.csv`, scales the x- and y-axes with `d3.scaleLinear`, and renders the line path using the `d3.line` generator. The chart explicitly appends axes, labels, and the line to an SVG element, with margins set to accommodate tick marks and text. The example demonstrates basic DOM manipulation and data binding in D3.

Vvishnupriya eupuri

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

74% match

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

74% match

Loading thumbnail…

line chart time data

This line chart visualizes time-series data from a CSV file, plotting daily values over a period from late 2017 to mid-2018. Two distinct series are shown, with the primary line appearing nearly flat around 2,055,322 and a secondary series appearing later with slightly higher values. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the chart, with circles marking individual data points.

Oovalli

74% match

Loading thumbnail…

Line ordinal

This example draws a single horizontal line across an SVG canvas to illustrate ordinal positioning within a chart. The line, rendered with an arrow marker on each end, spans the width of the viewport with a 24-pixel margin. Using d3.v4, the code selects the SVG element and appends the line, then relies on the browser’s `getBoundingClientRect()` method to position two HTML labels, “Category A” and “Category B,” just below the line’s endpoints. The labels are placed via absolute CSS positioning within a container div, with their left offsets calculated from the line’s start and end coordinates minus the label’s own width.

PPatrick Wojda

72% 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

72% match