CSCE5320 Project

100%

CSCE5320 Project

✓ Published0🌍 Public

Last edited Apr 27, 2024

Created on Apr 26, 2024

This example renders a horizontal bar chart that visualizes complaint counts by complaint type, sourced from a CSV file hosted on a GitHub Gist. Using D3.js v7, it loads the data with `d3.csv`, aggregates it via `d3.rollup` and `d3.sum`, and renders the bars as SVG rectangles with a linear x-scale and a band y-scale. Interactive hover effects change bar colors, and axes are added with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example demonstrates horizontal and vertical bar charts built with D3 v5, rendering SVG elements with animated transitions. The visualization reads data from a CSV file and displays multiple series with customizable colors, selection highlights, and optional area fills. Users can toggle between bar and line representations per series, with axis ranges configurable for both left and right sides. Hovering over chart sections reveals tooltips showing weekly values via mouse events, while invisible selection rectangles enable interactive node highlighting. The code leverages d3.csv, scaleLinear, scaleBand, axisLeft, axisBottom, and axisRight for data binding and chart construction.

Mmauryaamit

78% match

Loading thumbnail…

data visualization project

This example presents a bar chart of COVID-19 total cases by country, using data loaded from a remote CSV file. The chart is rendered as an SVG element using D3 v7, with a rotated x-axis to accommodate country labels and a linear y-axis for case counts. The code demonstrates D3’s scaleBand and scaleLinear for axis scaling, and uses the `join` operator to efficiently create bar rectangles, with a steelblue fill for the bars.

Bbudalavijay2001@gmail.com

78% match

Loading thumbnail…

Project 1 — Bar Chart

A bar chart displays aggregated values by category, with interactive controls that let users choose the categorical and numeric columns to visualize. The chart loads data from a local CSV file using `d3.csv` with `d3.autoType` to infer column types, then builds a sorted bar layout. The D3 v7 code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, grid lines via `d3.axisLeft`, and tooltips that follow the mouse. The bars are filled with a blue color, and axes are automatically labeled and rotated for readability.

SSYAM TEJ

77% match

Loading thumbnail…

pie chart-5320

This pie chart displays the distribution of insurance complaints by complaint type. It uses a D3.js SVG rendering to create a circular visualization with colored segments and labels. The code loads data from a CSV file hosted on a GitHub Gist, then uses `d3.rollup` to count complaints per type, `d3.pie` to generate the pie geometry, and `d3.arc` to draw the arcs. Each slice is filled with a color from `d3.schemeCategory10`, and text labels are positioned at the arc centroids.

Rrajkodavati7@gmail.com

77% match

Loading thumbnail…

Basic bar chart

This basic bar chart displays yearly values from a CSV file, with bars colored blue and highlighted on hover. It uses D3 v4 to load the data via `d3.csv`, scales with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles. The chart is configured as a reusable template, where users can edit column names, axis labels, and colors in a designated section. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with labels positioned manually. The example is a fork of Mike Bostock’s original bar chart block, adapted for CSV input.

EEndNight95

77% match

Loading thumbnail…

Project

This example displays two grouped bar charts showing population and renewable energy consumption by year, sourced from a CSV dataset hosted on GitHub. It uses D3.js v7 to load and parse the data, group records by year, and render SVG bar charts with linear and band scales. The charts are styled with distinct colors, steelblue for population and orange for renewable energy, and include labeled axes and a legend. The visualization offers a comparative view of demographic and energy trends over time.

Vvenkatabhaskaratetali@my.unt.edu

77% match

Loading thumbnail…

Bar chart with React & D3

This example shows a horizontal bar chart of population counts per activity category, using D3 for data loading and scales while React renders the SVG elements. The code fetches CSV data from a GitHub gist via `d3.csv` in a custom `useData` hook, then builds the visualization with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` draw the ticks and colored bars, with each bar assigned a color from a small array.

AAditya Khandelwal

76% match

Loading thumbnail…

Simple d3.js bar chart

This simple d3.js bar chart displays monthly values over a two-year period, with each bar representing a data point from a CSV file. The visualization uses d3.scale.ordinal and d3.scale.linear to map categorical dates and quantitative values, respectively, to pixel positions. Axes are rendered with d3.svg.axis, while the bars themselves are drawn as SVG rectangles with a steelblue fill. The chart includes a navigation interface with circular arrow buttons and a detail area, though the interaction logic is incomplete. Data comes from the external file bar-data.csv, and the visualization is built using the D3 version 3.5.17 library.

PPatrick Wojda

76% match