D3 Time Series Axes

100%

D3 Time Series Axes

✓ Published0🌍 Public

Last edited Dec 7, 2021

Created on Nov 6, 2021

This example shows suicide rates over time as multiple colored lines, one per country, plotted against a linear time axis and a value axis. The visualization uses D3 v4 to load CSV data via `d3.csv`, processes it with `d3.nest()` to group records by country, and draws the lines with `d3.line()`. Axes are generated through `d3.axisBottom` and `d3.axisLeft`, while a color scale (`d3.scaleOrdinal`) assigns each country a distinct stroke color. The rendered output is an SVG graphic within a fixed-width chart area.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This example shows suicide numbers across multiple countries over time, with each country represented by a colored line on a time-series chart. The visualization uses D3 v5 to load CSV data and render an SVG with scaled axes, grid lines, and a color legend. It employs D3's `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, along with `axisBottom`, `axisLeft`, and `nest` to group data by country. The lines are sorted by their final value, and the chart is rendered entirely with SVG elements.

Wwishcsdev

88% match

Loading thumbnail…

Line Chart with Multiple Lines

This example displays suicide numbers across countries over time, with each country’s yearly data shown as a separate colored line and a matching color legend on the right. Using d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear map years and suicide counts, while d3.nest groups records by country and sorts them by the last value. The SVG rendering includes axes, gridlines, and a title, though the line paths are commented out, so only colored circles appear at data points.

Wwishcsdev

87% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays suicide numbers across countries over time, with each line representing a country and color encoding the country identity. The data comes from the Data Canvas - Sense Your City dataset. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `nest` to group data by country. Lines are drawn using the `line` generator with `curveBasis` smoothing, and a `colorLegend` displays the available country choices.

Wwishcsdev

84% match

Loading thumbnail…

DataViz Project - Suicides Visualization

An interactive line chart visualizes suicide death rates in American countries over time, alongside related mental health and unemployment metrics. A country selector filters the dataset, and a color legend distinguishes unemployment from mental illness data. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `curveNatural` for path rendering, with data from a CSV hosted on GitHub Gist. The SVG output includes custom axes and a dropdown menu for country selection.

FFelipe Mejías

80% match

Loading thumbnail…

Suicides rates in countries

The chart displays suicide rates over time for various countries, with a line chart connecting yearly data points. The visualization uses D3 v5 to load CSV data, parses year values, and scales the time and linear axes. It renders an SVG with a maroon line path, axis labels, and gridlines, with the data pulled from the source at vizhub.com/wishcsdev/datasets/suicides.csv.

Wwishcsdev

80% match

Loading thumbnail…

Melting data with multiple lines

This visualization shows suicide generation numbers over time from 1985 to 2016, with multiple colored lines representing different regions and countries sorted by their final values. The chart uses d3.line with curveBasis smoothing, d3.scaleTime for the x-axis, and d3.scaleOrdinal with schemeCategory10 for line colors. Data is melted from wide CSV format using d3.nest and d3.range, and a custom color legend is rendered alongside the SVG axes.

Kkbriggs1

79% match

Loading thumbnail…

Fork of Fork of Customizing Axes

This bar chart displays suicide counts by country, sourced from a United Nations dataset covering multiple years and demographics. The visualization highlights the top 10 most populous countries, with horizontal bars representing suicides_no values. Built with D3 v5, the code uses `scaleLinear` and `scaleBand` for positioning, `axisBottom` and `axisLeft` for customized axes, and `format('.2s')` for tick labels. SVG rendering applies custom styling to ticks, grid lines, and labels, with axis customization removing default domain lines.

Mmnalk

79% match

Loading thumbnail…

Untitled

This chart displays two series of suicide counts by country as concentric circular bar charts, with the outer green bars using a radial scale from the inner radius to the plot edge and an inner red series scaled from the inner radius down to 5. The SVD is rendered as SVG in D3 v6, using `d3.scaleBand` for angular positions, `d3.scaleRadial` for radial values, and `d3.arc` to generate the bar paths with adjustable padding. Country labels rotate around the chart, flipped for readability. Data comes from a CSV file loaded via `d3.csv`.

Mmnalk

78% match