Untitled

100%

✓ Published1🌍 Public

Last edited Nov 25, 2020

Created on Nov 7, 2020

Forked from Temperature in San Fransisco Line Chart

This chart displays a stacked area graph of Slack message volumes over time, with each colored layer representing a distinct data category. The visualization uses the d3.stack() function to aggregate series and d3.area() to generate the SVG path for each layer, colored via a d3.scaleOrdinal() palette. Time values are parsed with d3.timeParse() and mapped using d3.scaleTime(). The data comes from a CSV file hosted on GitHub, loaded with d3.csv().

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization shows how multiple data series change over time using a streamgraph with a silhouette offset, where each colored area represents a different category. The chart loads CSV data from a GitHub repository and displays it as stacked areas with a diverging y-axis centered around zero. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for the categorical color palette, and d3.stack with d3.stackOffsetSilhouette to compute the layered areas, which are rendered as SVG paths using d3.area.

LLAOKE1997

82% match

Loading thumbnail…

Untitled

This interactive stacked area chart displays the changing values of multiple categories over time, using the D3.js library (version 2) with SVG rendering and animations. The chart employs a silhouette offset layout to visualize data from a CSV file, with color-coded layers representing different groups. Hovering over a layer highlights it and shows a tooltip with the category name and its specific value, while mouse movement on the chart also triggers a vertical guideline.

LLAOKE1997

81% match

Loading thumbnail…

Untitled

This chart visualizes the popularity of research topics over time using a stacked area chart with a silhouette offset. The visualization uses d3.layout.stack, d3.svg.area, and d3.time.scale to render SVG paths with cardinal interpolation, while d3.svg.axis displays the x and y axes. Interactive features include tooltips on mouseover that show topic values, hover highlighting that dims other layers, and a vertical guide line that follows the cursor. Data comes from a comma-separated CSV file loaded with d3.csv.

LLAOKE1997

80% match

Loading thumbnail…

HTML Starter

An interactive bar chart tracks Slack message counts across three categories—public channels, private channels, and direct messages—over a date range. A slider input updates highlighted circles for each category, with tooltips showing message counts for selected dates. Built with React, D3 v3, and SVG, the visualization uses `d3.scale.ordinal` for x positioning, `d3.svg.axis` for axes, and transitions for circle radius changes. Data comes from a remote CSV file via `d3.csv`.

Ssgalhamdani

77% match

Loading thumbnail…

Untitled

This chart displays multiple lines tracking the change in a numeric value over time, with each line representing a different named group. It uses d3.csv to load the dataset from a GitHub URL, then d3.nest groups rows by name to create a series per category. Each series is drawn as a separate path using d3.line, with a d3.scaleOrdinal assigning colored strokes from a categorical palette. An SVG is rendered into the page, with d3.axisBottom and d3.axisLeft providing the x and y scales for the time-based and numeric axes.

Hhshs1115

77% match

Loading thumbnail…

Untitled

This stacked bar chart displays the composition of groups across three subgroups, with each group’s total broken into color-coded segments. The visualization uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.stack to compute the stacked values from CSV data. Groups are plotted as rectangles filled with a d3.scaleOrdinal palette, rendered as SVG elements within a fixed-width canvas. The chart is built using d3.v4, reading data from a remote raw GitHub URL.

Nnkrpyate

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

76% match

Loading thumbnail…

Meaningless Graphs with D3

An interactive stacked area chart renders eight time series from a CSV file, displaying aggregate values across years with a color-coded palette. The visualization uses D3 v6 to parse the data, then applies `d3.stack()` to compute layer offsets and `d3.area()` to generate the SVG paths. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while labels for "Year" and "Points??" are added as SVG text elements. The data source is a remote CSV hosted on GitHub, and the chart updates reactively when loaded.

Sstevensmithj

76% match