Nika

@nikakogho·10 public vizzes

HIV Choropleth

This choropleth maps global migration events, with each point representing a single incident of death or disappearance. The map uses a square-root size scale to encode the total number of dead and missing, with semi-transparent teal circles overlaid on a world atlas. Rendered using React and SVG, the visualization employs `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for landmasses and graticules, and `d3.scaleSqrt` for point sizing. Data comes from the Missing Migrants Dataset, while country boundaries are sourced from the World Atlas TopoJSON.

Apr 12, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other as colored circles. Users can change which quantitative field appears on each axis through dropdown menus, allowing exploration of relationships between all four flower dimensions. The visualization uses React components to render SVG marks and axes, with D3.js v5 providing scales, CSV data loading, and extent calculations. A Poppins font and muted color palette give the chart a clean, modern appearance.

Apr 10, 2021

Loading thumbnail…

Menus with React & D3

This example shows a simple HTML dropdown menu for selecting a car model, built with React and D3. It renders a static select element with four car options (Volvo, Saab, Mercedes, Audi) using React’s `ReactDOM.render`. The code imports the `arc` function from d3, though it uses no D3 drawing or data-binding APIs in the visible logic. The example demonstrates minimal integration of React components with D3’s function imports, providing a basic interactive form control without additional visualization.

Apr 8, 2021

Loading thumbnail…

World Map

This example renders a world map using SVG, displaying country boundaries as paths. The visualization uses the D3 library's geoEqualEarth projection and geoPath to convert geographic data into SVG paths, with React managing the component state. The map draws a semi-transparent background sphere and country outlines in a teal color scheme. The data comes from the world-atlas TopoJSON file, which is fetched and converted to GeoJSON features using the topojson library.

Apr 7, 2021

Loading thumbnail…

Line Chart

This line chart displays temperature readings over the course of a week in San Francisco, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file using `d3.csv` and parsed into `Date` and numeric values. The visualization is rendered as an SVG using React components, with scales constructed via `d3.scaleTime` and `d3.scaleLinear`. Tick marks and labels are generated manually, while the line path is drawn using D3’s `line()` generator.

Apr 7, 2021

Loading thumbnail…

Fork of Fork of React & D3 - Bar Chart with actual Axes and Margin

This interactive bar chart displays UN population data for a selected year, with bars colored on a red-to-green scale using `d3.interpolateHcl`. A numeric input changes the year, re-rendering the visualization. The React app uses `d3.csv` to fetch data and `d3.scaleLinear` and `d3.scaleBand` for axes. Custom SVG components render the bottom and right axes, while `<rect>` elements in `Marks.js` draw the bars.

Apr 5, 2021

Loading thumbnail…

Fork of React & D3 - Bar Chart with Axes and Margin

This interactive bar chart displays United Nations population data for countries from 1950 onward, with a numeric input allowing the user to switch between years. The visualization uses React state to manage the selected year and fetched CSV data, while D3 v6 scales (d3.scaleLinear and d3.scaleBand) map population values to horizontal bar lengths and country names to vertical bands. Bars are rendered as SVG rectangles, colored via d3.scaleLinear with d3.interpolateHcl from red to green based on population magnitude, and positioned within explicit margins on a 960x500 canvas.

Apr 5, 2021

Loading thumbnail…

React & D3 - Simple Bar Chart

This example shows a horizontal bar chart of country populations for a selected year, with bars colored on a red-to-green scale based on their population values. The chart reads UN population data from a CSV file and displays a subset of countries. React manages the application state through hooks, including the currently selected year via an input field, while D3's `scaleLinear`, `scaleBand`, and `d3.interpolateHcl` handle scaling, layout, and color interpolation. The bars are rendered as SVG rectangles, with their widths and positions computed from the D3 scales.

Apr 5, 2021

Loading thumbnail…

Smiley face with svg

A smiley face rendered as an SVG in a React component using D3’s `arc` generator for the mouth. The face consists of a yellow circle head, two black eyes, and a pink tongue rotated with an SVG transform. The mouth is drawn as a thick arc between two angles. All shapes are positioned within a translated group, using explicit pixel coordinates for layout.

Apr 4, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a simple yellow circle face with two black circular eyes, built entirely with static HTML and CSS. The page uses a flexbox layout to center the eyes horizontally within the head, and CSS properties like `border-radius`, positioning, and margins to shape the face. It demonstrates basic styling with a `<style>` block and contains no JavaScript or data sources, serving as a minimal starter template for web visualization projects.

Apr 4, 2021