sohum42

@sohum42·6 public vizzes

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations population estimates. The visualization uses D3 v5 to create scaled bars and customized axes, with the x-axis formatted to abbreviate large numbers (e.g., "G" replaced with "B" for billions). The chart loads data from a CSV file, scales the population values by 1000, and renders the result as SVG. Both the y-axis labels and the title are styled through CSS, while grid lines extend across the plot area using the `axisBottom` and `axisLeft` APIs.

Jan 29, 2022

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with data loaded from a CSV file. The chart features a custom tick formatter that converts large numbers to abbreviated units and includes axis labels and a title. The `svg` elements are rendered with a `steelblue` fill, demonstrating a basic D3 bar chart with customized axes and styling.

Jan 23, 2022

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for SVG elements in D3 v5, showing how a bowl of fruit changes as apples are eaten or replaced by lemons. Three distinct update scenarios occur sequentially: removing the last apple, changing an apple’s type to lemon, and filtering out an apple from the middle. The `fruitBowl` function uses D3’s `selectAll` and `.merge` with ordinal scales for color and radius to handle entering, updating, and exiting groups. The underlying code uses `d3.select` and `d3.range` to manage the data array, while SVG `rect` and `circle` elements are re-rendered at each timeout-driven step.

Jan 2, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, comparing horsepower against weight for individual car models. Red semi-transparent circles represent each car, with a title and labeled axes for clarity. The visualization uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft to draw the axes alongside gridlines, all rendered as SVG elements within a 960 by 500 pixel canvas. Axis labels and the chart title are added as text elements with styling from CSS.

Jan 2, 2022

Loading thumbnail…

Making a Bar Chart Tutorial

This tutorial demonstrates how to build a simple bar chart from a CSV file containing country population data. The code loads the data with `d3.csv`, converts the population values to numbers, and logs the parsed dataset to the console. The HTML page includes an SVG element and loads D3 v5 from a CDN, though the chart itself is not yet rendered in the provided code. The example focuses on the foundational steps of data loading and transformation using D3's `select` and `csv` methods.

Jan 1, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with two eyes, animated eyebrows, and an arched mouth, all drawn in SVG. The eyebrows move up and down repeatedly using chained D3 transitions. The code builds the face by appending SVG elements to a group, using D3 v5's `select`, `attr`, and `arc` for the mouth path, with an implicit data-join-free DOM construction.

Jan 1, 2022