N

NikhilMakkena

@NikhilMakkena·20 public vizzes

Loading thumbnail…

Fork of Interactive pie and bar

This example presents an interactive dashboard comparing top countries across teaching, research, and citations, with a pie chart linked to a bar chart. Hovering over a bar filters the pie and legend to show that country’s breakdown, while the bar chart updates based on pie interactions. The visualization uses D3 v3 with SVG and transitions, building ordinal and linear scales, and binding events like mouseover and mouseout to sync the components. Data is embedded as frequencies per category, rendered through React.

Loading thumbnail…

Fork of HTML Starter

This example displays a static SVG word cloud embedded directly into a minimal HTML page. The image is loaded from an external GitHub Gist URL and rendered at a fixed width and height using a standard `<img>` tag. The code relies on plain HTML and CSS for layout, with no JavaScript libraries or interactive features present. The visualization highlights the simplicity of hosting and displaying a pre-rendered SVG graphic within a basic web document structure.

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart displays the number of university students at ten institutions, with each slice labeled and colored using a custom ordinal scale from d3-scale-chromatic. Hovering over a slice reveals a tooltip showing the percentage of total enrollment. Built with D3.js, the visualization uses d3.pie, d3.arc, and d3.select to compute slice geometries and handle mouse events, rendering as SVG. Data is loaded from a CSV file containing university names and student counts.

Loading thumbnail…

NIKHIL ICE 8 SOCIAL NETWORK

A force-directed network chart built with D3 v6 visualizes the relationships between actors, directors, and films in a social network. Nodes represent individuals and films, sized and colored by group, while links depict projects with a relationship type and weight. The layout uses `d3.forceSimulation` with link, charge, collision, and center forces, rendering nodes as SVG circles with labels. Users can drag nodes to reposition them, and hovering highlights a node with a blue border. Data comes from a JSON file containing nodes and links metadata.

Loading thumbnail…

Fork of Force Network

A network chart displays relationships between actors, directors, and films, with nodes colored by group and sized by their connection count. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while SVG lines represent links. Drag-and-drop interaction is implemented via d3.drag, and hover styling highlights nodes with a CSS class.

Loading thumbnail…

Fork of Network Diagram

A force-directed network diagram shows three central nodes—labeled NIKHIL, SUMANTH, and NISHITH—connected by colored links, with small leaf nodes branching from each. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, rendered as SVG circles and lines with labels. Node sizes vary by hierarchy level, and colors come from a predefined palette in `colors.js`. Drag interactions are enabled via D3’s `drag` behavior, allowing manual repositioning of nodes within the 960×960 SVG canvas.

Loading thumbnail…

Nikhil ICE 8 Social tree

This visualization depicts a social tree centered on Nikhil, with a child node for Nishith that branches into several anonymous connections and a link to "Silicon Valley Creates." The network layout is computed using d3.forceSimulation, which combines forceManyBody, forceLink, and forceCenter to position nodes. Rendered as an SVG with circles and lines, the node and edge positions update on each simulation tick, while labels are drawn using text elements. The data is defined locally in the data.js file with a fixed set of nodes and links.

Loading thumbnail…

Untitled

This example shows a force-directed network graph of social connections, with circles representing nodes and lines representing links between them. The layout is computed using d3.forceSimulation, which applies link, charge, and center forces to position the nodes dynamically. Node and link positions update on each simulation tick via the ticked function. The graph loads JSON data from a remote GitHub gist and renders in SVG, with nodes filled in green and links drawn in black.

Loading thumbnail…

NIKHIL ICE 8 USA Country Map

This visualization displays a map of the United States with state boundaries drawn in red and black. Using React with D3 v5, the code employs `geoAlbersUsaTerritories` for projection and `geoPath` to render SVG paths from TopoJSON data. State interiors are generated using the `topojson` library’s `mesh` function, while the land features come from the `feature` method. The map loads geographic data from an external GitHub Gist URL.

Loading thumbnail…

Fork of Swedish map

This visualization presents a choropleth-style map of Swedish counties (laen), rendered as black filled polygons with white interior boundaries, using a Mercator projection fitted to the viewport. It loads GeoJSON data from a topojson file via d3.json and converts it using the topojson.feature and topojson.mesh APIs. The React component uses d3.geoPath with projection.fitExtent to scale the map, while SVG paths are generated dynamically in the Marks component. The styling applies distinct fill and stroke colors to distinguish county regions from administrative borders.

Loading thumbnail…

NIKHIL ICE 8 Family Tree

This interactive family tree visualizes four generations of a family, with nodes representing individuals and links showing parent-child relationships. Users can click any node to expand or collapse its descendants, with smooth animations transitioning nodes between states. The diagram updates in real time, repositioning the tree layout to accommodate the visible structure. The visualization uses D3.js version 3.5, specifically the `d3.layout.tree` and `d3.svg.diagonal` APIs, to generate the hierarchical layout and curved links. Colors encode generation level: green for the first, blue for the second, purple for the third, and red for the fourth. The underlying data is hardcoded as a JSON tree structure within the script.

Loading thumbnail…

Nikhil ICE 8 WORLD MAP

This visualization presents a world map using the equirectangular projection, rendering countries as green paths on a blue spherical background. It loads geographic data from the `world-atlas` TopoJSON dataset, which is converted to GeoJSON using the `topojson.feature` function. The map is drawn with D3 v5’s `geoPath` and `geoEquirectangular` APIs into an SVG, with static styling applied via CSS classes for the sphere and country outlines.

Loading thumbnail…

Fork of Line Chart

This example displays a line chart of U.S. cancer cases from 2009 to 2022, with the year on the x-axis and case counts on the y-axis. It loads CSV data from a GitHub gist using `d3.csv`, parses the values, and renders the chart as an SVG with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and a `d3.line` path generator. The chart includes grid lines, axis labels, and a title, all styled via CSS.

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization displays US cancer cases from 2009 to 2022 using a combined line and area chart. The line chart traces the yearly case counts with a smooth curve, while the filled area beneath emphasizes the magnitude of the data. Both the x-axis and y-axis use linear scales, with formatted tick labels. The code imports specific D3 v5 modules like `scaleLinear`, `line`, and `area`, and applies `curveBasis` for smoothing. The data is loaded from a CSV file hosted on GitHub, and the SVG rendering is styled with custom CSS classes.

Loading thumbnail…

Fork of Pie Chart

This visualization displays the protein content of various cereals as a pie chart, with each slice colored and labeled through an accompanying legend that shows both the cereal name and its protein value in grams. The code uses D3 v5’s `pie` and `arc` generators to compute and render the SVG paths, while `scaleOrdinal` assigns a categorical color palette. Data is loaded asynchronously from a CSV gist via `d3.csv`, and the legend values are formatted using `d3.format`. The chart is rendered as static SVG with no interactivity.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris dataset, mapping sepal and petal measurements to x and y axes while coloring each point by species. Built with D3 v6, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render axes and positioned SVG circles with a custom `scatterPlot()` chart factory. The plot cycles through four measurement combinations every two seconds via `setInterval`, updating the x-axis and circle positions with an animated transition. A static legend identifies the three iris species.

Loading thumbnail…

ICE 6-1

This visualization displays a bar chart of protein content in grams for ten breakfast cereals, sorted alphabetically by cereal name. Built with React hooks and D3 v5, the chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Cereal data is loaded from a CSV file via `d3.csv`, with each bar rendered as an SVG `<rect>` element. The code manually draws grid lines and axis tick labels using `xScale.ticks()`, and all styling is applied via CSS, including the green rect fill and red grid lines.

Loading thumbnail…

Ice 6-2

This visualization displays the Iris dataset, mapping petal length and width to the x- and y-axes while encoding sepal dimensions through each circle’s rx and ry radii, which are drawn as ellipses rather than standard circles. Species are color-coded (green, purple, orange) via a switch statement, with D3 axes labeled “Sepal length” and “Petal Length” shown at 24px tick font. The code loads CSV data using d3.csv, applies scaleLinear for both axes, and renders SVG circles with d3.selectAll and join. Axis labels are added as SVG text elements with rotation for the y-axis.

Loading thumbnail…

ICE 5 NIKHIL

This visualization presents a simple data summary for a cereal dataset, displaying the dataset's size in kilobytes, row count, and column count in large, centered text. The page loads a CSV file from a GitHub gist using D3's `d3.csv` method, then calculates and formats the summary with `d3.csvFormat`. The interface also includes a static SVG panda image, styled with custom CSS for a colorful coral background and purple header, showcasing a basic data-loading example within a React framework.

Loading thumbnail…

Ice 4 final viz

This example uses D3 version 7 to draw a static cartoon face in an SVG element. The code builds a red circle as the head, adds two eyes and rectangular eyebrows, and creates an open mouth using the `d3.arc()` path generator. All shapes are positioned manually with SVG coordinates and grouped using `g` elements. The visualization demonstrates basic SVG drawing primitives and path construction without interactive behavior or data binding.