B

Braja Gopal Das

@Braja123·17 public vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using data from the United Nations’ 2018 World Population Prospects estimate. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG bars, with a custom tick format that abbreviates large numbers and removes grid lines. The y-axis labels are the country names, and the title and axis label are added via SVG text elements. Population values are parsed from a CSV file and multiplied by 1,000 before scaling.

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations population estimates, with population values multiplied by 1000. It emphasizes customizing D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a linear scale with custom tick formatting that removes gridlines and adds a labeled axis. Built with d3 v5, it uses scaleLinear, scaleBand, axisLeft, and axisBottom, rendered as SVG with a steel blue fill for bars.

Loading thumbnail…

Customizing Axes

This donut chart displays browser usage statistics from January 2017, showing the market share percentages for Chrome, IE/Edge, Firefox, Safari, and Opera. The visualization uses a D3 v5 pie layout and arc generator to create the chart, with an ordinal color scale assigning distinct colors to each browser category. Labels are positioned using the arc centroid method, and the chart is rendered as SVG within an HTML page, styled with custom CSS for the title and text elements.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built entirely with D3.js that animates its eyebrows up and down. It demonstrates fundamental DOM manipulation by constructing SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas. The animation uses D3’s `transition()` method to move the eyebrow group between two vertical positions over two-second intervals. The code relies on D3 v5’s `select`, `arc`, and `transition` APIs to create the static face and its looping eyebrow motion.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. Each bar’s length is scaled linearly to population values, while country names are positioned along a band scale. The chart is rendered as SVG using D3 v5, with axes generated through `d3.axisLeft` and `d3.axisBottom`, and data loaded via `d3.csv`. Grid lines and axis labels are formatted using `d3.format`.

Loading thumbnail…

Customizing Axes

This example shows a scatterplot of vehicle weight versus horsepower for the top 10 most populous countries, using data from an auto-mpg dataset loaded via `d3.csv`. The visualization emphasizes customizable axes: the y-axis is rotated with custom text, while the x-axis uses `d3.format('.3s')` for abbreviated labels. Both axes include extended tick lines and removed domains, created with `d3.axisLeft` and `d3.axisBottom`. Circles are rendered as SVG elements positioned by `d3.scaleLinear` scales with `.nice()` padding.

Loading thumbnail…

Making a Bar Chart

This scatterplot displays the relationship between vehicle weight and horsepower for a sample of automobiles. The data comes from the `auto-mpg.csv` dataset, loaded via D3’s `csv` function. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, while circles represent each data point. The chart is rendered as an SVG, with axis labels and a title styled through the accompanying CSS file.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The code loads data from a CSV and renders circles positioned by a linear scale for population and a point scale for country names. It uses d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom, with a custom margin and tick formatting. The SVG output includes labeled axes and a title.

Loading thumbnail…

Let's make a face with D3.js!

This example shows how to build a simple face using SVG elements and D3.js. The code selects an SVG container and dynamically constructs the facial features, while the accompanying README includes an embedded YouTube tutorial. It uses D3 v5’s `select` method to target the `svg` element, with the page rendering at a fixed 960×500 size and hidden overflow via CSS. The visualization demonstrates basic SVG drawing capabilities within a D3 framework.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. The visualization employs d3.scaleLinear for the x-axis and d3.scalePoint for the y-axis, with data loaded via d3.csv from a local CSV file. Circles represent each country’s population, with axes rendered using d3.axisLeft and d3.axisBottom, including gridlines and formatted tick labels. The SVG output is styled with opacity and steelblue fills for the circles.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 to load data from a CSV file via `d3.csv` and render a bar chart in SVG, with steel-blue bars and axis labels styled through CSS. The accompanying video tutorial demonstrates the process of building the chart from scratch.

Loading thumbnail…

Making a Bar Chart

This bar chart ranks the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The population data from a CSV file is scaled on a linear axis, with country names placed along an ordinal point scale. Using D3 v5, the code loads the data with `d3.csv`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws steel-blue circles for each bar. Gridlines are extended through the chart area, and the visualization is output as SVG with formatted tick labels.

Loading thumbnail…

Making a Bar Chart

This bar chart displays hourly temperature forecasts from a weather API, with bars representing temperatures over a 40-hour period. The visualization animates bars growing from the bottom using D3 v5 transitions with a bounce ease, while hover interactions highlight bars in yellow and show tooltips with exact values. Colors transition from white through blue to red based on temperature ranges using a linear scale. The chart pulls data from a local `forecast.json` file and renders as an SVG.

Loading thumbnail…

Making a Bar Chart

This example shows a scatterplot of automobile data, mapping each car’s horsepower on the x-axis and its weight on the y-axis, with a title and labeled axes. It uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs, loading CSV data via `d3.csv` from a VizHub dataset. The SVG render draws red, semi-transparent circles for each car, with margins, tick marks, and custom text labels styled via CSS. The code explicitly parses numeric columns before rendering.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations, with bars scaled to population size and country names on the y-axis. Using d3.csv to load data.csv, it parses population values as numbers, then applies d3.scaleLinear and d3.scaleBand for positioning. The chart renders in SVG, with d3.axisLeft and d3.axisBottom generating labeled axes and tick formatting via d3.format('.3s') for compact labels. Rect elements are appended and sized using the scales, with steelblue fill from CSS.

Loading thumbnail…

Shapes with SVG and CSS

This example constructs a cartoon-like face from basic SVG shapes, including a large red circle, two smaller eyes, and a mouth drawn as an arc path. The visualization uses D3 v5 selection methods and the `d3.arc` generator to define the mouth’s geometry, while CSS sets a black background and removes page margins. Shapes are positioned and scaled dynamically based on the SVG’s width and height attributes.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS and inline attributes. It shows how SVG elements inherit properties like fill and stroke from parent `<g>` groups and how CSS classes target specific elements, such as the `.lines` class, to apply stroke width and line-join styles. The graphic uses a coordinate system transformed by `scale` and `translate` operations to position shapes, rendering directly in the browser via SVG markup within an HTML file.