Skip to main content
SimilarExport ZIP
100%

ice 6 part 3

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
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
83% 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
81% 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
80% 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
75% match
Loading thumbnail…

ICE-6 Multi-Series and Combined Chart

This example presents two D3.js v7 charts built with SVG, using data from a city_temps.csv file. The first is a multi-series line chart for Dallas showing monthly Temperature, Rainfall, and Humidity trends with distinct colored lines and a legend. The second is a combined chart overlaying steelblue bars for rainfall with a tomato-colored line for temperature, using a band scale for months and a linear scale for values. Both charts utilize d3.csv, d3.line, d3.scaleLinear, d3.scaleBand, d3.axisBottom, d3.axisLeft, and D3 selections to render the visualizations.

Jjanisha30gowda@gmail.com
74% match
Loading thumbnail…

ICE 7

This line chart shows monthly website visits across 2024, peaking in December at 3,200 visits. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.csv` to load the `visits.csv` dataset, `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, and `d3.line` with a monotone curve to draw the path. Individual data points are marked with `circle` elements, and each value is labeled directly above its point. The code applies `d3.axisBottom` and `d3.axisLeft` with custom formatting for the month labels.

Aankitgoudpoodhari07@gmail.com
74% match