BajiSharifPatan@my.unt.edu

deprivation in Bangladesh

A choropleth map of Bangladesh visualizes district-level deprivation, encoding the "poor" poverty percentage from a local salesData.json file through a blue color scale. Built with D3 v5 and TopoJSON, the map uses d3.geoMercator and d3.geoPath to render SVG paths, with d3.zoom enabling pan and zoom. Hovering over a district triggers a tooltip via appended title elements, displaying the district name, ID, and extreme and poor deprivation percentages.

Apr 4, 2022

Network graph

A social network graph visualizes friendships among eight people, with nodes colored brown and labeled with names. Green links connect friends, and link thickness represents connection weight. The visualization uses D3.js v4, specifically the `d3.layout.force()` API for force-directed layout, with SVG rendering. The graph loads node and link data from an external JSON file, and nodes are draggable via `force.drag`. Text labels appear in red, and edge widths are calculated using the square root of each link's weight value.

Apr 4, 2022

Untitled

This interactive family tree diagram visualizes the Wilson family hierarchy using a D3.js v7 tree layout rendered as SVG. Nodes are represented by circles whose size corresponds to a numeric value, while stroke and fill colors encode the type and level properties from the bundled data.json hierarchy. Curved links connect parent and child nodes using bezier paths, with link colors derived from each node’s level attribute. The code uses `d3.hierarchy` and `d3.tree()` to compute positions, and custom styling via inline styles and CSS classes.

world map

This example presents a world map using the Natural Earth projection, overlaid with animated green dots that represent geographic locations queried from a SPARQL endpoint. The map is rendered as SVG paths, with countries drawn using `d3.geoPath` and TopoJSON data, while the data circles are plotted using the projection and animated with a staggered transition. It uses `d3.json`, `d3.geoNaturalEarth1`, and `transition.attr` to create the visual effect.

world map with colors

This interactive choropleth map colors each country by its economy category, using a spectral color scale and click-to-highlight interaction to compare regions. Built with D3 v5, it renders country outlines via `d3.geoPath` with a Natural Earth projection, loads TopoJSON country boundaries from the World Atlas, and joins economic classifications from a TSV file. A zoom behavior enables panning and scaling, while an ordinal color legend supports filtering by clicking a category to fade unmatched countries.

Fork of D3 map

This visualization displays a natural Earth projection world map with animated green circles marking locations from a SPARQL query. The map and circles are rendered as SVG using `d3.geoPath` and `d3.geoNaturalEarth1`, with country outlines from TopoJSON. Location data comes from a Dutch heritage dataset, queried via SPARQL for coordinates and country labels. Each circle animates in with a staggered delay using `transition` and `d3.easeBounce`, growing from zero to its final size to reveal the distribution of points.

world map

A choropleth map of world countries colored by economy category, with an interactive legend that filters the map when clicking a category. Hovering a country displays its name and value via a tooltip. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature and d3.tsv.

Country Map of china

This visualization displays a map of India, rendered using SVG paths generated with d3.geoPath and a d3.geoMercator projection. TopoJSON data is loaded via d3.json and parsed with topojson.feature to create country boundaries, which are filled using a scaleOrdinal color scale. The map includes an interactive hover effect that changes the fill color to pink, and features a title attribute displaying the interpolateRainbow value for each region.

Fork of Fork of D3: GeoEarth

This example visualizes global deaths from brain and central nervous system cancer in 2019, coloring each country on a natural Earth projection map using a sequential yellow-orange-red scale based on total mortality counts. The visualization uses React to manage state and render the SVG, with D3 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSequential`, and `d3.csv` for loading the cancer mortality data. Country boundaries come from TopoJSON world-atlas data, and hovering over a country displays its name and death count in a tooltip div. A legend on the left provides a color reference, with data sourced from a CSV file containing all cancer types by country.

Fork of World Map with D3.js!

This example displays an interactive world map where each country is rendered as a green SVG path with a black stroke. A blue sphere provides the background, and hovering over a country highlights it in orange. Built with D3.js v5 and TopoJSON, it uses `d3.geoPath` with `d3.geoEquirectangular` projection to draw the map from the world-atlas countries-110m.json data source. The SVG rendering is styled via CSS classes, with hover effects defined in the stylesheet.

Untitled

This visualization shows a hierarchical tree diagram of Chandrapur District towns and villages, with each node represented as a circle sized by its value and colored by its level. Developed using D3.js, the code employs the `d3.tree()` layout and `d3.hierarchy()` to structure the nested data from `data.json`, rendering SVG paths for links and circles for nodes. Node colors and strokes are dynamically set from the `type` and `level` fields in the data, while text labels position children to the left or right based on their depth.

Fork of D3: GeoEarth

This visualization displays global deaths from brain and central nervous system cancer for 2019, using a natural Earth projection with a sequential yellow-orange-red color scale. It shows country-level data from a CSV dataset of cancer statistics, mapped via ISO codes to world atlas geography. The code uses React to manage state, d3.geoPath and geoNaturalEarth1 for map rendering, d3.scaleSequential with interpolateYlOrRd for coloring, and topojson’s feature method to convert TopoJSON boundaries. Hovering reveals country names and death counts via a tooltip, while a legend indicates color ranges.

Mar 30, 2022

Fork of D3: GeoEarth

This interactive choropleth map displays nuclear-related deaths for the year 2019, with countries colored on a yellow-orange-red sequential scale. Users hover over a country to see its name and total death count in a floating toolkit. The visualization merges world atlas geometries with CSV data on nuclear casualties, using D3’s `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with `interpolateYlOrRd`. React manages the interface state, while D3’s `csv` and `json` load datasets, and TopoJSON features render country shapes in SVG.

Mar 30, 2022

ICE-7: Reusable sctter plot

A reusable scatter plot displays the Iris Dataset, with each point colored by species. It iterates through the four measured attributes every two seconds, dynamically swapping which column maps to the x-axis while the y-axis remains fixed on sepal length. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` within a custom `scatterPlot` function that accepts configurable accessors, margins, and radius. Axis labels are added with SVG text elements in the Share Tech font.

ICE-7:Area Chart

This area chart visualizes nuclear energy usage from 2010 to 2020, with a red line showing the trend and an indigo-filled area beneath it. Time is mapped on the x-axis and nuclear values on the y-axis, using D3 v5 with scaleTime, scaleLinear, axisBottom, and axisLeft. The line and area paths are generated with d3.line and d3.area using curveBasis for smoothing, while CSV data is loaded and parsed via d3.csv and d3.timeParse. Grid lines and styled axis labels enhance readability.

ICE-7:Line Chart

This line chart displays the highest nuclear energy consumption from 2010 to 2020, with the year on the x-axis and nuclear usage on the y-axis. Built with D3 v5 and rendered as SVG, the visualization uses `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and the `line` generator to create the path. Data is loaded from a CSV file via `csv`, with dates parsed using `d3.timeParse`. The styling uses custom CSS classes for grid lines, labels, and the brown line stroke.

ICE-7:Pie Chart for csv dataset

This pie chart displays the nuclear energy usage of various countries, with each slice representing a country and its corresponding usage value. The chart is rendered as an SVG using D3 v5, with data fetched as CSV from a GitHub Gist. The code uses `d3.csv` to load the dataset, `d3.pie` and `d3.arc` to compute and draw the slices, and `d3.scaleOrdinal` to assign colors. Each slice displays its value in thousands, and a legend on the right shows country names alongside their usage figures.

ICE 7- Line Chart

This line chart displays nuclear energy usage across countries from 2010 to 2019, with year on the x-axis and nuclear usage values on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into date and numeric values. Axes include tick lines and labels, with custom styling for axis text, titles, and the maroon line path defined in an external stylesheet.

ICE 7- Line Chart

This line chart displays automobile sales in India from 1999 to 2012, with the year on the x-axis and electronic sales on the y-axis. The visualization is rendered as an SVG using React and d3.v5, employing `scaleTime` for the temporal axis and `scaleLinear` for the sales values. The line path is generated with `d3.line` and styled via CSS, while data is loaded from a CSV file accessed through a GitHub Gist URL. Axis labels, grid lines, and a title are included.

Fork of ICE 7 Line Chart

This line chart visualizes car sales in India from 2009 to 2019 using a single time-series line. The D3.js v5 code loads a CSV from a GitHub gist, parses dates and numeric sales values, and renders the chart as an SVG. It uses `scaleTime` and `scaleLinear` for axes, `line` for the path generator, and applies custom styling to grid lines, tick labels, and the line itself, which is drawn with a red stroke.

Fork of ICE - 7 Pie Chart Maanas Katta

This example displays a pie chart of the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its value in thousands and accompanied by a legend. It loads CSV data via `d3.csv` from a GitHub gist and renders an SVG using D3 v5’s `pie` and `arc` generators. The chart uses `d3.scaleOrdinal` to assign colors, `d3.format` for tick labels, and appends textual labels positioned via `arc.centroid`. The legend includes colored rectangles and text annotations, all drawn with SVG elements.

ICE - 7 Pie Chart

This pie chart shows the top 10 countries by deaths in 2020 from air pollution, displaying each country’s death count as a labeled slice and an associated legend. The chart uses D3 v5’s `pie` function to compute arc data, `arc` for path generation, and `scaleOrdinal` to assign colors from a hardcoded array. Labels within slices are positioned using `arcGenerator.centroid`, while legends are built manually with appended `<rect>` and `<text>` elements. Data is fetched from a remote CSV via D3’s `csv` method.

Fork of ICE 7 Line Chart

This line chart visualizes car sales in India from 2009 to 2019, using a single red line to show the count of cars sold per year. The SVG is generated with d3.v5, using d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to create the path. It imports data from a CSV file via d3.csv, with dates parsed using d3.timeParse. Grid lines and axis labels are styled through CSS, while the d3.axisBottom and d3.axisLeft functions render the ticks.

Fork of Pie Chart

This donut chart visualizes 2022 US auto sales by brand, with each arc segment representing a brand's year-to-date sales. A legend lists each brand with its corresponding color and sales value, formatted in thousands. The visualization uses D3.js v5 with the `pie`, `arc`, and `scaleOrdinal` APIs to compute the pie geometry and color mapping, while data is loaded from a CSV file via `d3.csv`. The SVG output is generated by drawing paths and appending legend groups, with styling applied through CSS.

Fork of Pie Chart

This D3.js v5 visualization displays 2022 US auto sales by brand as a pie chart, using a color-coded palette for each brand’s year-to-date sales. The SVG chart plots the pie in the center with a legend to the right, showing brand names and values in thousands. The code loads data from a CSV via `d3.csv`, computes arc segments with `d3.pie` and `d3.arc`, and applies ordinal colors through `d3.scaleOrdinal`. Text formatting uses `d3.format` for compact numeric labels.

ICE - 7 Pie Chart

This example visualizes the top 10 countries by deaths from air pollution in 2020 using a pie chart with an accompanying legend. Each slice is labeled with its value in thousands, and the legend pairs country names with their corresponding death counts and color swatches. The chart is built with D3 v5, using the `pie()` and `arc()` generators to create SVG paths, while `scaleOrdinal` maps slice colors. Data is loaded asynchronously via `csv()` from a GitHub gist.

ICE - 7 Pie Chart

This pie chart visualizes the top 10 countries with the highest death counts from air pollution in 2020. A legend on the right, generated using D3’s `scaleOrdinal` for color mapping, identifies each country and its corresponding death toll. The chart uses D3’s `pie` and `arc` functions to compute and draw the SVG segments, with text labels placed at each slice’s centroid. Data is loaded asynchronously from a CSV file using D3’s `csv` function.

ICE - 7 Pie Chart

ICE - 7 Pie Chart

This example displays a pie chart of the top 10 countries by deaths in 2020 attributed to air pollution, with each segment labeled with its value in thousands and a corresponding legend listing country names and death counts. It loads CSV data via `d3.csv` (from a GitHub gist), then uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and text elements. The chart is rendered with D3 v5, with styling applied through the `style.css` and inline SVG attributes.

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris flower dataset, mapping petal width and sepal length on the x- and y-axes. Each circle represents a data point, colored by species (blue for setosa, red for versicolor, yellow for virginica) with white strokes. The visualization uses d3.scaleLinear, axisLeft, axisBottom, and a reusable scatterPlot function built with D3 v6. SVG rendering displays the axes and circles, with the plot dynamically updating when the x-value column cycles through dataset attributes. Data loads from a remote CSV file via d3.csv.

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width onto the x- and y-axes. Each point is colored by species—green, orange, or brown—using a custom marker function. Built with D3 v6, the SVG chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded via `d3.csv` from a GitHub gist, with numeric fields parsed on ingestion. The visualization fills the screen and includes axis labels for petal length and sepal length.

ICE-6: Rendering Marks and Channels with React & D3.JS

This example visualizes the top 9 nuclear-armed countries by their 2020 warhead counts using a horizontal bar chart. It employs React and D3.js v5 to render SVG marks and channels, with a green color scheme and red bars, and includes axis ticks and labels. The data is loaded from a CSV file using `d3.csv`, and the scales are created with `scaleBand` and `scaleLinear`. The chart displays a title and country names along the categorical axis, with the numeric axis representing the nuclear weapon counts.

ICE-6: Rendering Marks and Channels with React & D3.JS

This example visualizes the most nuclear-using countries in 2020 as a horizontal bar chart, with country names on the y-axis and nuclear values on the x-axis. It uses React to manage state and render the SVG, while D3.js v5 handles data loading and scaling. The code specifically employs `scaleBand`, `scaleLinear`, and `csv` from D3 to parse and map data, with custom axis ticks drawn manually. React's `useEffect` and `useState` hooks load and store the data, which comes from a CSV file hosted on GitHub.

ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 countries by nuclear energy usage, rendered as a horizontal bar chart using React and D3 v5. The React component manages state with useState and useEffect, while D3’s scaleBand and scaleLinear compute the bar positions and widths from CSV data loaded via d3.csv. SVG rectangles encode each country’s nuclear value, with axes and grid lines drawn manually using D3’s tick methods and React’s JSX syntax.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization presents a horizontal bar chart of the top 10 most populous countries based on their nuclear energy usage in 1980, sourced from a CSV file. The chart uses D3 scales (scaleBand and scaleLinear) to map country names and usage values to SVG rectangles. React manages the component state and rendering, while D3’s csv function loads and parses the data. The SVG output includes custom grid lines, tick labels, and styled marks.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart ranking the top 10 most populous countries based on 1990 nuclear energy data. The chart uses SVG rendering within a React component, leveraging d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data is loaded asynchronously via d3.csv from a GitHub gist, with the first nine rows selected for display. The code manually constructs gridlines, tick labels, and rectangles rather than using d3.axisBottom or d3.axisLeft, demonstrating explicit mark and channel creation.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 most populous countries in 2019 as a horizontal bar chart, retrieved from a CSV dataset. Using React for component structure and D3 v5 for data processing and scales, it renders SVG marks for the bars with axes and labels. The code employs `d3.csv` for loading data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and maps data to rectangles within an SVG group.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart displays the top 10 most populous countries using a dataset of cancer statistics, though the code loads 53 rows. The visualization is built with React and D3 v5, using D3's `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. The rendering leverages React's declarative components to generate SVG elements, with axes and tick marks created through D3's `ticks()` method. Data is loaded asynchronously via D3's `csv()` function from a GitHub gist URL.

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

A horizontal bar chart displays the population of the top 10 most populous countries in 2019, drawn as SVG rectangles within a React component. The code uses React hooks (`useState`, `useEffect`) to load data from a CSV via `d3.csv`, then scales it with `d3.scaleBand` and `d3.scaleLinear`. Custom tick marks and grid lines are rendered manually with SVG elements, and bars are positioned using the scales' domains and ranges.

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most populous countries using data from a CSV file. The visualization renders SVG rectangles with countries on the y-axis and population on the x-axis, using scales from d3-scale and React components for markup. The code loads data with d3.csv, applies a linear scale for population and a band scale for countries, then manually renders grid lines and axis labels inside a React SVG.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 most populous countries in 2019 as horizontal bars, with country names on the y-axis and population values on the x-axis. The chart is built using React and D3, leveraging `scaleBand`, `scaleLinear`, and `max` from d3.v5 to compute scales and domains from CSV data. SVG rectangles render the bars, with custom tick labels and gridlines drawn manually through JSX. Data is loaded asynchronously via `csv` from a GitHub gist URL.

Fork of Fork of ICE-5: CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js, displaying the dataset's size, row count, and column count on a webpage. The visualization uses `d3.csv` to fetch data from a GitHub-hosted CSV file and `d3.csvFormat` to calculate its byte size. A styled HTML heading and a pre-formatted text container present the results, while an external SVG image of a panda is also included. The page relies on D3 v7 and vanilla JavaScript within a simple HTML document.

Feb 28, 2022