4

45.saiful@gmail.com

@saiful9707·31 public vizzes

Loading thumbnail…

Per-Pupil Spending vs Academic Results2

This heatmap visualizes the relationship between per-pupil spending and graduation rates across Massachusetts schools, using data from the MA_Schools.csv dataset. It shows patterns of density through color intensity, with orange-to-red hues indicating higher concentrations of schools at specific spending and performance combinations. The visualization uses D3 v7 to bin data points into a 20×15 grid, then renders SVG rectangles colored via a sequential scale (d3.scaleSequential with interpolateOrRd). Interactive tooltips appear on mouseover, while axes display spending in dollars and graduation rates in percentages, with a legend implied by the color gradient.

Loading thumbnail…

Teacher Salary vs Student Results2

This bubble chart explores the relationship between average teacher salary and graduation rates across Massachusetts schools, with each circle representing a school. The position encodes salary on the x-axis and graduation percentage on the y-axis, while circle area reflects total enrollment. Circle color uses a red-to-green sequential scale (`d3.scaleSequential` with `d3.interpolateRdYlGn`) to highlight graduation performance. The visualization is built with D3 v7, rendering SVG elements, and includes interactive tooltips on hover. Data comes from the MA_Schools.csv dataset, filtered to include only schools with valid salary and graduation values.

Loading thumbnail…

Assignment 8 STAAR Test Results Map in Texas2

A choropleth map displays county-level STAAR standardized test performance percentages across Texas, with orange-to-red shading representing score ranges and gray indicating missing data. The visualization uses d3.geoMercator projection and d3.geoPath to render Texas counties from a TopoJSON atlas, filtered by FIPS codes starting with 48. Unemployment data from a Plotly GitHub CSV serves as proxy test scores, loaded via Promise.all with d3.json and d3.csv. Interactive tooltips appear on mouseover, while a gradient legend with a linear scale communicates the color mapping.

Loading thumbnail…

Assignment 8 Network

This example visualizes a small student collaboration network, showing seven nodes arranged into three groups connected by seven study-partnership links, including a cycle. Using D3.js v7, the code builds an SVG scene with a force-directed layout from `d3.forceSimulation` and applies a color scale from `d3.scaleOrdinal` with `d3.schemeCategory10`. Nodes are drawn as draggable circles with text labels, while links appear as lines; the simulation tick updates all positions based on charge and link distance forces.

Loading thumbnail…

Assignment 8 Tree

This visualization shows a hierarchical tree of programming languages organized by execution type, with categories for compiled, interpreted, and hybrid languages. The tree layout positions nodes horizontally, routing curved links between parent and child nodes using `d3.linkHorizontal`. D3 v7’s `d3.hierarchy` and `d3.tree()` compute the node positions, while the SVG rendering uses colored circles—red for the root, blue for category branches, and green for leaf nodes—based on node depth. Text labels alternate sides depending on whether a node has children, and a rounded rectangle outlines the root for emphasis.

Loading thumbnail…

Assignment 8 STAAR Test Results Map in Texas

This choropleth map displays county-level STAAR test performance across Texas, with each county shaded on a sequential orange-red color scale based on its standardized test score percentage. The visualization uses d3.geoPath with a geoAlbersUsa projection to render Texas counties from TopoJSON data, while test scores are joined via a Map from CSV data. Hovering reveals a tooltip with the county FIPS code and score, and a legend with a linear gradient shows the color-to-value mapping. The code relies on d3.v7, topojson, and d3.scaleSequential with d3.interpolateOrRd.

Loading thumbnail…

Assignment 8 Maps

This choropleth map displays global GDP distribution, coloring countries by their Gross Domestic Product in billions of USD using a sequential green color scale. Built with D3 v7, it loads TopoJSON world atlas data and renders it as SVG paths via `d3.geoPath` with a Natural Earth projection. A threshold-based color scale (`d3.scaleThreshold`) maps GDP ranges to colors, while hover interactions trigger tooltips showing country names and GDP values. A legend explains the color bins, and gray indicates missing data.

Loading thumbnail…

Per-Pupil Spending vs Academic Results

This visualization shows the relationship between per-pupil spending and high school graduation rates across Massachusetts schools. It uses a binned heatmap to display the density of schools within specific spending and performance ranges, where darker blue colors indicate a higher concentration of schools. The chart is built with D3.js (v7), using `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleSequential` with `interpolateBlues` for the color scale, and custom binning logic to aggregate data points into rectangles. Tooltips display the exact counts and ranges on hover. Data comes from the MA_Schools.csv file.

Loading thumbnail…

Teacher Salary vs Student Results

This interactive scatterplot shows the relationship between average teacher salary and high school graduation rates, with bubble size representing total student enrollment. School type is encoded through color, and hovering over a bubble reveals detailed information about the specific school. The visualization uses D3.js v7 with an SVG rendering approach, implementing scales via `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` for positioning, sizing, and coloring. Data is loaded from a local CSV file containing Massachusetts school information, with axes formatted using `d3.axisBottom`, `d3.axisLeft`, and `d3.format`.

Loading thumbnail…

Massachusetts Public School Data Analysis Project

This scatter plot shows the relationship between average class size and college attendance rates for Massachusetts public schools, with each point colored by the percentage of economically disadvantaged students at that school. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for both axes, `d3.scaleSequential` with the Plasma interpolator for the color scale, and `d3.axisBottom`/`d3.axisLeft` for the chart axes. Data is loaded from a CSV file using `d3.csv`, with a tooltip providing detailed information for each school on hover.

Loading thumbnail…

Pie Chart

This pie chart displays the percentage distribution of global internet traffic by device, including smartphones, desktop computers, tablets, and smart TVs. It uses D3.js v7 to load data from a CSV file and render the visualization as an SVG. The chart employs `d3.pie()` and `d3.arc()` to generate slices, with labels positioned using a secondary arc generator. A legend on the right uses `d3.scaleOrdinal` with the `schemeTableau10` color palette to map categories to colors.

Loading thumbnail…

Assignment7 Pie Chart2

This pie chart displays the proportion of fruit sales from a small CSV dataset, with five colored slices representing Apples, Bananas, Cherries, Dates, and Elderberries. Each slice is labeled with the fruit name using D3’s `pie()` and `arc()` generators, with the `scaleOrdinal` color scale providing distinct hues. The SVG is rendered at 960 by 500 pixels, and labels are positioned along a separate label arc via `labelArc.centroid()`. Data is loaded asynchronously using D3’s `csv()` function, with error handling logged to the console.

Loading thumbnail…

Assignment7 Pie Chart3

This pie chart visualizes monthly expenses by category, with proportional slices for Rent, Food, Travel, Shopping, and Bills. It uses D3 v7’s `d3.pie` and `d3.arc` generators to compute arc paths, rendered as SVG elements on a 900×500 canvas. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) fills each slice, while labels are positioned using a separate `labelArc` for readability. A legend on the right lists each category with its numeric value, sourced from the CSV data loaded via `d3.csv`.

Loading thumbnail…

Assignment7 Pie Chart

This pie chart displays the distribution of energy use across five sources—Petroleum, Natural Gas, Renewables, Coal, and Nuclear—using data from the energy_use.csv file. The visualization loads data with `d3.csv`, calculates the arc paths using `d3.pie` and `d3.arc`, and renders each slice as a `path` element in SVG with an ordinal color scale. A legend on the right side, built with `selectAll` and `append`, maps each colored rectangle to its corresponding energy source.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart displays the percentage breakdown of U.S. energy consumption sources, using data from a CSV file. It shows the proportional slices for petroleum, natural gas, renewables, coal, and nuclear, with a legend to the right. The visualization is built using D3's `pie`, `arc`, and `select` APIs to generate and render the SVG paths. A `scaleOrdinal` color scheme from `schemeSet2` distinguishes the categories, and the chart is centered within an SVG canvas.

Loading thumbnail…

Assignment7 Area Chart

This area chart visualizes website traffic over a 100-day period, showing a clear upward trend in daily visits. The visualization uses a semi-transparent steelblue fill to represent the area beneath the line, with labeled axes for Day and Number of Visits. Built with D3 v7, the code loads data from a CSV file and renders the chart as an SVG using the `d3.area` generator, while `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` handle the scaling and axes.

Loading thumbnail…

Assignment7 Reusable Scatter Plot2

This example shows the positive relationship between study hours and exam scores for 50 students, with each circle representing one student’s performance. The reusable scatter plot function takes a data array and configuration object to create scales, axes, labels, and points using D3 v7. The code uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.csv to load the student performance dataset with StudyHours and ExamScore fields. The chart is rendered as an SVG, with teal semi-transparent dots positioned according to the study hours on the x-axis and exam scores on the y-axis.

Loading thumbnail…

Assignment7 Reusable Scatter Plot

This reusable scatter plot visualizes the relationship between population and area for the top 100 cities worldwide, with each data point representing a city. The chart uses D3 v7's `d3.csv` to load data from a local CSV file, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The `scatterPlot` function encapsulates the chart configuration, accepting data and margin settings as parameters, making it easily reusable for different datasets. Points are drawn as SVG circles with steelblue fill and opacity, while axis labels are positioned using SVG text elements.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the top 100 global cities by population on the x-axis and area on the y-axis. The chart loads data from a CSV via `d3.csv`, converts fields to numbers, and renders SVG circles using `d3.scaleLinear` for both axes. It calls `d3.axisBottom` and `d3.axisLeft` for ticks, with labeled axes added as SVG text. The reusable `scatterPlot` function encapsulates scaling, axes, and circles, making the visualization configurable through a `config` object specifying value accessors and margins.

Loading thumbnail…

Fork of Fork of D3 Scatter Plot

A reusable scatter plot built with the reusable chart pattern displays the Iris dataset from Curran's Gist repository. It uses `d3.scaleLinear`, `extent`, and `axisBottom`/`axisLeft` for axes, with the chart configured via chainable methods for width, height, margin, and data accessors. The plot responds to data updates by joining circles to the DOM, rendering petal length against sepal length with steelblue points at 5-pixel radius and 0.7 opacity.

Loading thumbnail…

Assignment7 Line Chart

This example shows a line chart tracking website visits over a 100-day period, with a steady upward trend from 120 to 630 visits. Built with D3.js, it loads data from a CSV file using `d3.csv`, creates linear scales with `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The line itself is drawn using the `d3.line` generator, appended as an SVG path with a steelblue stroke, within an 800x500 SVG container.

Loading thumbnail…

Fork of Line Chart

This line chart visualizes sales figures by month, with data points marking each value along the trend line. The chart uses the D3.js library, specifically `d3.csv` to load the dataset, `d3.scalePoint` for the categorical month axis, and `d3.scaleLinear` for the sales axis. The visualization is rendered as an SVG, featuring a steelblue line and circles for data points, with labeled axes and a title. The code also demonstrates chained methods like `d3.select` and `d3.line` for constructing the graph.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates how to integrate React with D3 by rendering a text message directly into a DOM element. The code uses a `useRef` hook to reference the message div and `useEffect` to call D3's `select` and `.text()` methods, setting the content to "Hello D3 & React" upon component mount. It relies on React 19's `createRoot` for rendering and imports D3 v7 via an import map, with React and D3 loaded as ES modules from a CDN. The styling applies a large font size and center alignment to the output.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates how to integrate React with D3 by rendering a text message directly into a DOM element. The code uses a `useRef` hook to reference the message div and `useEffect` to call D3's `select` and `.text()` methods, setting the content to "Hello D3 & React" upon component mount. It relies on React 19's `createRoot` for rendering and imports D3 v7 via an import map, with React and D3 loaded as ES modules from a CDN. The styling applies a large font size and center alignment to the output.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between students' math and reading scores, with each circle representing a student's performance on both subjects. The plot uses a procedural, reusable D3 module that defines a configurable `scatterPlot` function, which encodes data coordinates into circle positions using `scaleLinear` and `extent` for axis domains. The visualization renders as an SVG graphic, drawing steel-blue circles and adding left and bottom axes via `axisLeft` and `axisBottom`. It loads CSV data from a GitHub gist containing student test scores, and the code demonstrates a modular approach to building a scatter plot with D3 v6.

Loading thumbnail…

Fork of Making a Scatter Plot

This interactive scatter plot displays the relationship between math and reading scores for a dataset loaded from a CSV file. The visualization is built using React components that generate SVG elements, with D3.js v5 handling the data loading and linear scaling of both axes. Each data point is rendered as a circle, with the x-axis mapping math scores and the y-axis mapping reading scores, and includes a tooltip showing the precise math score value on hover. The chart features labeled axes, styled tick marks, and a clean Poppins font throughout.

Loading thumbnail…

Fork of Simple Scatter Plot

This fork of the Simple Scatter Plot shows a dual-axis chart of Seattle weather data, displaying precipitation as blue bars and maximum temperature as a red line, with separate left and right Y-axis scales. It uses d3.csv to load the dataset, then d3.scaleTime and d3.scaleLinear to create the scales, with d3.axisLeft, d3.axisRight, and d3.axisBottom for the axes. The chart renders gridlines and includes interactive accessibility attributes, with the six-month slice of data displayed across the responsive width of its container.

Loading thumbnail…

Fork of CV: Bar Chart

This example shows a bar chart of the 30 most populous cities worldwide using React and D3 v7, with population values displayed in millions on the y-axis and city names on the rotated x-axis. The chart renders as SVG and supports interactive selection—clicking a bar highlights it in red. Data loads from a raw GitHub Gist URL and is parsed manually into an array of city-population objects. The visualization builds scales with `d3.scaleBand` and `d3.scaleLinear`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and uses React hooks for container dimensions and state management.

Loading thumbnail…

Fork of CV: Bar Chart

This example visualizes the relationship between stem length and leaf length across a dataset of synthetic orchid measurements, with each dot representing an individual orchid specimen. The visualization is built using React and D3 v7, rendering an SVG scatterplot with teal circles at 70% opacity. The code uses d3.scaleLinear and d3.extent to create the scales, while d3.axisBottom and d3.axisLeft generate the axes. A ResizeObserver hook tracks container dimensions, enabling responsive re-rendering of the chart.

Loading thumbnail…

Fork of HTML Starter

This visualization shows global renewable energy production statistics by country and year, displaying average and maximum production values alongside a bar chart. The chart encodes each country-year combination on the x-axis with production in terawatt-hours on the y-axis, using hover effects to highlight individual bars. The implementation loads CSV data from a GitHub gist via `d3.csv`, computes summary statistics with `d3.mean` and `d3.max`, and renders an SVG bar chart using `d3.scaleBand` and `d3.scaleLinear` with `d3.axisBottom` and `d3.axisLeft`. The page is styled with CSS and built with D3.js v7.

Loading thumbnail…

Fork of HTML Starter

This example presents a summary of a CSV dataset loaded from a remote GitHub Gist. It displays the file size in kilobytes, the total row count, and the number of columns in a styled box on the page. The visualization uses D3 version 7's `d3.csvParse` method to parse the fetched text, then logs the same metrics to the browser console. A simple static SVG circle is included as a placeholder, while the primary output is text-based rather than a chart.