Abhijit Roy

@abhijitroynits·14 public vizzes

Bowl of Fruit - General Update Pattern - Nested Transition and Singular Element

Five fruits enter a bowl as apples, then a sequence of updates removes, replaces, and filters them, demonstrating the general update pattern with nested transitions on singular elements. Rendered as SVG, the code uses d3-selection’s `enter`, `merge`, and `exit` methods, along with `scaleOrdinal` for color and radius, to show how data joins handle dynamic changes while preserving a static bowl background.

May 15, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for D3 data joins by showing a bowl of fruit where apples and lemons appear, change type, and disappear over time. Using D3 v5 with SVG and animated transitions, it binds fruit objects to circles, keyed by unique ID, and handles entering, updating, and exiting elements with `transition().duration(1000)`. The code employs `scaleOrdinal` for color and radius mapping, while timed `setTimeout` calls trigger mutations to the data array, illustrating how enter, merge, and exit selections manage dynamic visual updates.

May 15, 2020

Loading thumbnail…

Cars Report

This example shows a simple text-based report of cars under a specified price, displayed in a large-font preformatted area. It demonstrates working with JavaScript objects, arrays, modules, and Promises. The code uses `JSON.parse` on an inline car dataset, a `setTimeout`-based `getCars()` Promise to simulate async data, and `Array.filter` with `Array.map` to generate formatted lines via `formatCar`. The final report updates the DOM element’s textContent after a two-second delay.

May 15, 2020

Loading thumbnail…

San Fransisco Temperature Area Chart

This area chart displays hourly temperature readings in degrees Fahrenheit for San Francisco over one week in May 2020. The visualization uses D3.js v5 to render an SVG path with a smoothed curve, mapping timestamps to a time scale on the x-axis and temperatures to a linear scale on the y-axis. The chart includes axis labels, grid lines, and a title, with the data sourced from a CSV file obtained from meteoblue’s weather archive. The area fill and styling are defined via CSS classes.

May 15, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from 1950 to 2020 using data from the United Nations World Population Prospects 2019. The filled path, rendered with the d3.area generator and curveBasis smoothing, shows population rising steadily from under 3 billion to nearly 8 billion. The SVG chart uses d3.scaleTime and d3.scaleLinear for axes, with custom tick formatting converting millions to billions. Both axes include labeled ticks and gridlines, while the yellow area fill highlights the overall upward trend.

May 15, 2020

Loading thumbnail…

Temperatures in San Fransisco Line Chart

The chart displays hourly temperature readings in San Francisco across one week, encoded as a smooth line path using D3’s `d3.line` with a basis curve. Time and temperature values map to scales (`d3.scaleTime`, `d3.scaleLinear`), with axes generated by `d3.axisBottom` and `d3.axisLeft`. Data comes from a CSV of weather archive exports, referenced via `d3.csv` and parsed into `Date` objects, rendered as SVG in a styled line chart.

May 15, 2020

Loading thumbnail…

Temperatures in San Fransisco Scatter Plot

This scatter plot visualizes hourly temperature readings in San Francisco over one week, using a time-based x-axis and a temperature-based y-axis. Built with D3 v5 and SVG rendering, the visualization encodes each data point as a steelblue circle, with labeled axes and a title to guide interpretation. The data comes from a CSV file containing timestamps and Fahrenheit temperatures. The code implements scales via `scaleTime` and `scaleLinear`, and it constructs grid lines and tick labels using `axisBottom` and `axisLeft`, with margins and an inner plotting area for clear layout.

May 15, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The SVG rendering uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.csv to load the data. Red semi-transparent circles represent individual car models, with gridlines and axis labels generated via d3’s axis methods.

May 14, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2019. Each circle’s vertical position corresponds to a country, while its horizontal position reflects population size on a linear scale. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles and gridlines, with tick labels formatted in billions.

May 14, 2020

Loading thumbnail…

Customizing Axes

This example shows a bar chart of the 2018 population estimates for the top 10 most populous countries, with a horizontal layout so country names are clearly readable. The code uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to structure the visualization. It customizes the x-axis tick labels to abbreviate large numbers (e.g., converting 'G' to 'B' for billions) and adds grid lines via the `tickSize` option. Data is loaded from a CSV file using `d3.csv`.

May 14, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the world’s ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values to horizontal bar lengths and country names to vertical positions. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The chart includes left and bottom axes generated with `d3.axisLeft` and `d3.axisBottom`.

May 14, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow cartoon face from basic SVG shapes, including circles for eyes and a mouth, rectangles for eyebrows, and an arc for the smile. The face is centered within a red background, and the eyebrows animate upward and then back down using chained `transition.duration` calls. The code uses D3 v5’s `select`, `arc`, and transition methods to construct and animate the SVG.

May 13, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered with CSS styling, including circles, rectangles, lines, and a path. The shapes are drawn with SVG elements such as `circle`, `rect`, `line`, and `path`, using attributes like `fill`, `stroke`, and `stroke-width`. A `transform` attribute scales the entire group, while nested groups apply translations and inherit styles. The HTML includes an inline SVG with a viewBox of 960 by 500, and the external stylesheet defines classes like `.lines` to apply stroke properties globally. No JavaScript or external data is used.

May 13, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple list of used cars with prices, highlighting the 2012 Nissan Leaf in red. It uses plain HTML with a linked stylesheet to apply large monospace typography and the red highlight class. The page includes an empty element that is populated via JavaScript, where the code imports a `cars` array from a `cars` module and assigns a static text message. The visualization relies on basic DOM manipulation through `document.getElementById` rather than any charting or rendering libraries.

May 13, 2020