Skip to main content
SimilarExport ZIP
100%

linechart

✓ Published1🌍 Public
Mmodydxx@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from HTML Starter

This example shows a line chart tracking weekly visits across Dallas-Fort Worth public library branches, using a sequential index as the x-axis and weekly visit counts on the y-axis. The code imports a reusable `LineChart` function from `lineChart.js`, which leverages d3.v7’s `d3.line`, `d3.scaleLinear`, and `d3.axisBottom` to render the SVG path and axes. Data is loaded from a CSV URL via `d3.csv` with `d3.autoType`, and the chart is configured with custom width, height, color, and axis labels before being appended to the document body.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

area chart

This area chart visualizes weekly visits to Dallas-Fort Worth public libraries across 52 sequential weekly observations. The chart uses D3 v7’s `d3.area` generator with a linear scale for both axes, filling the region beneath the line with a light blue `#9ecae1` and overlaying a darker stroke. Data is loaded from a CSV via `d3.csv`, with numeric values parsed to remove commas. The y-axis includes gridlines and a “Weekly Visits” label, while the x-axis displays integer index ticks with a “Library Index” label.

Mmodydxx@gmail.com
84% match
Loading thumbnail…

ice 6 part 3

A dual-axis chart displays total weekly visits as blue bars and average events per week as a red line for each Dallas public library, sorted by descending visit totals. The visualization uses D3 v7 APIs including `d3.text` and `d3.csvParse` to load and parse the CSV data from a GitHub Gist, `d3.rollup` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.line` for the trend line. An interactive legend and rotated axis labels aid readability.

Mmodydxx@gmail.com
80% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the relationship between events per week and weekly visits for Dallas-Fort Worth public libraries, using CSV data loaded directly from a GitHub gist. The SVG visualization encodes the quantitative variables on the x- and y-axes, with data points rendered as circles sized by a fixed radius. Built with modular D3 6.7.0 functions, the plot implements a configurable `scatterPlot` generator that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The plot animates by cycling between the two data columns every two seconds, updating the x-axis and circle positions via a `setInterval` callback. The example demonstrates a reusable chart module with idempotent rendering, likely intended for easy parameterization across datasets.

Mmodydxx@gmail.com
79% match
Loading thumbnail…

ice6_part1

A bar chart shows total weekly visits per public library from a DFW libraries dataset, with libraries sorted in descending order and bars colored red. The code uses D3 v7’s `d3.text`, `d3.csvParse`, and `d3.rollup` to load and aggregate the CSV data, then renders an SVG chart with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data is sourced from a GitHub gist containing the 2025 weekly visits CSV.

Mmodydxx@gmail.com
79% match
Loading thumbnail…

ice6 part 2

A scatter plot displays the relationship between open hours per week and weekly visits for DFW public libraries, with each steel-blue circle representing one library. The chart, rendered as an SVG, uses D3 v7's `scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for the tick marks. Data is loaded from a remote CSV using `d3.text`, then parsed and cleaned with `d3.csvParse` and `d3.autoType`, filtering for finite numeric values before plotting. The visualization reveals whether libraries with more operating hours attract higher visitor counts.

Mmodydxx@gmail.com
76% match
Loading thumbnail…

line chart time data

This line chart visualizes daily values over a two-week period, with a red path connecting data points plotted by date and value. The y-axis starts at 8000 to emphasize variation, while each data point is marked with a circle. Using D3 v5, the code loads a CSV file, parses dates with `new Date()`, and applies `scaleTime` and `scaleLinear` for axes. The `line` generator with `curveBasis` creates the smoothed path, and SVG circles are appended for points, with axes rendered via `axisLeft` and `axisBottom`.

VVvgupta
75% match
Loading thumbnail…

Assignment7 Line Chart

This example shows a line chart tracking website visits over a 100-day period, with a steady upward trend from 120 to 630 visits. Built with D3.js, it loads data from a CSV file using `d3.csv`, creates linear scales with `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The line itself is drawn using the `d3.line` generator, appended as an SVG path with a steelblue stroke, within an 800x500 SVG container.

445.saiful@gmail.com
74% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data in cities worldwide, sourced from Data Canvas – Sense Your City. Each colored line represents a city, with a legend using `d3.scaleOrdinal` and `schemeCategory10` to distinguish them. The chart uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. D3 v5 renders the SVG, with axes created via `d3.axisLeft` and `d3.axisBottom`, and `d3.nest` groups data by city for plotting.

Eendlesstory
73% match