K

kottenikhil

@kottenikhil·22 public vizzes

Loading thumbnail…

ICE 8

This network chart shows the relationships between eight people grouped into four clusters, with node size and link thickness indicating connection strength. The visualization uses a force-directed layout via d3.layout.force, rendering nodes as green SVG circles with labels and blue links as lines. Node positions update continuously through the force simulation’s tick event, and dragging is enabled through force.drag. The data comes from a JSON file specifying node names, group assignments, and link weights. The chart is built with vanilla d3.v4 and d3.v2 for the layout, producing a simple interactive network diagram.

Loading thumbnail…

names

This example shows a family tree rendered as an interactive hierarchical diagram using D3.js. The visualization displays a root node ("nikhil") with four children, each branching to two leaf nodes, demonstrating a simple three-level genealogy structure. The tree layout positions nodes vertically based on depth, with collapsible behavior triggered by clicking any node. The code uses D3’s `layout.tree()` and `svg.diagonal()` functions, with SVG elements styled via CSS, while animated transitions between states are handled by D3’s `.transition()` method over 750 milliseconds.

Loading thumbnail…

Europe Map

This example displays a map of Europe rendered as SVG paths, with each country filled in white and outlined in grey. The visualization uses a Mercator projection centered on coordinates [13, 52] and scales the map to fit a 600×500 viewport. The code loads GeoJSON feature data from a remote GitHub gist, then applies `d3.geoPath` to convert the geographic coordinates into SVG path data. React 16 and D3 v5 work together, with D3 selecting the body element to append the SVG directly rather than mounting through React components.

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as yellow landmasses with black borders on a light blue sphere. It loads world country boundaries from the World Atlas TopoJSON data and converts it to GeoJSON using the `feature` function from TopoJSON. The map is drawn with D3’s `geoNaturalEarth1` projection and `geoPath` generator, appending SVG paths for both the background sphere and individual countries, styled via CSS classes.

Loading thumbnail…

world map

This example displays a natural Earth projection of the world, with landmasses rendered in green on a light blue spherical backdrop. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The code converts the TopoJSON country features to GeoJSON via the `feature` method from Topojson, then appends each path to the SVG. The sphere outline is drawn first to establish the globe’s boundary.

Loading thumbnail…

Scatter Plot using D3.JS

This example visualizes a 3D scatter plot of city-level economic indices, comparing cost of living, rent, local purchasing power, groceries, and restaurant prices across different cities. Two distinct traces plot each city as a marker, with hover text identifying the city name. The code uses the Plotly JavaScript API, specifically `Plotly.newPlot`, to render the chart, while D3.js (version 3.5.17) is used to load CSV data from a GitHub gist via `d3.csv`. The visualization demonstrates integrating D3 for data fetching with Plotly for 3D rendering.

Loading thumbnail…

nikhil_D3.js Bar Chart

This example visualizes the top 15 most expensive cities by their mean Cost of Living Index using a bar chart. The code loads CSV data via `d3.csv`, filters by rank, and aggregates values with `d3.nest()` and `d3.mean`. It renders an SVG with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, using `d3.axisBottom` and `d3.axisLeft`. Bars change color on mouseover and display a tooltip with city and index details.

Loading thumbnail…

D3.js Bar Chart

This bar chart displays the top 15 most expensive cities by their mean cost of living index, sourced from a CSV file. Using D3 v4, the code filters data by rank, nests entries by city, and computes averages with `d3.nest().rollup()`. It renders an SVG with `d3.scaleBand` and `d3.scaleLinear` axes, while interactive tooltips appear on mouseover via `d3.select` and style changes.

Loading thumbnail…

Fork of D3.js Bar Chart

This example shows a bar chart of the 15 most expensive cities by average cost of living index, with a bold title and hover tooltips revealing each city’s exact value. It loads CSV data from a GitHub gist via `d3.csv`, filters and aggregates it with `d3.nest()` and `d3.mean()`, then renders an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. Bars highlight orange on mouseover, with a tooltip appended dynamically to the page.

Loading thumbnail…

Nikhil_ice7

This visualization displays the cost of sales from 2000 to 2013 using a time-series area chart rendered with SVG. The chart features a red filled area beneath a black smoothed line, with labeled axes for Year and Cost. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate the path, while `axisLeft` and `axisBottom` provide gridlines. Data is loaded as CSV from a GitHub gist, with years parsed into JavaScript `Date` objects and costs converted to numbers.

Loading thumbnail…

Nikhil_ice7

This combined line and area chart shows the number of US students in universities from 2000 to 2008, with a black line tracing the trend and a semi-transparent aqua fill beneath it. The visualization uses D3 v5 to load CSV data and render an SVG, employing `d3.line` and `d3.area` generators with `curveBasis` smoothing, axis scales via `scaleLinear`, and styled tick marks from `axisLeft` and `axisBottom`. The chart includes custom axis labels and a five-pixel-wide stroke for the line, with data parsed from a remote gist URL.

Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart visualizes the cost of sales from 2000 to 2013, using a smooth, basis-curved line and a yellow filled area beneath it. The SVG rendering uses D3 v5 APIs including `select`, `csv`, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, `area`, and `curveBasis` to map year and cost data onto the chart. The dataset is loaded from a remote CSV file, with dates parsed into `Date` objects and cost values converted to numbers. Axis labels and tick formatting are applied, with grid lines styled via CSS.

Loading thumbnail…

Nikhil_line

This example displays a red line chart tracking the cost of sales from 2000 to 2013. The visualization uses D3 version 5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to render an SVG graphic. Data is loaded from a CSV file via the `csv` method, with year values parsed as JavaScript `Date` objects and cost values as numbers. The chart includes labeled axes, gridlines, and a title, with margins positioning the plot area within a 960×500 viewport.

Loading thumbnail…

Nikhil_pie

This example visualizes the basic monthly cost of Netflix plans across ten countries using a pie chart rendered with SVG. The chart encodes cost values as slice angles and colors, with a legend listing each country’s name and cost in dollars. The code uses D3 v5 APIs including `pie()`, `arc()`, `scaleOrdinal()`, and `schemeCategory10` for coloring. Data is loaded from a CSV hosted on GitHub Gist, sorted descending, and the top ten entries are displayed.

Loading thumbnail…

Nikhil_ice7

This visualization displays the basic costs of Netflix subscriptions across ten countries using a pie chart and a legend. It employs D3.js methods such as `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` to generate colored segments. The legend lists each country with its corresponding cost, formatted as dollar amounts. Data is loaded from a CSV file sourced from a GitHub gist. A separate `scatterPlot.js` module defines a reusable scatter plot with axes, though it is not invoked in the main rendering.

Loading thumbnail…

Nikhil_ice7

This scatter plot visualizes the Iris dataset, mapping petal length and petal width as the primary axes while encoding sepal length and sepal width into the ellipse-shaped markers’ horizontal and vertical radii. Each species (setosa, versicolor, virginica) is distinguished by color, with pink, black, and yellow fills respectively. Built with D3 v6 and React, it loads CSV data asynchronously, uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to construct the axes, and renders SVG circles with dynamic `rx` and `ry` attributes. The visualization fills the browser window, with axis labels rotated and styled via CSS.

Loading thumbnail…

ICE-6 Bar Graph

This bar graph displays the Rent Index for 12 global cities, comparing their relative rental costs. Built with React and D3 v5, it loads CSV data and renders an interactive SVG chart with horizontal bars. The code explicitly uses `scaleBand` for the city categories on the y-axis, `scaleLinear` for the numeric rent values on the x-axis, and manual axis tick generation with D3’s `ticks()` method. Grid lines are drawn as red vertical elements, and the data comes from a GitHub Gist URL.

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with each data point colored by species (blue for setosa, black for versicolor, red for virginica). The SVG visualization uses D3 v6 scales (scaleLinear), axes (axisLeft, axisBottom), and data joins to render circles, while React serves as the framework. The code loads data from a CSV URL and parses numeric fields, with additional attributes stored but not affecting the visual encoding.

Loading thumbnail…

nikhil ice6

This example shows a horizontal bar chart of Amazon prices across different states, using population data for the top 15 countries as a proxy. A React component manages state and renders the visualization as an SVG, while d3-scale’s `scaleBand` and `scaleLinear` position bars, and d3-axis utilities generate tick marks and labels. The data is loaded asynchronously via d3.csv from a GitHub gist. Grid lines and axis text are manually drawn with SVG elements, and the chart includes a blue vertical grid.

Loading thumbnail…

ICE 5

This visualization displays an aerial or satellite view of terrain in a dark, mysterious color palette. The image is rendered as a static SVG containing an embedded JPEG, shown through an SVG pattern fill. The code uses D3.js version 5 to set up the SVG canvas and pattern, with the base image data directly embedded as a base64-encoded string in the index.html file. No interactive or animated elements are present; the display is a fixed 1400x787 pixel view of the landscape.

Loading thumbnail…

ICE 5

This example visualizes the spatial layout of an ice sheet using a satellite-style base image embedded within an SVG. The image is applied as a pattern and rendered over a light gray background, creating a static map-like view. The implementation uses D3 v5 to load the data and Vue to manage the application structure, with the final output drawn as SVG elements. No interactive or animated behaviors are present; the visualization simply displays the geospatial pattern as a fixed image.

Loading thumbnail…

Fork of ICE4_Nikhil_Kotte

This visualization renders a field of randomly positioned, rotating ellipses and circles on a green-to-black gradient background. Using React and SVG, the code generates 500 elements, mapping each index to a color and a probabilistic position scaled by the canvas dimensions. Each group applies a rotation based on its index, and a static path depicting an organic shape is overlaid. React’s component structure defines `Ellipse` and `Circles` to compose the scene.