vanquisher2000

@vanquisher2000·15 public vizzes

Fork of Coronavirus Deaths Over Time by Country

This visualization shows cumulative COVID-19 death counts over time for individual countries, plotting each nation’s trajectory as a separate line on a logarithmic y-axis to accommodate wide variation in scale. The chart uses React to manage component state and rendering, with D3 v5 functions including `scaleTime`, `scaleLog`, and `line` generating the SVG paths. Data comes from the Johns Hopkins Coronavirus dataset, processed through `csv` and `timeParse` to extract daily death totals for each country. Random colors distinguish countries, while gridlines and axis labels are added via D3’s `axisBottom` and `axisLeft`.

Aug 15, 2021

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

A fork of a line chart displays global cumulative COVID-19 deaths over time, with each country’s trajectory as a gray line. A Voronoi overlay, computed via the `d3.delaunay` and `d3.Delaunay.voronoi` APIs, makes the nearest data point under the cursor hoverable, highlighting the corresponding country’s line in black. Built with React and D3 v5, the chart uses `d3.scaleTime`, `d3.scaleLog`, and `d3.line` to map dates and log-scaled death totals, rendering as SVG. Data comes from the Johns Hopkins Coronavirus dataset, parsed with `d3.csv`.

Aug 15, 2021

Loading thumbnail…

Fork of Missing Migrants on a Map

This map visualizes global migration incidents from the Missing Migrants Dataset, with each circle representing a single event and its radius scaled by the square root of the total dead and missing count. Using React with D3 v5, the visualization employs d3.geoNaturalEarth1 for projection and d3.geoPath to render land masses, graticules, and country boundaries from World Atlas Topojson. Circle positions are derived from event coordinates, and the semi-transparent teal marks reveal geographic clustering of incidents while maintaining an uncluttered view of global patterns.

Aug 15, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width. Each circle represents an iris flower, colored by species, and a legend allows users to filter the data by hovering over a species name. Built with React and rendered as SVG using d3.scaleLinear and d3.scaleOrdinal, the visualization implements interactive filtering by toggling point opacity, highlighting only the selected species when a legend item is hovered. The chart reads from a CSV file using the d3.csv function.

Aug 15, 2021

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between four flower measurements by selecting any attribute for the x- and y-axes from two dropdown menus. The visualization uses React with hooks (useState, useCallback, useEffect) to manage state, and d3 v5 functions such as scaleLinear, extent, and csv for data loading and scaling. Points render as SVG circles with tooltips, while axes are built with custom React components. Data comes from a CSV file containing 150 iris flowers with sepal and petal dimensions.

Aug 15, 2021

Loading thumbnail…

Fork of Polished World Map

This example renders a polished world map using React and D3 v5. It displays landmasses, country interiors, graticules, and the globe sphere, with country boundaries sourced from World Atlas TopoJSON data. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw SVG paths for both land features and interior mesh lines. The map is styled with a teal land fill and subtle gray graticules, presenting a clean, refined cartographic aesthetic.

Aug 15, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This fork of the stylized line chart displays weekly temperature readings over time using the Data Canvas Sense Your City dataset. The visualization renders a single smooth curve with d3.scaleTime and d3.scaleLinear axes, using React components to structure the SVG output. The line is created through d3.line with curveNatural, while custom AxisBottom and AxisLeft components generate ticks with Poppins typography and muted colors. The code uses d3.csv for data loading and d3.extent to compute the domain, with axis labels positioned via SVG transforms.

Aug 15, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, with population values formatted in billions. The visualization uses React with D3 v5, leveraging `d3.scaleBand` for the y-axis country categories and `d3.scaleLinear` for the x-axis population scale. Custom Axis components render SVG ticks and labels, while each bar includes a native SVG `<title>` tooltip element.

Aug 15, 2021

Loading thumbnail…

都道府県別の人口

This example displays the population of Japanese prefectures as bar charts, with options to view total, male, female, or combined gender data. For the combined view, it draws paired bars using SVG rectangles within a React component, animated via the `animate` element. Users can hover over a color legend to highlight one gender while dimming the other. Data is loaded as CSV using d3.csv, with scales built via d3.scaleBand and d3.scaleLinear, and axes rendered as custom React SVG groups.

Aug 9, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a React-based dropdown menu that lets users choose between demographic categories labeled “total,” “male,” and “female,” though the selection currently only updates a console log and does not alter any visible chart. The interface uses React’s `useState` hook to manage the selected value and a custom `Dropdown` component to render an HTML `<select>` element with options derived from a static array. The page is structured with index.html, an empty SVG placeholder, and React production scripts loaded via CDN, while Bootstrap is not used; styling is minimal and inline.

Aug 7, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the population of Japanese prefectures as a scatter plot, with each circle representing a prefecture positioned by population size on the x-axis and prefecture name on the y-axis. The chart uses React components to render SVG elements, with d3.scaleLinear for both axes and d3.csv for loading data from a GitHub-hosted dataset derived from United Nations World Population Prospects 2019. Circle marks include native SVG title tooltips showing formatted population values, and the styling uses custom CSS with the Poppins font.

Aug 7, 2021

Loading thumbnail…

都道府県別の人口 <style> body { margin: 0; overflow: hidden; } pre { font-size: 7em; } </style>

This example displays Japanese population data by prefecture from a CSV file, initially showing a loading message while fetching the data. The visualization uses React with hooks like `useState` and `useEffect` to manage asynchronous data loading via the `csv` function from d3.v5. The code processes each row to extract the prefecture name and concatenates them into a message string, which is then rendered as large text in a `<pre>` element. The layout of the page is a map of Japan, but the code focuses on printing the prefecture names as a text-based output.

Aug 7, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This choropleth displays Japan’s land features and internal administrative boundaries using a natural Earth projection. The visualization renders geographic shapes via `d3.geoPath` and `geoNaturalEarth1`, with topojson data from the Japan Atlas. Landmasses appear in teal, interiors in light gray, and a graticule overlays the sphere. React manages the component state, loading the dataset through `useData` and `d3.json`. The stylized palette and minimal layout emphasize the spatial distribution of Japan’s regions.

Aug 6, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example visualizes the top 10 countries by 2020 population using a bar chart, with countries arranged vertically and population values mapped to bar widths. The visualization is built with React and D3 v7, loading data from a CSV file via `d3.csv`. Scales are created using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with bars rendered as SVG `<rect>` elements inside a transformed group. The chart fills the browser window and updates dynamically once the data loads.

Aug 6, 2021

Loading thumbnail…

？

This example displays metadata about the CSS named colors dataset, including its file size, row count, and column count, in a plain text container. It loads the CSV from a remote URL using `d3.csv`, formats the raw text with `d3.csvFormat`, and calculates the kilobytes by dividing the string length. The page also renders a static yellow SVG circle with a red stroke using React, though the circle is unrelated to the data summary. The code uses D3 v7 for data fetching and parsing, with React handling the SVG output.

Aug 5, 2021