Nsaranya08

@Nsaranya-08·9 public vizzes

Fork of ICE 7 Area Chart

This area chart displays the number of Hubway bike stations by municipality, with the x-axis listing municipalities and the y-axis showing station counts. The visualization loads data from a CSV file via `d3.csv` and processes it using `d3.rollup` to count stations per municipality. It renders the chart as an SVG with `d3.area` to create the filled path, `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and includes rotated axis labels. The chart is styled with rounded corners and a subtle shadow via CSS.

Mar 27, 2025

Loading thumbnail…

question 2 Area Chart

This area chart shows grocery sales over time, using a dataset of grocery inventory and sales. The visualization aggregates daily sales figures and displays them as a smooth, curved line with an orange-filled area beneath, emphasizing the trend and volume of sales. The chart is rendered as an SVG using D3.js version 5, with axes generated by `d3.axisBottom` and `d3.axisLeft`, and the area and line paths created via `d3.area` and `d3.line` with the `curveBasis` for smoothing. The code imports data from a remote CSV file.

Mar 27, 2025

Loading thumbnail…

ANSWER1

This interactive pie chart shows the distribution of bike stations by municipality, with each slice labeled and colored. The visualization is built with D3 v6 and uses `d3.rollup` to group and count stations from a CSV file, then `d3.pie` and `d3.arc` to generate the slices. Hovering over a slice reveals a tooltip with the municipality name and station count. The chart renders as SVG with smooth opacity transitions for the tooltip, and the layout is centered using a translation on the SVG group element.

Mar 26, 2025

Loading thumbnail…

ANSWER1

This pie chart displays the distribution of student test groups among individuals with a math score greater than 70, using data from a CSV file loaded via `d3.csv`. It visualizes group proportions as colored slices, with labels showing group names and counts, plus a legend. The chart is built with D3 v6, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for colors, and renders interactive SVG elements within a fixed-width container.

Mar 26, 2025

Loading thumbnail…

answer1

This pie chart displays the distribution of students by municipality, based on a CSV dataset of exam results. It uses a d3 pie and arc to create a donut chart, with each slice labeled by municipal name and count. Data is loaded from a remote CSV file using d3.csv, and grouped with d3.rollup to count entries per municipality. The visualization is rendered as an SVG, colored with d3.scaleOrdinal and d3.schemeCategory10.

Mar 26, 2025

Loading thumbnail…

Answer1

This pie chart shows the distribution of bike-share stations across municipalities, with slice labels and a color-coded legend. Built with D3 v6, it loads CSV data from a GitHub-hosted hubway_stations file, uses `d3.rollups` to count stations per municipality, and applies `d3.pie()` and `d3.arc()` to generate the SVG paths. A `d3.scaleOrdinal` with `d3.schemeCategory10` encodes categories, while labels are positioned using `arc.centroid()`. The legend is appended separately, and all shapes render as SVG elements in a fixed-width layout.

Mar 26, 2025

Loading thumbnail…

Fork of Hello VizHub

This example displays a centered, large-font message, "Hello VizHub!," as a minimal demonstration of integrating D3.js with ES6 modules. It uses D3’s `select` method to target a div element and set its text content, with the string imported from a separate module. The layout is styled via an external CSS file, and the page loads D3 v6 from a CDN. The code serves as a simple template for building interactive visualizations within the VizHub environment.

Mar 26, 2025

Loading thumbnail…

Answer2

This interactive area chart displays the monthly count of Hubway bike-sharing trips over time, with data loaded from a remote TSV file. The visualization uses D3 v7’s `d3.rollups` to aggregate trip records by month and `d3.area` with a monotone curve to render the filled path. Hovering over any of the plotted circles triggers a tooltip showing the exact month and trip count. The SVG chart includes rotated time-axis labels and axis generators `d3.axisBottom` and `d3.axisLeft`.

Mar 26, 2025

Loading thumbnail…

Task1

This scatter plot visualizes the relationship between sepal length and sepal width of Iris flowers, with each point colored by species (setosa, versicolor, or virginica) and accompanied by a legend. The visualization loads tab-separated Iris data via `d3.tsv` from a raw GitHub gist and renders it as an SVG using a reusable `ScatterPlot` module. It employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for species colors, and `d3.axisBottom` and `d3.axisLeft` for labeled axes with a custom title.

Mar 26, 2025