Skip to main content
Log in
M

MeghanaArepalli

@MeghanaArepalli·15 public vizzes

Loading thumbnail…

ICE-8_Country_Map

This example displays a choropleth map of the United States, highlighting state boundaries and interior borders against a graticule grid. It shows the nation as a single landmass with a distinct fill, while state separations appear as green lines. The visualization uses the `geoAlbers` projection and `geoPath` from D3.v5, with data loaded from the us-atlas TopoJSON via `d3.json`. The rendering is done in SVG within a React component, applying CSS class styles for the land, sphere, and interiors. The graticule is drawn using `geoGraticule`, though not explicitly rendered in the final output.

Apr 3, 2022
Loading thumbnail…

ICE-8_Network_Chart

This network chart visualizes relationships among seven characters, with weighted links drawn as purple lines of varying thickness. Nodes are rendered as green circles with black labels, and users can drag them to rearrange the layout. The visualization uses d3.layout.force to simulate physical forces like gravity, distance, and charge, positioning the nodes dynamically. Data comes from graphFile.json, which defines nodes and links with optional weight values. The SVG rendering is handled through D3 v4, with styles defined in CSS for the links, node circles, and text.

Apr 3, 2022
Loading thumbnail…

ICE-8_Family_Tree

This example shows an animated family tree visualization built with D3.js version 3. The tree uses an SVG layout with rectangular nodes color-coded by type, and it renders parent–child relationships from a JSON data source. The visualization supports interactive node clicking, zooming, and dragging through D3’s `d3.behavior.zoom` and `d3.layout.tree` APIs. Node labels appear inside foreignObject elements, while tooltips and links are also implemented as SVG groups, with transitions animating node positions on updates.

Apr 3, 2022
Loading thumbnail…

ICE-8_Country_Map

This interactive choropleth displays the contiguous United States and territories, with each state path filled in yellow and outlined in blue. Hovering over a state turns it green and reveals its name via a tooltip. The map uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to render TopoJSON data from a GitHub gist, while TopoJSON’s `feature` API converts the TopoJSON objects into GeoJSON features for binding to SVG path elements. State names come from the `properties.name` field.

Apr 3, 2022
Loading thumbnail…

ICE-8_World_Map

This visualization displays a world map with countries rendered in purple with yellow outlines, set against a blue sphere background. Using d3-geo's geoEquirectangular projection, the code loads GeoJSON data from the world-atlas TopoJSON file via topojson.feature to draw each country path. The map responds to hover events, highlighting countries in green. It also includes a canvas-based alternative implementation using d3.geoPath with a graticule layer.

Apr 3, 2022
Loading thumbnail…

Line_chart_facebook_users

This line chart displays Facebook's annual user count from 2008 to 2017. The visualization, rendered as an SVG, plots the number of users against each year. The code uses D3 v5 functions such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart with labeled axes and a styled path. Data is loaded from a CSV file hosted on GitHub Gist via `csv()`, with the year parsed as a date and user numbers converted to numeric values.

Mar 27, 2022
Loading thumbnail…

Area_Chart_facebook_users_anually

This area chart displays Facebook’s annual user growth from 2008 to 2017, emphasizing the upward trend through a smooth, curved filled region. The visualization uses D3 v5 with `d3.area()` and `d3.line()` generators, both employing `curveBasis` for smoothing, while scales are created via `scaleLinear`. Axes are rendered with `axisBottom` and `axisLeft`, featuring green tick labels and orange gridlines. Data is loaded as CSV from a GitHub gist and parsed with `csv()`, then drawn as SVG paths within a fixed 930x450 viewport.

Mar 27, 2022
Loading thumbnail…

Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (green, purple, or red). It uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisLeft and d3.axisBottom to render the scales. Circles are drawn as SVG elements via a data join, with labels for the axes in red and purple. The plot is rendered in vanilla HTML.

Mar 27, 2022
Loading thumbnail…

Pie_chart_Us_states_density

A pie chart displays the population density of the top 10 U.S. states, with each slice sized proportionally to its density value and colored via a distinct scale. The chart labels each state with its density in thousands, and a legend lists states with corresponding color swatches. Built with d3.v5, the visualization loads CSV data from a GitHub gist using `d3.csv`, computes pie angles with `d3.pie`, draws SVG paths via `d3.arc`, and assigns colors through `d3.scaleOrdinal`. The SVG canvas is 960 by 500 pixels, with the pie centered and legends offset to the right.

Mar 27, 2022
Loading thumbnail…

Fork of Pie_chart_Us_states_density

This pie chart visualizes 2022 US auto sales by brand, with each slice sized by year-to-date sales and a color-coded legend displaying brand names and sales figures in thousands. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to generate SVG paths, loading data from a CSV via `d3.csv`. A sequential color palette distinguishes eleven brands, while custom legend text formatting applies `d3.format` for readable values.

Mar 27, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that cycles through different dimensions of the Iris dataset every two seconds, animating the points as the x-axis mapping changes between columns such as petal width and sepal length. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and data joins to render SVG circles with axes. It loads CSV data via `d3.csv`, parses numeric fields, and applies a custom margin and fixed radius per point. The animation is driven by `setInterval`, updating the x-value accessor and re-invoking the chart function.

Mar 23, 2022
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

A horizontal bar chart displays student enrollment across ten computer science courses, with purple bars sorted from highest to lowest by the number of enrolled students. The visualization uses D3.js v7’s `scaleLinear` and `scaleBand` to map enrollment counts and course names, while `axisLeft` and `axisBottom` generate the categorical and numerical axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes rotated axis labels for courses and enrollment counts.

Mar 6, 2022
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and petal width on the y-axis. Each point is colored by species (setosa, versicolor, or virginica), though the code also loads sepal dimensions without displaying them. Built with D3 v6, it uses `d3.csv` to load data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. Circles are rendered as SVG elements with `selectAll` and `join`, with axis labels added via SVG text elements.

Mar 6, 2022
Loading thumbnail…

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

This example demonstrates how to load and parse a CSV dataset containing the population of 50 US states and their capital cities using D3.js. The page displays a header and a message showing the dataset's size in kilobytes, the number of rows, and the number of columns. It uses the `d3.csv` API to fetch the remote CSV file and the `d3.csvFormat` function to calculate its size. The visualization includes a static SVG map of the United States with state outlines rendered in green.

Feb 28, 2022
Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of “Let's make a face with D3.js!” builds an SVG smiley face with animated eyebrows using fundamental DOM manipulation. The face includes yellow circular head, two eyes, a nose, and a mouth, all positioned via SVG attributes and transforms within a centered group. The code uses D3 v5’s `select` and `arc` functions to create the facial features, with eyebrows drawn as arc paths that can shift position. A YouTube tutorial in the README supports learning the underlying D3 concepts.

Feb 20, 2022