Skip to main content
Log in
N

nifemi-sys

@nifemi-sys·14 public vizzes

Loading thumbnail…

d3 Updating Bar Chart With Dropdown

This interactive bar chart displays nutritional values for various cereals from a CSV dataset, with a dropdown menu to switch between cereals. The visualization uses d3.v3 to render SVG bars and axes, updating the y-axis scale and animating bar heights via `transition()` when the selection changes. Each cereal shows nine nutrition fields, with bar lengths reflecting the selected nutrient amounts.

May 20, 2020
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays module code marks from a CSV file, with bars extending from the x-axis to show each module’s score. It uses d3.scaleLinear and d3.scaleBand for positioning, d3.axisLeft and d3.axisBottom for custom axes, and d3.format for tick labels. The y-axis gridlines are removed, while the x-axis title is added as custom text.

May 17, 2020
Loading thumbnail…

Example

This interactive bar chart shows the enrollment numbers for various courses across 12 modules, with each bar color-coded by module code. Hovering over a bar displays a tooltip with the specific module, course, and enrollment count. The visualization uses a stacked bar layout implemented with D3.js, including `d3.layout.stack`, `d3.svg.axis`, and `d3.legend`, with data loaded from a CSV file. Animated transitions and hover-based highlighting of individual module series are supported through D3's data join and event handling.

May 17, 2020
Loading thumbnail…

D3

This example visualizes student attendance records, differentiating by gender and course, with statuses like present, absent, and partial. It uses the D3.js library to load CSV data via `d3.csv` and renders the visualization using the Chart.js library with a horizontal bar chart type. The SVG element on the page is present but not actively used for rendering.

May 16, 2020
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

A stacked bar chart visualizes the number of student attendance records (by status like Present, Absent, or Pending) for each course code, broken down across different days of the week. The chart uses D3.js with the `d3.layout.stack` API to create stacked layers, an ordinal x-scale for day numbers, and a linear y-scale for counts. SVG rendering displays the bars, while a color legend and hover tooltip (via `d3-tip`) allow filtering and inspection of specific attendance statuses. The data originates from a CSV file containing student course attendance logs.

May 15, 2020
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart displays the sum of sales for various sub-categories (like Accessories, Binders, Phones) grouped by market segment (Consumer, Corporate, Home Office). The visualization uses a responsive layout with overlaid bar groups and a color legend that filters the foreground bars on hover via an overlay mechanism. Built with D3.js (v3.5.5), it uses `d3.layout.stack` for the layered bar construction, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips showing the exact sales value per sub-category within a segment. Data is loaded from CSV files containing pre-aggregated sales totals.

May 15, 2020
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates. It highlights customization of D3 axes, including removing the domain lines and tick marks on the left axis, formatting bottom axis tick labels with `d3.format` to abbreviate values, and adding a custom axis label. The chart uses `d3.scaleLinear` and `d3.scaleBand` with SVG rendering.

May 14, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations’ World Population Prospects. The visualization emphasizes customization of D3 axes by removing default domain lines, applying custom tick formatting with the `format` function, and adding descriptive labels. Built with D3 v5 and SVG, it uses `scaleLinear` and `scaleBand` for positioning, while `axisLeft` and `axisBottom` render the axes with modified tick sizes and styles. Population values are multiplied by 1,000 from the CSV data.

May 14, 2020
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This visualization displays stacked bar charts of general project funding items in 2018, categorized by academic department and institution type (schools, research institutes, others). The bars show total items per department, segmented by institution type using color-encoded layers. Hovering over legend entries highlights specific institution types while dimming others, and tooltips reveal exact values. The visualization is built with D3.js, using d3.layout.stack for stacking, d3.scale.ordinal for the categorical y-axis, and d3.legend for the interactive color legend. The data comes from items1(3).csv, and the rendering uses SVG with hover-based animations.

May 14, 2020
Loading thumbnail…

Untitled

This visualization shows the average grade for each module as a bar chart. The bars are colored steel blue and transition sequentially into place. Hovering over a bar highlights it in orange, temporarily expands it, and displays a label with the corresponding mark. The code uses d3.csv to load module data and d3.scaleBand with d3.scaleLinear to map the axes, while d3 transitions add animation to the initial render and hover interactions.

May 14, 2020
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

A stacked bar chart displays attendance records by module, day, and course code, with bar segments colored by course and the legend enabling filtering. The visualization, built with D3.js version 3.5.5, uses `d3.layout.stack` for the stacked bars, `d3.scale.ordinal` for the x-axis, and `d3.legend.color` for the interactive legend that highlights segments on hover. Data is sourced from `attendence.csv`, with tooltips provided via `d3-tip`.

May 14, 2020
Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart shows deaths by cause, broken down across age ranges, with radio buttons to toggle between raw counts and percentages. Built with D3.js, it uses `d3.layout.stack` for the stacked segments, `d3.scale.ordinal` for the x-axis, and transitions to animate between count and percent views. The legend and tooltip provide additional detail, while the data is loaded from a CSV file.

May 14, 2020
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart visualizes attendance data from `attendence.csv`, showing the number of items per course code (y-axis) across different days of the week (x-axis). The bars are segmented and colored by attendance status, such as present or absent, with a legend for filtering. The visualization is built with D3.js, using `d3.scale.ordinal()` for the x-axis, `d3.layout.stack()` for the stacked layers, and `d3.tip()` for tooltips. The colorScale uses `d3.scale.category10()`, and the chart is rendered as an SVG with animation support.

May 14, 2020
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking data, showing the x and y coordinates of mapped fixation points. A dropdown menu allows the user to filter the visualization by the status of the data entries. To create the chart, the code uses the D3.js library, specifically the `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` APIs within an SVG rendering. The image displayed as the background corresponds to the selected data grouping. Altered data is animated with circles transitioning to new positions using the `transition` API.

May 14, 2020