Guilinabaoge

@Guilinabaoge·11 public vizzes

Fork of Stylized Line Chart

A choropleth map of Germany visualizes diesel prices by state using a yellow-orange-red sequential color scale. The map is rendered as SVG paths, with each region's fill color determined by the diesel value from a dataset of the German states. The D3.js library handles geographic projections via geoMercator and geoPath, while React manages the component state and data fetching via the csv and json API calls.

Oct 10, 2022

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence among adults aged 15–49 in 2017, with countries colored on a yellow-to-red sequential scale based on infection rates. It uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to render world boundaries and graticules. The React-powered application merges HIV data from IHME with ISO country codes, mapping each nation by numeric code. Countries without matching HIV data appear gray. The visualization is built with D3 v5, React, and TopoJSON, sourcing country shapes from World Atlas TopoJSON.

Sep 30, 2022

Loading thumbnail…

Fork of Bar Chart

This example presents a bar chart of global sales data across historical periods, rendered as an SVG with D3 version 6. It shows a default view of steel-blue bars, which transition to orange on mouse hover via D3's selection and transition APIs. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file and mapped to rectangles with explicit width and height attributes.

Sep 27, 2022

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization shows the total number of dead and missing migrants per month, aggregated by year from the Missing Migrants Dataset. It renders as an SVG bar chart using React, where each bar represents the monthly sum of fatalities. The code uses d3.bin to create monthly time bins and d3.sum to aggregate the y-values within each bin, with d3.scaleTime and d3.scaleLinear mapping the data to screen coordinates. Hovering reveals exact totals via SVG title tooltips, while axis components from d3 handle tick generation and formatting.

Sep 26, 2022

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map displays the global prevalence of HIV/AIDS among individuals aged 15-49 in 2017, using a yellow-orange-red color scale to represent infection rates. Countries lacking data appear gray. The visualization employs d3.geoNaturalEarth1 projection with d3.geoPath and d3.geoGraticule to render country boundaries and graticules from World Atlas TopoJSON, while population data from the IHME is joined to countries using ISO numeric codes. The map is built with React, D3 v5, and rendered as SVG, with a white sphere background and light gray graticule lines for spatial context.

Sep 24, 2022

Loading thumbnail…

Fork of Fork of Fork of 112 Multiple Views

This interactive visualization combines a map of the Netherlands with a synchronized date histogram to explore 112 emergency call data. A choropleth map displays individual incident locations as circles, while a linked brushable histogram below filters the map by date range. The visualization uses React with D3 v5’s `geoMercator` projection, `geoPath` for rendering municipal boundaries, and `brushX` for time filtering. Data comes from a CSV of geolocated emergency calls, with Dutch municipality boundaries loaded from TopoJSON.

Sep 23, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

A scatter plot displays the latitude and longitude coordinates of points from a CSV file, loaded with the `d3.csv` function. React renders the SVG visualization, using D3 scales (`scaleLinear`) to map data values to pixel positions. The chart includes styled axes and circular marks with tooltips. Data is sourced from a GitHub-hosted CSV, parsed with custom row formatting to handle comma decimal separators.

Sep 21, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of latitude and longitude coordinates loaded from a remote CSV file via d3.csv. The visualization shows data points positioned by their geographic coordinates, with axes scaled to exclude zero. Styling is customized through a Vega-Lite config object that adjusts font sizes, removes axis domains, and sets tick colors for readability. The chart is rendered as an SVG using vega and vega-lite, with tooltips provided by vega-tooltip, and its dimensions automatically fit the browser window.

Sep 20, 2022

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width as a scatter plot. Each flower is represented by an SVG circle with hover tooltips showing the exact x-axis value. The visualization is built using React for component structure, D3 v5 for data loading and linear scales, and SVG for rendering. The code includes custom AxisBottom, AxisLeft, and Marks components, with axis labels styled using the Poppins font and a clean teal color scheme for the data points.

Sep 20, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between a car’s fuel efficiency (miles per gallon) and its horsepower, colored by country of origin, using a scatter plot rendered with the Vega-Lite API in a D3.js environment. It loads auto-mpg data from a CSV via `d3.csv`, then builds the visualization declaratively with `vl.markCircle` and encodings for `x` (mpg), `y` (horsepower), `color` (origin), and a tooltip for the car’s name. The chart resizes to fill the browser window and applies custom axis and label styling from a shared configuration object.

Sep 20, 2022

Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face composed of three SVG circles: a large yellow circle for the head and two smaller black circles for eyes. The rendering uses raw SVG elements directly in the HTML, with the `<circle>` elements specifying explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The page also initializes a React application via `ReactDOM.createRoot` and renders a simple "Hello JSX" heading, though this React output is separate from the SVG drawing. The overall composition is fixed and does not respond to interaction or data.

Sep 14, 2022