M

Mithun Ghosh

@Mithunprom·20 public vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the 2018 population estimates for the top 10 most populous countries, sourced from the United Nations World Population Prospects 2017. It showcases customized D3 v5 axes, including a formatted bottom axis that converts large numbers into abbreviated units (e.g., ‘B’ for billions) and removes unnecessary tick lines. The left categorical axis is cleaned of its domain and tick lines, while custom labels and titles are styled via CSS. The visualization uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG.

Loading thumbnail…

Outbreaks

This visualization shows the total number of illnesses from national disease outbreaks, aggregated by month and colored by the primary transmission mode. The bar chart, built with Vega-Lite and rendered through the vega-lite-api, uses d3.csv to load the outbreak dataset from a GitHub gist. Each bar represents a month, with height proportional to the summed illness count, while color distinguishes transmission categories such as foodborne or person-to-person. The view automatically fits the full browser window, with customized axis styling and tooltips for interactivity.

Loading thumbnail…

Missing Migrants Date Histogram

This visualization presents a date histogram of the monthly sum of dead and missing migrants, using data from the Missing Migrants Dataset. It displays the total count per month on the y-axis against time on the x-axis. The implementation uses React with D3 v5, employing `d3.bin` to bin the data by month and `d3.sum` to aggregate the totals. The SVG rendering includes axes and rectangular marks with tooltips, all styled with the Poppins font.

Loading thumbnail…

World Population: Area Chart

This area chart visualizes global population trends over time, using a maroon-filled path to represent the changing values. The visualization loads CSV data from a VizHub dataset and renders it as an SVG, with a time-scaled x-axis and linear y-axis. The code employs D3 v5’s `area` generator, `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` to construct the chart, while custom tick formatting converts large numbers to billions. Gridlines and axis labels enhance readability, and the title sits centered above the plot.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data (in degrees Celsius) for San Francisco, drawn from the "Data Canvas - Sense Your City" dataset. The visualization uses a smooth, basis-curved line to connect the temperature readings over time. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and `line` with `curveBasis` to render the path. The SVG output includes labeled axes, a title, and grid lines, with styling applied via an external CSS file.

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 Data Set. Red, semi-transparent circles represent individual vehicles, with title and axis labels clarifying the comparison. The visualization uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` APIs to load data, scale coordinates, and render SVG axes. Gridlines derive from axis tick sizes, while the code parses all numeric fields before drawing.

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. It demonstrates D3 axis customization, including formatted tick labels that convert large numbers to abbreviations and styled gridlines. The code uses d3.csv to load data, scaleLinear and scaleBand for scales, and axisLeft and axisBottom for axes. Bars are rendered as SVG rectangles, with a title and axis label added via text elements.

Loading thumbnail…

Starting with Bar Chart

This example shows a minimal bar chart where each person’s weight from a CSV file is drawn as a rectangle, though all bars use a fixed width and height rather than encoding the data values. The visualization loads data.csv with D3’s `csv` method, converts the weight strings to numbers, and appends `rect` elements to an SVG. The code uses D3 v6’s `select`, `csv`, and data joins via `selectAll('rect').data().enter().append()`, with no scales or axes, leaving all rectangles identical.

Loading thumbnail…

Responding to Resize

This example demonstrates how an SVG visualization can respond to browser resizing by redrawing its content to fill the available viewport. It extracts the container’s client width and height, then uses those values to set the SVG element’s dimensions and draw two diagonal lines forming an X shape. The code uses d3.select to append the SVG, d3’s data join with merge to update existing line elements, and a window resize event listener that triggers the redraw function. The green, semi-transparent strokes scale proportionally with the window.

Loading thumbnail…

Customizing Axes

This bar chart displays the 2018 population estimates for the top 10 most populous countries, sourced from the United Nations World Population Prospects 2017. It showcases customized D3 v5 axes, including a formatted bottom axis that converts large numbers into abbreviated units (e.g., ‘B’ for billions) and removes unnecessary tick lines. The left categorical axis is cleaned of its domain and tick lines, while custom labels and titles are styled via CSS. The visualization uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG.

Loading thumbnail…

Responding to Resize

This example demonstrates how an SVG visualization can respond to browser resizing by redrawing its content to fill the available viewport. It extracts the container’s client width and height, then uses those values to set the SVG element’s dimensions and draw two diagonal lines forming an X shape. The code uses d3.select to append the SVG, d3’s data join with merge to update existing line elements, and a window resize event listener that triggers the redraw function. The green, semi-transparent strokes scale proportionally with the window.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circular eyes, rectangular eyebrows, and an arc-based mouth. The face demonstrates fundamental DOM manipulation and animation through D3's `select`, `append`, and `transition` methods. The eyebrows move up and down repeatedly via chained `transition().duration(2000)` calls, translating the eyebrow group vertically while the rest of the face remains static. The example uses `d3.arc` to generate the mouth path and positions all elements relative to the SVG's center.

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black outlines forms a face, complete with two black eyes, rectangular eyebrows, and a curved mouth path. The example demonstrates basic SVG shape construction using D3.js v6 within a React framework. It positions a central group via translation, then appends `circle`, `rect`, and `path` elements, with the mouth generated using the `d3.arc` generator with specified inner and outer radii and start/end angles, all rendered within an SVG container.

Loading thumbnail…

HTML Cars Report

This example shows a JavaScript-driven car report that filters a hardcoded JSON dataset of five vehicles by price and displays the results as formatted text. It demonstrates modular code organization with `formatCar.js` and `generateReport.js` using ES6 module exports and imports, while `getCars.js` simulates asynchronous data fetching via a `Promise` with a two-second delay. The page also embeds an SVG scene with circles, rectangles, and a line, styled inline via HTML and CSS, though the report text itself is not visually rendered.

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple HTML cars report that displays vehicle details, including year, make, model, and price, for cars under a specified price threshold. It showcases JavaScript object handling, array filtering, and modular code organization. The application uses the `getCars()` function to simulate an asynchronous data source with a two-second delay, then processes the data through `generateReport()` and `formatCar()`. Results are rendered into the DOM via `document.getElementById().textContent`, with the page initially showing a “Loading...” message. The report lists filtered car entries in plain text format.

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple asynchronous report that filters a hardcoded JSON array of used cars by price and displays the results as text on a webpage. It shows a loading message initially, then after a simulated two-second delay, the filtered list of cars under $2000 appears. The code uses JavaScript modules with `export` and `import` statements, including `getCars()` which returns a Promise via `setTimeout`, `generateReport()` which chains `filter()` and `map()`, and `formatCar()` for string formatting. The DOM is updated using `document.getElementById` to change the text content of a message element.

Loading thumbnail…

Cars Report

This example shows a simple text-based car report that filters a list of cars by price and displays the results in a browser. It initially shows a loading message, then after a two-second delay, it lists all cars priced under $2,000 using a formatted string. The code uses JavaScript's native `JSON.parse` to read car data, a custom Promise-based `getCars` function to simulate asynchronous loading, and ES6 module imports/exports with `formatCar` and `generateReport` to handle filtering and formatting. The final output appears in an HTML `<pre>` element via the browser’s Document Object Model.

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, filtering the dataset to show only vehicles priced under $3,000 and formatting each entry as a single line with year, make, model, and price. It uses JavaScript modules to separate data handling, formatting, and report generation, with the `cars` array parsed from a JSON string and exported for reuse. The `generateReport` function chains `filter`, `map`, and `join` to produce the output, which is then inserted into the DOM via `textContent` in an HTML page.

Loading thumbnail…

HTML Starter

An HTML starter example demonstrates how to create a minimal web page using plain HTML, CSS, and JavaScript. The page displays the text "Hello HTML" centered with a large font size, while the embedded script logs "Hello JavaScript!" to the browser's developer console. The code uses the standard DOM `console.log` API for output and CSS `text-align` with `font-size` for styling. This serves as a bare-bones foundation for web development, showing basic document structure and scripting without external libraries.

Loading thumbnail…

Cars Report

This example presents a simple "Cars Report" page that displays the text "Hello HTML" in large, centered type using CSS. The page is built with React and includes a basic HTML file that loads a JavaScript bundle. The code demonstrates the integration of HTML and CSS with JavaScript, logging "Hello JavaScript!" to the browser’s developer console. No data visualization or external libraries are used; the example focuses on the foundational structure of a React-based web application.