Kunkgg

@Kunkgg·10 public vizzes

Fork of SF Arrests

This map shows the last week of arrest incidents in San Francisco, with each arrest plotted as a point over neighborhood and street base layers. The visualization uses d3.geoConicEqualArea for the map projection and d3.geoPath to render GeoJSON outlines, with a dark circle symbol for each arrest. Police incident data is fetched live from the SODA API, filtered by resolution and date range, while neighborhoods and streets come from static GeoJSON exports. Interactive tooltips display neighborhood names on hover, and pointer events are disabled on the street layer to maintain symbol accessibility.

Apr 14, 2021

Loading thumbnail…

Fork of Missing Migrants Multiple Views

This interactive visualization presents the Missing Migrants dataset through two coordinated views: a world map with proportional circles indicating total dead and missing, and a time-series histogram aggregating monthly totals. The map uses a projected sphere with graticules and country boundaries from the World Atlas TopoJSON, with circle sizes scaled by square root. The histogram bins reported dates into monthly intervals using d3.histogram and d3.scaleTime. Both views are rendered as SVG within React, using d3.scaleSqrt, d3.geoNaturalEarth1, and d3.geoPath. Data comes from a hosted CSV file of global migrant incidents.

Apr 13, 2021

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes 400+ missing migrant events from a 2019 subset of the Missing Migrants Dataset, mapping reported dates on the x-axis against the total dead and missing count on the y-axis. Each circle represents a single event, with tooltips showing the date. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `csv` for data loading. SVG elements render axes and marks, while reusable components like `AxisBottom`, `AxisLeft`, and `Marks` structure the layout with styled grid lines and a Poppins font.

Apr 13, 2021

Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The map includes land masses, country borders, graticules, and a sphere outline, rendered with `geoNaturalEarth1` projection and `geoPath` from d3. City data comes from the Simplemaps World Cities Database, filtered to populations above 50,000. The React app loads TopoJSON world atlas data and CSV city data, then renders SVG circles with transparency over the geographic features.

Apr 13, 2021

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, with dropdown menus allowing users to select the attributes mapped to the x- and y-axes. The React application uses D3.js scale functions, including `scaleLinear` and `extent`, to compute domains and ranges for the SVG circles representing each iris flower. The D3 `csv` loader asynchronously fetches and parses the dataset from a GitHub gist, while the `react-dropdown` component provides the menu interface, and axis ticks are rendered with D3’s scale methods.

Mar 26, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as bars spanning the full width of the SVG, with no axes or labels. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and sorted by 2020 population. React hooks (`useState`, `useEffect`) manage the asynchronous data fetch, while `d3.scaleBand` and `d3.scaleLinear` position the rectangles. The rendering uses SVG generated from React components, with bars sized proportionally to population values.

Mar 25, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile efficiency and performance across different regions of origin. Each circle represents a vehicle, positioned by miles per gallon and horsepower, with color encoding the continent of manufacture and size reflecting vehicle weight. Hovering reveals the model name via tooltip. The visualization is constructed using the Vega-Lite API within a D3.js framework, loading data from the UCI Auto MPG dataset and rendering through Vega’s SVG output with custom styling for improved readability.

Mar 22, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency data from the UCI Machine Learning Repository's Auto MPG dataset, showing the relationship between miles per gallon, horsepower, and weight across different countries of origin. A scatter plot with semi-transparent circular marks encodes the quantitative axes and origin as color, while car weight determines point size. Built with the Vega-Lite API for D3, the visualization registers Vega and Vega-Lite with a tooltip handler, loads CSV data via `d3.csv`, and renders an interactive SVG fitted to the browser window. Custom configuration adjusts axis labels and tick marks for readability.

Mar 22, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen smiley faces, each with randomized facial features, is rendered. The example demonstrates building a modular, reusable vector graphic with React components, where each face is composed of `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` elements. The `Mouth` component leverages the d3 `arc` API to generate a path. Each face is generated with random values for stroke width, eye offset and radius, and mouth dimensions, producing a varied collection within a fixed 160x160 pixel canvas.

Mar 21, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a simple cartoon face using React and SVG, with a yellow circular head, black stroke outline, two eyes, and a curved mouth. The face is composed of separate React components for the background, eyes, and mouth, all nested inside a container that centers them. The mouth uses the d3.arc function to generate a path, while the layout of facial features is calculated from the face dimensions. The code renders the face into a root element using ReactDOM.

Mar 21, 2021