Skip to main content
Log in
N

nikeshkv

@nikeshkv·13 public vizzes

Loading thumbnail…

Let's Make a Map

This example demonstrates how to load and prepare geographic data for mapping. The page renders an empty SVG canvas and uses D3's `select` and `json` functions to request a world-atlas TopoJSON file from a remote URL. The code then applies the `topojson.feature` API to convert the raw TopoJSON geometry into GeoJSON feature objects for the world's countries. While the resulting shapes are not yet drawn, the visualization establishes the data pipeline for a future map projection and rendering step.

Jan 11, 2021
Loading thumbnail…

Fork of Bowl of fruits - Hover

A fork of the "Bowl of Fruits" example demonstrates hover interactions with D3.js. Five apples animate into a row, then undergo changes over time: an apple is eaten, one transforms into a lemon, another is removed, and a third becomes rotten. Hovering over any fruit highlights it with a black outline. The visualization uses D3’s `select`, `scaleOrdinal`, and `transition` APIs for smooth radius and position animations.

Jan 11, 2021
Loading thumbnail…

Bowl of fruits - Click

A bowl of five apples is shown as colored circles, which can be clicked to select a fruit and highlight it with a black outline. Over time, the apples are eaten, replaced with a lemon, and eventually rot, changing their color and radius with animated transitions. Built with D3 v5, the visualization uses `scaleOrdinal` for color and radius mapping, `selection.data` with a key function for updates, and chained `transition` calls to animate enter, update, and exit states.

Jan 4, 2021
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row as SVG circles, colored red and sized by a D3 ordinal scale. Clicking any fruit selects it, highlighting it with a black stroke via React state. The D3 v5 scales map fruit types to colors and radii, while React components handle rendering and interactivity.

Jan 4, 2021
Loading thumbnail…

Fork of Bowl of Fruit - Add labels

This example demonstrates the dynamic lifecycle of a fruit bowl scene, where a sequence of timed events alters an array of fruit objects—adding apples, removing individual items, and swapping an apple for a lemon—while a D3 visualization updates in response. The scene renders each fruit as a colored circle with a text label, using `d3.scaleOrdinal` for color and radius mappings. The `fruitBowl` function reacts to data changes by merging new and existing SVG groups, updating their positions, circle attributes, and labels through D3’s selection and merge methods. The code utilizes D3 v5.

Jan 3, 2021
Loading thumbnail…

Bowl of fruits

A bowl of five apples animates through a sequence of changes: one apple is eaten, a second is replaced by a lemon, another is eaten, and a final apple rots. The visualization uses D3 v5 with an ordinal color scale mapping fruit types to red, yellow, and brown, and an ordinal radius scale for size. Each fruit is an SVG circle, and transitions are animated over one second using D3's transition API. The data is generated randomly in JavaScript and rendered within an SVG canvas.

Jan 2, 2021
Loading thumbnail…

Line Chart

This line chart displays yearly rainfall data from 2000 to 2004, using data from Data Canvas - Sense Your City. The visualization shows a smooth curve connecting rainfall measurements across the years, with labeled axes for year and rainfall amount. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the path, and `axisLeft` and `axisBottom` for the chart framework. The SVG rendering includes a title, axis labels, and tick marks with custom styling.

Jan 1, 2021
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between car weight and fuel efficiency (mpg) using data from the UCI Machine Learning Repository's Auto MPG dataset. Each red circle represents a car, plotted with d3.scaleLinear scales for both axes, which are rendered using d3.axisBottom and d3.axisLeft with gridlines. The visualization is built with D3 v5, using selection and data binding to append circles to an SVG, while styling is applied through CSS for opacity and font sizes.

Dec 31, 2020
Loading thumbnail…

Making a bar chart

A horizontal bar chart displays country populations from a CSV file, with bars colored steel blue and axes labeled. The visualization is built with D3 v5, using `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisBottom` with tick formatting. SVG elements are appended and transformed via D3 selection methods.

Dec 30, 2020
Loading thumbnail…

Face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows and mouth in a looping transition. The code builds the face using D3.js v5 selection and append methods to create circles, rectangles, lines, and an arc-based path, all positioned with hardcoded coordinates. The eyebrows shift upward and the mouth changes thickness through chained `transition().duration(3000)` calls, demonstrating basic DOM manipulation and attribute updating without data binding.

Dec 28, 2020
Loading thumbnail…

SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and a path—can be styled using external CSS. It shows that SVG elements inherit presentation attributes from CSS classes and parent groups, with the `.lines` class applying a red stroke and width to lines while the path overrides its stroke color. The code uses native SVG elements with the `transform` attribute for scaling and translation, alongside a linked `styles.css` file. Rendering is purely SVG-based without JavaScript libraries.

Dec 28, 2020
Loading thumbnail…

HTML Cars Report

This example demonstrates a basic HTML page titled “HTML Cars Report,” displaying a static list of two text items with a highlighted second entry. The visualization is minimal, focusing on a plain content hierarchy rather than data-driven graphics. The code uses a simple `ul` list within an `index.html` document, styled by an external `styles.css` stylesheet. It applies global font sizing and family via CSS `body` rules and highlights the second list item using a `.highlighted` class with a red color property. No JavaScript libraries or interactive APIs are employed; the structure relies solely on HTML and CSS.

Dec 28, 2020
Loading thumbnail…

Cars Report

This example demonstrates a minimal data visualization setup using D3 v5 loaded from a CDN via UNPKG, alongside a local ES6 module for car data. The page displays static text from an imported `cars` array containing two entries, rendered into a `<pre>` element using `document.getElementById`. The code highlights modular imports, JSON parsing, and simple DOM manipulation, with CSS styling applied through `styles.css`. No charts or visual encodings are present; the focus is on foundational D3 and ES6 integration.

Dec 28, 2020