Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Mar 23, 2020

Created on Mar 23, 2020

Forked from Let's make a face with D3.js!

This horizontal bar chart displays student enrollment counts for various university module codes, sorted along the y-axis. The visualization uses the D3.js library (v5) to load data from a CSV file, map the module codes to a band scale on the y-axis, and the student counts to a linear scale on the x-axis. The chart renders as SVG rectangles, with blue bars representing the data, and includes labeled axes for "ModuleCode" and "Students".

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

A horizontal bar chart displays student enrollment across ten computer science courses, with purple bars sorted from highest to lowest by the number of enrolled students. The visualization uses D3.js v7’s `scaleLinear` and `scaleBand` to map enrollment counts and course names, while `axisLeft` and `axisBottom` generate the categorical and numerical axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes rotated axis labels for courses and enrollment counts.

MMeghanaArepalli

82% match

Loading thumbnail…

Untitled

This interactive line chart visualizes student enrollment counts across university modules, with a dropdown menu to select different module groups. It uses D3.js v4 with SVG rendering, mapping module codes on the x-axis and student numbers on the y-axis. The chart reads from a CSV file and employs a color scale from `d3-scale-chromatic`. When a user selects a new module, the line path transitions smoothly to display the updated values over one second.

KKeerthiKandadai

82% match

Loading thumbnail…

Stylized Bar Chart

This visualization presents a stylized horizontal bar chart that ranks academic modules by student enrollment numbers. A dropdown menu allows users to filter the displayed data by department codes (CSIS, CAM, GAV), though the implementation for this filtering is not shown in the core rendering logic. Built with React components and D3 v5, the chart uses `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the quantitative x-axis, rendering orange SVG rectangles within an 800x5000 pixel canvas. The data originates from a CSV file containing module codes and student counts.

KKeerthiKandadai

81% match

Loading thumbnail…

Let's make a face with D3.js!

A bar chart displays the CSV data with names on the y-axis and numeric values on the x-axis. The values are multiplied by one million before rendering. Using D3 v5, the code employs `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for axes, and `selectAll().data().enter()` to append SVG `rect` elements. The bars are styled with a steelblue fill, and the chart is drawn within an SVG with margins.

KKuerzibe

81% match

Loading thumbnail…

Bar Graph

This horizontal bar chart displays student enrollment counts for nine university courses, ranging from 20 to 85 students. Green rectangles represent enrollment figures on a linear scale, with subject names labeled along the y-axis. The visualization is drawn as an SVG using D3 v7, employing scaleLinear for the x-axis, scaleBand for categorizing the y-axis, and axisLeft/axisBottom for generating tick marks. Data loads from a CSV file containing course names and enrollment numbers, with the subject labels rotated vertically on the left.

PPavaniMangugari

80% match

Loading thumbnail…

Bar chart

This visualization uses D3.js to render a vertical bar chart of student grades, with each bar representing a module code from the provided CSV data. The chart uses a linear color scale to map grade values from steelblue to grey, while the x-axis displays the numeric grade and the y-axis lists module codes. SVG rendering with animated transitions brings the bars in over one second using D3’s `transition` and `easeLinear`. The axes are formatted using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`.

Kkalyanreddy997

79% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a bar chart of character names and their numeric values, encoded as steel-blue rectangles on an SVG canvas. Using D3 v5, it loads data from a CSV file and scales the values linearly, while a band scale positions the names along the vertical axis. The code leverages `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the axes and bars. The dataset is transformed by multiplying each value by 1000 before visualization.

KKuerzibe

79% match

Loading thumbnail…

Let's make a face using D3.js

This example visualizes a bar chart of country data from a CSV file, with horizontal bars representing lengths per country. The chart uses D3.js v5 to load the data, scales the lengths linearly, and positions the countries with a band scale. Rectangles are appended to an SVG container, with the chart area offset by margins. The code relies on D3’s `csv`, `scaleLinear`, `scaleBand`, and `select` APIs, and renders directly to SVG.

KKanishka33

79% match