S

sultanmirzapydev

@sultanmirzapydev·24 public vizzes

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a set of horizontal bars with no axes, labels, or other chart furniture. Using React hooks like `useState` and `useEffect`, it loads United Nations population data from a CSV via `d3.csv`, then renders the bars as SVG `<rect>` elements. The bar widths are scaled with `d3.scaleLinear`, while the vertical positions use `d3.scaleBand`. The chart updates reactively once the data arrives, displaying a simple loading message beforehand.

Loading thumbnail…

Fork of Missing Migrants on a Map

This visualization presents a world map of missing migrant events, with each point representing a single incident. The map renders country boundaries from World Atlas TopoJSON, while event data comes from the Missing Migrants Dataset. The code uses React for the user interface and d3.forceSimulation to position the event points. Geographic coordinates are projected using d3.geoPath, with TopoJSON converting the country boundary data for display. The visualization provides a spatial overview of where migrant deaths and disappearances have occurred globally.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors. The visualization presents three summary statistics—the file size in kilobytes, the total number of rows, and the column count—displayed in large text via a `<pre>` element. The primary implementation uses D3 v5’s `d3.csv` method to fetch and parse the remote CSV from a GitHub gist. Alternative approaches using `fetch` with async/await and `d3.csvParse` are provided as commented-out code. The display updates asynchronously once the data is loaded.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page displaying the text “Hello HTML” in large, centered type, with a linked JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console. The page is styled using inline CSS within a `<style>` block, which sets the body’s text alignment and font size. The script runs on page load via a plain `<script>` tag, illustrating the basic integration of HTML, CSS, and vanilla JavaScript without any external libraries or frameworks. The rendering is static, relying solely on the browser’s default document flow and console output.

Loading thumbnail…

Fork of Coronavirus Deaths by Country over Time (with Voronoi Hover)

This chart shows cumulative COVID-19 deaths over time for each country, plotted on a log-scaled y-axis. Hovering over any point highlights that country’s full line and displays a tooltip with the exact death count and date. The visualization uses React with D3 v5 scales (`scaleTime`, `scaleLog`) and line generators, while `d3.Delaunay` from `d3-delaunay` builds a Voronoi overlay to capture mouse events, making it easy to select nearby data points. Data comes from the Johns Hopkins Coronavirus dataset via CSV.

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This chart shows cumulative COVID-19 deaths over time for each country as a series of log-scaled line paths in SVG, with a red Voronoi overlay that defines hover regions. The data comes from the Johns Hopkins Coronavirus dataset, loaded via d3.csv. React manages the component hierarchy, while d3.scaleTime, d3.scaleLog, and d3.line generate the axes and paths. The VoronoiOverlay uses d3.Delaunay’s voronoi method to compute cell polygons from a set of points, rendering them as red svg paths.

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

Log-scaled line chart displays cumulative COVID-19 deaths over time for each country, sourced from the Johns Hopkins dataset. A Voronoi overlay, computed with `d3.Delaunay`, creates hover regions around each data point, triggering a highlighted stroke on the corresponding country line. React manages the interactive state, while D3’s `scaleLog`, `line`, and `axisBottom`/`axisLeft` render the SVG visualization.

Loading thumbnail…

Fork of Coronavirus Deaths by Country over Time (with Voronoi Hover)

This fork of the interactive line chart from the visualization gallery uses a Voronoi overlay to make hovering over the chart more intuitive. The chart displays cumulative COVID-19 deaths over time for each country, using a logarithmic y-axis and data from the Johns Hopkins Coronavirus Dataset. Upon hovering, an invisible Voronoi cell highlights the nearest line, making it active, and a tooltip shows the country name, death count, and date. The visualization uses React, D3 v5, and SVG, with the Delaunay triangulation and Voronoi diagram built using `d3.Delaunay`.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows one week of temperature data from cities around the world, with each city represented by a smooth, multi-colored line plotted over time using a basis curve. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, `curveBasis`, `nest`, and `axisBottom`/`axisLeft` to render an SVG. A color legend is generated with a custom function, and the data comes from the Data Canvas - Sense Your City dataset. Grid lines and axis labels enhance readability of the temperature trends.

Loading thumbnail…

Fork of Global Coronavirus Deaths

This chart displays the total number of global COVID-19 deaths over time, using a line chart that spans the width and height of the browser window. The data, sourced from the Johns Hopkins Coronavirus Dataset, is aggregated daily by summing all reported deaths. The visualization includes horizontal and vertical marker lines at the 10,000-death threshold and the most recent date, respectively. Built with React and D3 v5, it uses D3’s `scaleTime`, `scaleLinear`, `line`, and `axisBottom` functions to render SVG elements dynamically.

Loading thumbnail…

Coronavirus Line Chart

This visualization displays a scatter plot of global cities, with each point positioned by latitude and longitude and sized by population. The React component `LineChart` receives the dataset, while the custom hook `useCities` loads the world cities CSV from a GitHub gist using d3.csv. The example integrates React for component structure, D3 for data parsing, and OpenLayers is included in the page, though the core rendering relies on SVG dimensions defined by the `width` and `height` props.

Loading thumbnail…

Loading and Parsing Corona-virus Data

This example loads a real-world COVID-19 death time-series CSV from the Johns Hopkins CSSE repository and extracts the death total from its most recent date column. It parses each row by converting the latest column’s string value to a number, then reduces the array to a single sum. The result—the total global deaths—is displayed as text in a React-managed DOM node. The code uses d3.csv for fetching and parsing, plus Array.reduce and Array.map, with React and OpenLayers libraries loaded via CDN.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web application, displaying a summary of the dataset’s size in kilobytes, row count, and column count. The code uses the D3.js library (v5) to fetch a CSV file containing CSS named colors from a GitHub gist and then parse it with `d3.csv`, while leveraging the Promise-based `.then()` method for asynchronous handling. The resulting message is rendered inside an HTML `<pre>` element. The implementation also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`.

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS for the year 2017, using country-level data from the IHME dataset. Countries without data appear gray, while those with values use a sequential yellow-orange-red color scale. The visualization is built with React and D3 v5, leveraging `geoNaturalEarth1` and `geoPath` for map projection, `geoGraticule` for grid lines, and boundary data from World Atlas TopoJSON, with country codes matched via ISO-3166 metadata.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis shows the reported date using a time scale, while the y-axis displays the total dead and missing using a logarithmic scale. Built with React and D3 v5, the visualization uses `d3.csv` for data loading, `scaleTime` and `scaleLog` for scaling, and renders SVG circles with tooltips showing formatted dates. The data is loaded via a custom `useData` hook that parses dates and numeric values from the CSV source.

Loading thumbnail…

Multiple Views with Brushing

This example shows a world map of missing migrant events, paired with a time-series histogram of the same data. Brushing a time range in the histogram filters the points displayed on the map, linking the two views. The visualization uses React for rendering, D3 v5 for scales, projections, and brushing, and TopoJSON for country boundaries. The map uses a natural Earth projection via `d3.geoNaturalEarth1`, while the histogram bins reported dates into months with `d3.bin`.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization displays the total number of dead and missing migrants per month as a bar chart, with time on the x-axis and count on the y-axis. Data comes from the Missing Migrants Dataset, loaded via `d3.csv`. The chart uses `d3.bin` to group records by month and `d3.sum` to aggregate deaths per bin. React renders the SVG, with custom `AxisBottom`, `AxisLeft`, and `Marks` components, while `d3.scaleTime` and `d3.scaleLinear` handle the scales.

Loading thumbnail…

Fork of Points on a Map

This D3.js visualization displays a world map with cities of population greater than 50,000, using city data from Simplemaps. The map is rendered as an SVG, employing the d3.geoNaturalEarth1 projection with geoPath to draw land, graticules, and country interiors. The React implementation uses useWorldAtlas and useCities hooks to load TopoJSON and CSV data, respectively. City points are plotted as semi-transparent teal circles, styled with CSS.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This interactive scatter plot visualizes the Missing Migrants dataset, where each circle represents a single event, plotting reported dates on the x-axis against the total number of dead and missing on the y-axis. Hovering over a point reveals the formatted date via a tooltip. Built with React and D3 v5, the visualization uses D3’s `scaleTime` and `scaleLinear` for scaling, `extent` for domain calculation, and `timeFormat` for tick labels. Data is loaded asynchronously from a CSV file using D3’s `csv` function, with the chart rendered as an SVG using custom components for axes and marks.

Loading thumbnail…

Stylized bar chart

This visualization shows the world’s countries as stylized filled regions, with a natural Earth projection and graticule. It overlays circles for major cities, sized by population using a square-root scale. The map is rendered in SVG, using React for component structure, and relies on d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule for geographic projection and paths. Data comes from the World Atlas TopoJSON and a clean CSV of world cities.

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width to position and species to color. A color legend on the right allows hovering to highlight points of a particular species by dimming the others. The visualization uses React with D3 v5 scales and SVG rendering, with components for axes, marks, and the interactive legend.

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays a horizontal bar chart of the ten most populous countries for the year 2000, using data fetched from a remote CSV file hosted on GitHub. React's `useState` and `useEffect` hooks manage the asynchronous data loading, showing a "Loading" message until the data arrives. The bars render as SVG `<rect>` elements, with positions and lengths scaled using D3's `scaleBand` and `scaleLinear` functions from `d3`. The visualization demonstrates the integration of React for state management and D3 for data-driven scaling.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the ten most populous countries as horizontal bars, using the United Nations World Population Prospects 2019 dataset. The chart intentionally omits axes, scales, or labels, relying solely on bar lengths to convey relative population sizes. Built with React and D3 v5, the code uses `d3.scaleBand` for the vertical country positions and `d3.scaleLinear` for the bar widths, rendering each bar as an SVG `rect` element. The data is loaded via `d3.csv` and filtered to the top ten entries.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors. The visualization presents three summary statistics—the file size in kilobytes, the total number of rows, and the column count—displayed in large text via a `<pre>` element. The primary implementation uses D3 v5’s `d3.csv` method to fetch and parse the remote CSV from a GitHub gist. Alternative approaches using `fetch` with async/await and `d3.csvParse` are provided as commented-out code. The display updates asynchronously once the data is loaded.