Skip to main content
Log in
N

nikitamakkena

@nikitamakkena·18 public vizzes

Loading thumbnail…

Nikita's Family Tree

This D3.js v6 visualization displays Nikita's family tree as a static node-link diagram, with colored circles representing three generations and white labels for each person's name. The chart uses `d3.stratify()` to convert the flat parent-child data into a hierarchy, and `d3.tree()` to compute the layout, rendering the result as SVG circles and text with animated path connections that draw over one second.

Apr 3, 2022
Loading thumbnail…

Untitled

The visualization compares two hierarchical datasets side by side: a static flare.json tree rendered as a collapsible node-link diagram, and a force-directed network graph built from flare.json nodes and links, with ten named circular nodes. The tree layout uses d3.hierarchy, d3.tree, and d3.zoom to allow interactive collapsing and panning, while the network applies d3.forceSimulation with forceLink and forceManyBody. Users click nodes to toggle children across shared names, updating both views simultaneously. SVG elements and animated transitions handle rendering and interaction.

Apr 3, 2022
Loading thumbnail…

Nikita's World Map with D3.js!

This visualization presents a static world map rendered as an SVG. Countries are drawn in black with white outlines, and hovering over any country turns it yellow. The map uses the D3.js library with a geoEquirectangular projection and a sphere background in navy blue. It loads geographic data from the world-atlas package, processes it with topojson's `feature` method, and draws the paths via `d3.geoPath`.

Apr 3, 2022
Loading thumbnail…

Nikita's USA Country Map

This map of the United States displays all 50 states as a choropleth, with each state rendered as a filled path and colored blue, turning purple on hover. It uses the D3.js `geoPath` function with the `geoAlbersUsaTerritories` projection to draw the land boundaries and state interiors from the US Atlas TopoJSON dataset. The visualization is built in React, with the `useData` hook fetching the geographic data and `useEffect` triggering the TopoJSON transformation into geographic features and mesh lines. The SVG output is styled with CSS to emphasize state borders and provide interactive hover feedback.

Apr 3, 2022
Loading thumbnail…

Nikita's Area Chart

This area chart displays Nykaa’s stock sales from 2009 to 2022, using a smooth curve to show sales trends over time. D3 v5 with SVG renders both a black line for the data and a filled navy area beneath it, with labeled axes for year and sales. The code uses `d3.csv` to load the data, `scaleLinear` for both axes, and `line` and `area` generators with `curveBasis`. Gridlines and tick formatting are applied via `d3.axisBottom` and `d3.axisLeft`.

Mar 28, 2022
Loading thumbnail…

Nikita's Line Chart

This line chart displays the sales of Nykaa stock from 2009 to 2022, with time on the x-axis and sales values on the y-axis. The visualization uses D3 v5 to load CSV data from a GitHub gist, then applies `scaleTime` and `scaleLinear` to map the data, and renders the plot as an SVG with axes, grid lines, and a blue line path. The code includes custom axis labels and a title, with styling handled through an external stylesheet.

Mar 27, 2022
Loading thumbnail…

Nikita's Line Chart

This line chart visualizes movie ratings over time, with a red path mapping each rating to its corresponding movie count. The chart includes labeled axes, grid lines, and a title, with ratings on the x-axis and movie counts on the y-axis. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render SVG elements, processing CSV data loaded via `d3.csv` from a GitHub gist.

Mar 27, 2022
Loading thumbnail…

Nikita's Line Chart

This example shows movie ratings over time with a red line plot against labeled axes for movies and rating. The visualization uses d3.csv to load a dataset from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map data values to pixel coordinates within a fixed SVG canvas. Axes are generated with d3.axisBottom and d3.axisLeft, while the line path is drawn using d3.line. The chart includes axis labels, a title, and gridlines created through tick sizing.

Mar 27, 2022
Loading thumbnail…

Nikita's Pie Chart

Nikita's Pie Chart visualizes movie ratings as a proportional pie chart, with each slice colored by movie title and accompanied by an interactive legend showing the rating value in points. The chart uses D3 v5’s `pie()` generator to compute arc angles, `arc()` to render SVG paths, and `scaleOrdinal` for categorical colors. Data is loaded asynchronously from a CSV gist via `d3.csv`. The legend, built with D3 selections, pairs colored rectangles with movie names and formatted rating values using `format('.4~g')`.

Mar 27, 2022
Loading thumbnail…

Nikita's Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris dataset, mapping sepal and petal measurements to x and y axes with species-based color encoding. The example demonstrates a customizable D3 chart factory using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft`. It includes a legend and a two-second animation interval that cycles through different measurement columns, updating the plot dynamically. The visualization uses SVG rendering with D3 v6 and loads data from a remote CSV.

Mar 27, 2022
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset with a scatter plot mapping petal length and width, colored by species. The code loads CSV data, parses numeric fields, and uses D3 v6 scales, axes, and SVG circles. It appends axis labels and uses d3.csv, scaleLinear, extent, axisLeft, and axisBottom to render the chart across the full window size.

Mar 7, 2022
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the IMDb ratings of ten movies as a horizontal bar chart. Built with React and D3 v5, the app fetches data from a CSV file using `d3.csv` and renders SVG marks. The code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and manually maps ticks and rectangles from the data array. React state and `useEffect` manage the asynchronous data loading.

Mar 6, 2022
Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates the fundamentals of loading and parsing CSV data using D3.js v7 within a React framework. It shows a dataset summary metric—specifically the file size in kilobytes, row count, and column count—displayed prominently as text on a yellow background. The code fetches an IMDB dataset from a GitHub gist using the `d3.csv` method, then formats and computes these values with `d3.csvFormat` and `data.columns.length`. The final information updates a pre-element via the DOM API, alongside an embedded weather SVG illustration.

Feb 27, 2022
Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js v7. It fetches a remote CSV file via `d3.csv` and displays summary statistics—file size, row count, and column count—in a styled HTML `<pre>` element. The page also renders a standalone SVG image. The code uses a React framework setup, though the interactive data loading is handled entirely through D3’s promise-based `d3.csv` method, which parses the fetched data into an array of objects.

Feb 27, 2022
Loading thumbnail…

Smiley

The visualization assembles a basic smiley face from three SVG circles and one arc path, showing how primitive shapes combine into a recognizable icon. The code uses D3 v7 to select the SVG container and create a mouth via `d3.arc()`, with specified inner and outer radii and start/end angles. The eyes and face outline are plain SVG elements with fixed coordinates, pink fill, and black stroke. The example demonstrates minimal D3 integration, relying mostly on static markup for the face while reserving D3 for the path generation.

Feb 21, 2022
Loading thumbnail…

Fork of Fork of Fork of Let's make a face: part 3 tweaks

This example shows a stylized smiley face built with React and D3, rendered as SVG. It combines two radial facial features—a large face circle and a mouth arc—with two fixed eye circles, all drawn using D3’s `arc` generator and React’s declarative JSX. The face and accent strokes use SVG linear gradients for a black-to-white and white-to-black transition, while the eyes and mouth are filled with a solid khaki color. The code sets constants for dimensions, offsets, and radii, then uses ReactDOM to render the static composition centered on a 960×500 canvas.

Feb 21, 2022
Loading thumbnail…

Fork of Fork of Let's make a face: part 3 tweaks

This visualization shows a stylized smiley face composed of SVG shapes, including a circular head, two eyes, and a mouth. The face is centered within the viewport and uses gradients and contrasting colors for visual interest. Built with React and D3.js v7, it relies on the `arc` function from D3 to generate the mouth path, while React renders the SVG elements declaratively. A linear gradient fills the face and a separate gradient strokes its outline, with all geometric values defined as constants.

Feb 21, 2022
Loading thumbnail…

Fork of Let's make a face: part 3 tweaks

This example shows a simple smiley face rendered as an SVG graphic, composed of a gradient-filled circle, two smaller circles for eyes, and an arc for the mouth. The face is built using React for component structure and D3’s `arc` generator to define the mouth path. The code defines two linear gradients—one for the face fill and one for the stroke—and uses fixed constants for dimensions, colors, and offsets. The visualization is static, with no data or interactivity beyond the initial render.

Feb 21, 2022