Skip to main content
SimilarExport ZIP
100%

ice6 part 2

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

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.

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
87% 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
87% 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
82% 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
82% 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
76% 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
72% match
Loading thumbnail…

ICE 6 part 2

This scatter plot uses a D3.js v7 SVG animation to explore the relationship between tree height and circumference, with each circle representing a tree from a CSV dataset, colored by borough. The visualization begins with all points at radius zero, then animates them to their full size using SVG circle elements and D3's `.selectAll`, `.enter`, and `.attr` methods. Interactive mouseover and mouseout events enlarge individual dots and highlight them with a contrasting stroke. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for gridlines and tick labels.

Aanirudhrao345@gmail.com
71% match
Loading thumbnail…

ICE62MD

A scatterplot shows the relationship between weekly study hours and exam scores for 100 students, revealing a generally positive correlation. Each orange point represents a student and displays a tooltip with exact hours and score on hover. Built with D3 v7, it uses `d3.csv`, linear scales, SVG circles, `d3.axisBottom` and `d3.axisLeft`, and mouse event handlers for interactive tooltips.

Ddandamidhun41613@gmail.com
71% match