Skip to main content
SimilarExport ZIP
100%

ice6_part1

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
90% 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
87% match
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
81% 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…

linechart

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.

Mmodydxx@gmail.com
79% match
Loading thumbnail…

htmlq3

This dark-themed visualization displays a preview of the first five rows from a CSV file detailing weekly visits to Dallas-Fort Worth public libraries in 2025. It renders the data as an HTML table within a rounded card container, using D3.js v7 to fetch and parse the remote CSV via the `d3.csv` API. The code leverages D3's selection and join operations (`d3.select`, `.join`) to dynamically generate table headers and cells from the dataset's column names and row values, with alternating row striping for readability.

Mmodydxx@gmail.com
76% match
Loading thumbnail…

HTML Starter_mohammed

This example presents a dataset summary dashboard for DFW public library weekly visits in 2025, showing five key metrics in a dark-themed card layout. The visualization uses D3 v7 to load CSV data via `d3.csv`, calculates aggregate statistics with `d3.mean` and `d3.max`, and renders metric cards using `d3.select` with a data join. The SVG badge and styled metric cards are built with HTML and CSS, while the data-driven values update dynamically through D3's data binding.

Mmodydxx@gmail.com
75% match
Loading thumbnail…

Ice 6 bar

A bar chart visualizes population counts for a list of cities, with each bar's height proportional to its population value. The chart uses an SVG renderer with D3 v7 to load CSV data, construct linear and band scales, and draw grid lines, axes, and labeled tooltips via appended `title` elements. Axis ticks are filtered to show every tenth city, and city labels are rotated for readability.

HHarshithaDontha@my.unt.edu
75% match