Iteration 1

Fork of Radar Chart

This radar chart compares peer institutions across four metrics: total enrollment, annual R&D expenditure, endowment per student, and undergraduate selectivity. The visualization arranges these attributes along perpendicular axes forming a diamond-shaped layout, with each university rendered as a distinct colored polygon using D3's `scaleLinear` and `line` APIs. Interactive hover states highlight individual institutions and their legend entries, while clicking legend items toggles visibility of corresponding shapes. Data comes from a CSV file parsed with `csvParse`, and the chart uses `d3.axisLeft` and `d3.axisBottom` for tick labels.

88% match

Rdar Chart Backup

This radar chart compares universities across four metrics—Community, Self-expression, Discovery, and Agency—based on peer institution data. The visualization uses a square layout with linear scales for each axis, rendering each university as a closed path. Interactivity includes a clickable legend that toggles visibility, mouseover highlighting that emphasizes a selected institution, and a D3.js color scheme. The chart leverages d3.scaleLinear, d3.line for path generation, and d3.axisLeft/axisBottom for axes, with data loaded from a CSV file.

86% match

Radar Chart

This radar chart visualizes institutional characteristics across four axes: total enrollment, endowment per student, annual R&D expenditure, and undergraduate selectivity. Each social media presence is represented as a colored polygon, with interactive legend items and hover highlighting to isolate specific platforms. Users can click legend entries to toggle visibility. Built with D3 v7, the visualization uses scaleLinear for axes, line for path construction, and custom event handlers for mouseover interactions, fetching data from a remote CSV source.

85% match

Example themeriver

This stacked bar chart displays the performance of twelve universities across five teaching, research, and outreach metrics, with bars sorted by total score. A checkbox enables sorting values, though it is disabled in the code. The visualization uses D3.js v3 with ordinal and linear scales, SVG rendering, and axis components. Mouseover interactions highlight individual segments and display tooltips with metric names and values. Data comes from the provided college.csv file, which is loaded via d3.csv.

黃黃歆善

73% match

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart displays the distribution of student enrollment across ten prominent universities, with each slice labeled and color-coded. Hovering over a slice reveals the percentage of total students it represents via a tooltip. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a custom color range from `d3-scale-chromatic`, while rendering SVG elements and tooltip interactions are managed through D3 selections. Data is loaded from a CSV file.

Hharika-1929

test2024

This visualization displays university rankings from a CSV dataset as an interactive stacked bar chart. Users can sort universities by overall score or individual performance metrics, and choose ascending or descending order using dropdown menus. The chart renders with D3.js v4, using `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. The bars stack five score components—teaching, research, citations, industry income, and international outlook—using D3's stack API, with SVG rendering for the final output.

Ddaniel

Radar Chart Interaction

This example presents an interactive radar chart comparing social media platforms across four dimensions (Community, Self-expression, Discovery, and Agency), with data loaded from a CSV file. The visualization uses d3.line and d3.scaleLinear to render each platform’s polygon, with d3.axisLeft and d3.axisBottom for the axes. Hovering over a shape or legend item highlights the corresponding element using CSS classes, while clicking a legend item toggles the visibility of its radar shape. The implementation leverages D3’s selection.on for event handling and d3.group for data aggregation.

Vvinodreddysagam929@gmail.com

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes university rankings across multiple countries, cycling through four metrics: Research Environment, Students to Staff Ratio, Research Quality, and Industry Impact. Built with D3 v3, the chart uses distinct SVG symbols (star, square, circle) to represent different data dimensions, with axes updating every two seconds as the metric changes. The visualization leverages a reusable chart pattern, where the scatter plot component is separated into its own module and accepts configurable setters for data binding and scales.