Gaurav-Adlakha

@Gaurav-Adlakha·6 public vizzes

Barchart met RDW Data v6

Three bar charts of synthetic categorical data react to two toggle buttons labeled "Taxis" and "Personenautos." Clicking either button triggers an animated update that linearly transitions the bar heights over one second, swapping between the two predefined datasets. The visualization uses D3 v5, building the SVG with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`, while a custom `update` function leverages `.transition().duration()` to smoothly change rectangle geometries.

Nov 19, 2020

Loading thumbnail…

Barchart met RDW Data v6

Two interactive bar charts present data for three groups (A, B, C) across two datasets. Users switch between the "Taxis" and "Personenautos" datasets via buttons, triggering a smooth transition animation that updates the bar heights. Built with D3 v5, the visualization uses `d3.scaleBand` and `d3.scaleLinear` for axes, while the `transition()` method animates rectangle attributes over one second. SVG rendering handles the graphics, and the update function leverages D3's enter/merge/exit pattern to efficiently redraw bars.

Nov 19, 2020

Loading thumbnail…

Making a Bar Chart

This example demonstrates a static bar chart created with D3.js (v5) using the SVG rendering approach. The visualization reads population data from a CSV file, parsing the numeric values before rendering. Although the code sets up an SVG canvas of 960×500 pixels and appends rectangle elements with fixed width and height attributes, the chart appears as a non-functional placeholder since the bars are all sized uniformly at 300×300 pixels. The implementation relies on D3's `select` and `csv` functions to manage the SVG element and load the data.

Nov 19, 2020

Loading thumbnail…

Let's make face with d3

A stylized yellow face is drawn with D3.js in an SVG, using geometric shapes for the eyes, eyebrows, and an arc-based mouth. The eyebrows animate upward and downward via a chained `transition().duration(2000)` sequence on the group’s `transform` attribute. Eye and eyebrow positions are derived from constants like `eyeSpacing` and `eyeYOffset`, while the face circle scales to the SVG’s height. The code relies on `select`, `append`, and the `arc` generator from D3 v6.

Nov 19, 2020

Loading thumbnail…

Shapes with SVG and CCS

This example demonstrates how to draw and style basic SVG shapes—circles, rectangles, lines, and paths—using Cascading Style Sheets (CSS). It showcases default styling, inline presentation attributes, and CSS classes to control fill colors, strokes, and stroke widths on primitive geometric elements. The visualization uses a static SVG canvas with no external data, relying solely on two files: an HTML document and a separate stylesheet. The code exemplifies SVG's native coordinate system and transform groups to position and scale the drawn shapes.

Nov 18, 2020

Loading thumbnail…

Cars Report

This example displays a simple text report of cars whose price falls below a user-defined maximum, formatted as a list of year, make, model, and price lines. It demonstrates asynchronous data retrieval with a Promise-based `getCars` function (using `setTimeout` to simulate a delay), and modular JavaScript with ES6 imports and exports. The report is generated by filtering an in-memory JSON array, mapping each car through the exported `formatCar` function, and joining the results with line breaks before updating the DOM’s `textContent`. The initial “Loading...” message is replaced once the promise resolves.

Nov 18, 2020