T

tayyabanisar

@tayyabanisar·40 public vizzes

Loading thumbnail…

temp in sansfransice

This visualization displays the population of the top 10 most populous countries as circles arranged along a vertical axis, with circle positions encoding population magnitude on a linear scale. The chart uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scalePoint` for country placement, and `axisBottom` with a tick formatter to abbreviate large numbers. Data comes from the 2018 UN World Population estimates, loaded via `csv()`, with populations multiplied by 1000 for accurate scaling. Grid lines and styled ticks enhance readability.

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. Each red, semi-transparent circle represents a car, with its x-position scaled by horsepower and y-position by weight. Built with D3 v5, the visualization uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct axes and map data values to SVG coordinates. The code loads CSV data via `csv` and appends circles to an SVG element, with styling defined in an external stylesheet.

Loading thumbnail…

Scatterplot

This scatterplot displays the population of the top 10 most populous countries, with each circle’s position on the x-axis representing population count (scaled linearly) and its position on the y-axis representing country name via a point scale. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` functions. Data comes from a CSV file containing 2018 UN population estimates, and the chart includes gridlines and axis labels for clarity.

Loading thumbnail…

Scatterplot

This bar chart displays the top 10 most populous countries based on 2018 UN estimates. It uses d3.scaleLinear and d3.scaleBand to map population values and country names, with rectangles rendered in SVG. The code imports specific functions from d3.v5 including csv, axisLeft, axisBottom, and format, and applies tick formatting to abbreviate large numbers. Axes are customized with removed domain lines, colored tick labels, and an x-axis label, while data is loaded from a CSV file and multiplied by 1000 to represent actual population figures.

Loading thumbnail…

Customizing axis

This example displays the populations of the ten most populous countries using a horizontal bar chart. The y-axis labels are customized with a distinct color and the axis lines removed, while the x-axis uses tick marks that span the chart’s height and formats values in abbreviated notation via `format('.3s')`. Data is loaded from a CSV file and processed with `csv()`, then scaled using `scaleLinear` and `scaleBand` from D3 v5. The chart is rendered as SVG elements, with axis labels and bars styled through external CSS.

Loading thumbnail…

This is bar chart

This is a horizontal bar chart that displays the population of the top 10 most populous countries based on 2018 estimates from the UN World Population Prospects. The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and SVG rectangles to represent each country’s population value. The data is loaded from a CSV file using d3.csv, and axes are rendered with d3.axisLeft and d3.axisBottom.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values rendered as horizontal bars scaled by d3.scaleLinear and category positions via d3.scaleBand. The React and D3 v5 implementation uses SVG rendering, with custom AxisBottom, AxisLeft, and Marks components handling ticks, labels, and interactive tooltips through SVG <title> elements. Population values are formatted as billions using d3.format, and the chart is styled with the Poppins font and a teal color scheme.

Loading thumbnail…

making bar chart

This bar chart displays population counts for ten countries, with horizontal bars representing each nation’s population value. Using React and D3, the code loads data from a CSV file, applies a linear scale for bar widths and a band scale for country positions, then renders SVG rectangles. The D3 `csv` function parses the data, while `scaleLinear` and `scaleBand` determine the visual encoding.

Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using a stylized bar chart with a teal color scheme and Poppins font. It loads United Nations population data from a CSV file, transforms it with React hooks, and renders the visualization as SVG. The code uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate population values, with React managing the component structure and D3 handling the scales and tick generation.

Loading thumbnail…

making bar chart

This example shows a static horizontal bar chart ranking the populations of ten countries, with China and India clearly leading and Mexico at the lower end. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis, rendering bars via SVG `rect` elements with a simple fill color. The code loads the data from a CSV file using `d3.csv`, sorts the entries by population in descending order, and appends labels for each country name alongside its corresponding bar. No axes, gridlines, or interactive features are present, keeping the visualization minimal and focused on the raw values.

Loading thumbnail…

making bar chart

This horizontal bar chart displays the population of ten countries, sorted by value, using a clean SVG output. Built with D3 v5, the visualization reads from a local CSV file, parsing population numbers and scaling them by one thousand. The code employs `d3.csv` to load the data, `d3.scaleLinear` for the quantitative x-axis, and `d3.scaleBand` to position categorical bars with equal height. A margin-based group element positions the bars, with each bar's width representing the population magnitude.

Loading thumbnail…

making bar chart

This bar chart displays population data for ten countries, with bar lengths corresponding to each nation’s population in thousands. The visualization uses D3 v5 to load CSV data, scale linearly with d3.scaleLinear and d3.max, and bind rectangles to the SVG. Bars are positioned using d3.scaleBand, though axis creation is incomplete. The data source is a local CSV file, rendered as SVG elements.

Loading thumbnail…

making bar chart

This bar chart displays population data for ten countries, with bar lengths corresponding to each nation’s population in thousands. The visualization uses D3 v5 to load CSV data, scale linearly with d3.scaleLinear and d3.max, and bind rectangles to the SVG. Bars are positioned using d3.scaleBand, though axis creation is incomplete. The data source is a local CSV file, rendered as SVG elements.

Loading thumbnail…

making bar chart

This bar chart displays the population of ten countries, ranked from largest to smallest, using a vertical bar for each nation. It reads the population data from a local CSV file and renders the visualization as an SVG element. The chart uses D3.js v5 to parse the CSV and scale the bar heights proportionally to population values, with the country names and population figures shown as labels. The data source is the included data.csv file, and the visualization is generated through D3's selection and scaling methods.

Loading thumbnail…

making bar chart

This bar chart displays population counts for ten countries, sorted by country name along the vertical axis and using horizontal bar lengths to represent population values on a linear scale. The visualization is built with D3 v5, loading data from a CSV file and rendering to SVG. It uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to map the data, draw axes, and append rectangles for each bar within a margin-defined group.

Loading thumbnail…

making bar chart

This bar chart displays the populations of ten countries, using horizontal bars ordered by country name. The code creates an SVG visualization using D3 v5, loading data from a CSV file. It employs `scaleLinear` and `scaleBand` to map population values and country names to bar lengths and vertical positions, while `axisLeft` and `axisBottom` add the corresponding axes. The population values are parsed and multiplied by 1000, and bars are drawn as rectangles with heights determined by the band scale.

Loading thumbnail…

making bar chart

This bar chart displays population sizes for ten countries, using horizontal bars whose lengths correspond to each nation’s population value. The visualization is rendered as SVG with D3 v5, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded from a CSV file and processed with `d3.csv`, with population values converted to numbers before rendering.

Loading thumbnail…

making bar chart

This example shows a horizontal bar chart of country populations using D3.js v5. Rectangles are appended to an SVG canvas, with each bar’s width mapped from population values (converted from strings to numbers and scaled by 1000) via `d3.scaleLinear` and a domain from 0 to the maximum population. The chart loads CSV data with `d3.csv` and uses `d3.max` to determine the scale domain. Bars are fixed at a height of 400 pixels, causing overlap, as the y-scale code is commented out.

Loading thumbnail…

HTML Starter

This example demonstrates a simple animated face built with Scalable Vector Graphics (SVG), rendered through the React framework and the D3.js version 4 library. The code uses D3's `select` method to target the SVG element and `append` to create geometric shapes, including a yellow circle for the head, two black circles for eyes, and rectangular eyebrows. A mouth is drawn using D3's `arc` function and a path element. The eyebrows showcase animation through the `.transition()` API, moving up and down over two-second intervals. The SVG attributes, such as width and height, are retrieved as strings and converted to numbers for calculations.

Loading thumbnail…

HTML Starter

This example demonstrates a simple animated face constructed from basic SVG shapes, including circles for eyes and a path for a mouth. Using the React framework with D3 v4, the visualization initially draws a purple background, a yellow circle, and facial features. The left and right eyebrows are rectangles that animate vertically twice using D3’s `transition` with a duration of 2000 milliseconds each, creating a blinking or expressive motion. The mouth is generated using the `d3.arc` function to define its path, while shape positions are calculated from the SVG’s width and height attributes.

Loading thumbnail…

HTML Starter

This example demonstrates a simple animated face built with D3 v4 and React, rendered as SVG on an HTML page. The purple background hosts a yellow circle with black stroke, two eyes, and an eyebrow that transitions vertically over two seconds before returning. A mouth is drawn using an arc path generator from D3. The code selects the SVG element, uses method chaining for attribute setting, and applies transitions with `transition().duration()` to animate the eyebrow.

Loading thumbnail…

HTML Starter

This example displays a blank SVG canvas with a solid purple background. It serves as a minimal setup for starting an HTML-based D3 visualization project. The code creates an SVG element with specified dimensions and uses d3.select to reference it, then applies the background color through the style method. The page loads D3 version 4 from a CDN and includes a React starter alternative for comparison.

Loading thumbnail…

Shapes with SVG and css

This example demonstrates basic SVG shape rendering from static markup, including circles, rectangles, lines, and paths, with styling applied through CSS. The React-based structure uses an SVG container of 960 by 500 pixels, where shapes are positioned individually or grouped with transforms such as translation and scaling. A group with the class "lines" applies orange stroke properties via CSS, while a nested path overrides the stroke to pink with round joins. The code relies on native SVG elements and CSS rules, with no external visualization libraries or data sources.

Loading thumbnail…

Shapes with SVG and css

This example demonstrates a large circle rendered as an SVG element on a blank HTML page. The visualization uses a minimal React setup, though the visible code is a static SVG circle with a radius of 400 pixels. It does not include any data or interactive behavior, focusing solely on the geometric shape’s presentation. The page loads React from a CDN and renders the SVG directly in the browser’s DOM.

Loading thumbnail…

cars report

This example displays a simple car report as a static HTML list of three vehicles, with one highlighted in red. The page uses plain HTML and CSS for structure and styling, with an external stylesheet defining the list appearance and a `.high` class for emphasis. A minimal React component is not present, but the project references a React starter and includes a small JavaScript file that attempts to update a message element via `document.getElementById`. The visualization is built directly in the `index.html` file without any charting or data-processing libraries.

Loading thumbnail…

cars report

This example presents a simple car report as a static HTML page, listing three vehicles with their model years and makes. It uses plain HTML markup for the list content and includes minimal JavaScript that assigns a hello world message to a designated element via `document.getElementById`. The page is styled with a basic CSS file and rendered in a React framework environment, though no React-specific APIs or data visualization libraries are employed.

Loading thumbnail…

Untitled

This example shows a dual-line chart comparing the closing and opening prices of a dataset over time. Two lines are rendered on a time-scaled x-axis and a linear y-axis, with the closing price in steel blue and the opening price in red. The visualization uses D3 v4’s `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to generate the SVG paths and axes. Data is loaded from a CSV file with d3.csv, and dates are parsed with `d3.timeParse`.

Loading thumbnail…

HTML Starter

This example displays a multi-series line chart of stock data, plotting both opening and closing values over time as two distinct colored lines. The visualization uses D3 v4 with SVG rendering, employing `d3.line()` to generate the paths, `d3.scaleTime()` for the time-based x-axis, and `d3.scaleLinear()` for the y-axis. Data is loaded from a local CSV file via `d3.csv()`, with dates parsed using `d3.timeParse()`. The chart includes axes rendered through `d3.axisBottom()` and `d3.axisLeft()`, all styled with basic CSS classes.

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page created with the React starter template from VizHub. The page uses standard HTML elements and imports the React library to render a simple, blank viewport. The code includes a `root` div and ReactDOM to mount the app, though no data or visual content is displayed. The rendering approach relies on React’s virtual DOM to manage the single static component. The example serves as a bare-bones foundation for building interactive visualizations with React.

Loading thumbnail…

d3.js learning

This stacked bar chart visualizes yearly fruit consumption data from a CSV-like dataset, tracking redDelicious apples, McIntosh apples, oranges, and pears. It uses `d3.layout.stack` to compute layered series and `d3.scale.ordinal` for the x-axis years, with SVG rects for bars. Hovering reveals a tooltip with the value via mouse events. A legend identifies the four categories with custom labels, while `d3.svg.axis` renders gridlines and axes.

Loading thumbnail…

d3.js learning

This stacked bar chart visualizes yearly fruit consumption data from a CSV-like dataset, tracking redDelicious apples, McIntosh apples, oranges, and pears. It uses `d3.layout.stack` to compute layered series and `d3.scale.ordinal` for the x-axis years, with SVG rects for bars. Hovering reveals a tooltip with the value via mouse events. A legend identifies the four categories with custom labels, while `d3.svg.axis` renders gridlines and axes.

Loading thumbnail…

d3.js learning

This example shows a stacked bar chart tracking fruit quantities (Red Delicious apples, McIntosh apples, oranges, and pears) across years from 2006 to 2015. The visualization uses d3.layout.stack to transpose the data into layers, with an ordinal x-scale for years and a linear y-scale for values. SVG rects represent each segment, colored via a custom palette, while d3.svg.axis renders the axes with gray tick lines. A legend identifies each fruit series, and mouse events on the bars trigger a tooltip displaying the numeric value for that segment.

Loading thumbnail…

Stacked bar chart

This example visualizes sales data from the Superstore.csv dataset as a stacked bar chart. It shows the distribution of sales across product categories and segments, with bars stacked to display proportional contributions. The visualization is built using Vega-Lite, Vega, and the Vega-Lite API, with D3’s csv function loading the data. React renders the chart, while Vega-Tooltip provides interactive hover details.

Loading thumbnail…

Untitled

This example shows a stacked bar chart where each bar represents a group, and the bar is divided into colored segments corresponding to subgroups. The chart loads CSV data from a GitHub URL using `d3.csv`, and defines the subgroups from the data's column headers. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for the color palette. The bars are created by stacking the data with `d3.stack` and rendering each segment as an SVG `rect` within a `g` element.

Loading thumbnail…

Untitled

This example shows a stacked bar chart where each bar represents a group, and the bar is divided into colored segments corresponding to subgroups. The chart loads CSV data from a GitHub URL using `d3.csv`, and defines the subgroups from the data's column headers. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for the color palette. The bars are created by stacking the data with `d3.stack` and rendering each segment as an SVG `rect` within a `g` element.

Loading thumbnail…

HTML Starter

This example presents a minimal single-page visualization that displays the text “Hello HTML” centered on a white background. It demonstrates the foundational structure of an HTML document using a basic `<!DOCTYPE html>` declaration, a `<head>` section with a title and inline CSS styling, and a `<body>` containing the text. The code is a pure HTML/CSS implementation, with no JavaScript, data sources, or charting libraries involved. It serves as a starting point for building more complex web-based visualizations.

Loading thumbnail…

Learn d3.js

This example demonstrates the fundamental data-join pattern in D3.js v4, binding an array of five numbers to paragraph elements. It displays the numbers 1 through 5 as text content in separate paragraphs on an HTML page. The code uses `d3.select`, `selectAll`, `data`, `enter`, and `append` to create the elements, with a callback function in `.text()` to set each paragraph’s content from the dataset. The visualization relies on the D3.js v4 library, loaded from a CDN, and runs within a minimal HTML structure.

Loading thumbnail…

Learn d3.js

This example demonstrates the basic data-binding workflow of D3.js version 4, using a static array of five numbers as the dataset. The code shows how `d3.select`, `selectAll`, `.data()`, and `.enter()` work together to create one paragraph element per data point. It appends `<p>` tags to the body and sets their text content with a callback function that returns each value. The visualization is minimal, focusing on the core enter selection pattern rather than scales or axes.

Loading thumbnail…

Learn d3.js

This example demonstrates how to bind an array of five numbers to paragraph elements using D3.js version 4. It shows the core data-join pattern, where the `d3.select` and `selectAll` methods target the body, while `.data()`, `.enter()`, and `.append()` create new `<p>` elements for each value. The `.text()` function then populates each paragraph with its corresponding number from the dataset. The code runs within a minimal HTML page that loads D3 from the official CDN.

Loading thumbnail…

Learn d3.js

This example demonstrates basic DOM manipulation with D3.js v4, showing how to select and modify elements in an HTML document. It changes the text and styling of an existing heading, applies red coloring to it, and appends three new paragraph elements to the body. The code uses `d3.select` and `d3.selectAll` to target the heading and paragraphs, then chains `.style`, `.attr`, `.text`, and `.append` methods to update content and set colors. All paragraphs are colored blue, while the heading receives a red style and a new class attribute.