remyapk

@remyapk·13 public vizzes

using dropdownlist

This example shows average student attendance for university modules as an animated bar chart, with hover interactions that highlight bars and display their precise values. The chart loads data from a CSV file and renders it as SVG using D3 v4. It uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and transitions with `ease(d3.easeLinear)` to animate bar growth on load. Mouseover and mouseout handlers modify bar dimensions, add a temporary text label, and apply CSS classes for styling.

Apr 1, 2020

Loading thumbnail…

Average Attendance for each module

This bar chart displays the average attendance percentage for each university module, using data from a CSV file. The visualization is built with D3.js v4 and renders as an SVG, with bars animating into place via a transition. Each module is labeled on the x-axis, while the y-axis shows percentages. Hovering over a bar triggers a mouseover event that highlights it in orange, enlarges it, and displays its exact value as a text label.

Apr 1, 2020

Loading thumbnail…

Average Attendance for each module

This bar chart displays the average attendance percentage for each module, with bars colored steelblue and one highlighted in orange. It uses d3.v4 to bind data from attend_data.csv to SVG rect elements within a 600×500 viewport. The x-axis maps module codes while the y-axis encodes attendance values, with margins set via a margin object. The chart reads from a preprocessed CSV and renders statically without transitions or interactive features.

Apr 1, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst visualizes the hierarchical structure of the Flare dataset, with arcs sized by value and colored by top-level category. Clicking a node animates a zoom to that branch of the hierarchy. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute layout and paths, with `transition.attrTween` for smooth animated updates. Data originates from the `@observablehq/flare` module, rendered as SVG with rotating labels.

Mar 30, 2020

Loading thumbnail…

d3 Updating Bar Chart With Dropdown

The visualization displays a bar chart of nutritional values for cereals, sourced from the cereals.csv dataset. A dropdown menu lets the user select a specific cereal, which triggers the chart to update its bars with that cereal's data. The code uses d3.csv to load data, d3.scale.ordinal and d3.scale.linear for axes, and d3.svg.axis for rendering. Bars update via a transition over 250 milliseconds, with the y-axis domain recalculated using d3.extent.

Mar 30, 2020

Loading thumbnail…

d3 Updating Bar Chart With Dropdown

Mar 27, 2020

Loading thumbnail…

visualizing data

A simple bar chart displays four data values as green rectangles, encoding each number through bar width while the y-axis positions them vertically. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleLinear` to map data values to pixel widths and `d3.axisBottom` to generate a horizontal axis. The `enter()` selection appends rectangles with fixed heights, while static data is passed directly to `d3.selectAll`. The chart demonstrates basic D3 data binding and axis creation without interaction or animation.

Mar 20, 2020

Loading thumbnail…

Loading external data

This example demonstrates loading external data from a JSON file and rendering it as a horizontal bar chart. The data contains employee names, titles, ages, and bonus statuses, with age plotted against name using D3 v4’s `d3.json` to fetch the file. Scales `d3.scaleLinear` and `d3.scaleBand` position the bars, while `d3.axisLeft` and `d3.axisBottom` generate axes. The SVG output is styled with hover effects in CSS, and the chart updates once data is loaded asynchronously.

Mar 13, 2020

Loading thumbnail…

Barchart using csv

This example presents a horizontal bar chart of country populations, with each bar’s length corresponding to its population value from a CSV file. Using D3 v4, it loads `data.csv` with `d3.csv` and renders SVG rectangles, scaled linearly on the x-axis and banded on the y-axis. The chart displays axes via `d3.axisLeft` and `d3.axisBottom`, applies margins through a translated group, and styles bars blue via CSS.

Mar 13, 2020

Loading thumbnail…

Creating a face with SVG

This example draws a simple smiling face using SVG shapes. It creates a yellow circle for the head, two black circles for eyes, and an arc for the mouth, all rendered on a red background. The code uses D3 v4’s `select` and `arc` APIs to append and style the SVG elements, with fixed pixel dimensions for the viewport and explicit coordinates for each feature. The mouth is generated via the `d3.arc()` path generator with an inner and outer radius.

Mar 11, 2020

Loading thumbnail…

Bubble chart

Six unlabeled circles of varying radii float on a blank SVG canvas, with each bubble’s fill color mapped from its radius via a custom `colourPicker` function. The code uses D3 v4’s data join (`selectAll`, `data`, `enter`) to append `circle` elements, positioning them with fixed `cx` and inverted `cy` values from a hardcoded dataset. The y-axis is flipped by subtracting each `cy` from the chart height. Rendering is pure SVG, with no axes, transitions, or interactivity.

Mar 10, 2020

Loading thumbnail…

HTML Starter

This example displays two animated line charts comparing "Away" and "Home" values across eight time points, with interactive hover effects that highlight lines and reveal individual data points. The visualization uses D3 v5 scales (d3.scaleLinear), axes, and line generators to render SVG paths, with circles marking each value. The code also incorporates React as the framework and includes smooth transitions and hover tooltips that display numeric values.

Mar 1, 2020

Loading thumbnail…

HTML Car Report

This example presents a static car report titled “Cars Report,” displaying a simple list of three vehicle names: Maruti Swift, Chevrolet Tavera, and Audi A5. The page uses plain HTML with an unordered list, where the first item is visually highlighted via a CSS class. Styling is handled by a linked stylesheet that sets the font size and family using standard CSS properties. The visualization relies solely on HTML structure and CSS rules, with no JavaScript libraries or data-fetching mechanisms involved.

Feb 23, 2020