Skip to main content
Log in
S

s-pranathi

@s-pranathi·12 public vizzes

Loading thumbnail…

World Map using d3.js

This example displays a world map using the Eckert I projection, with countries rendered in green against a black spherical outline. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using `topojson.feature`. The visualization uses `d3.geoPath` to generate SVG paths from the projected geometry, with `d3-geo-projection` providing the projection function. Each country is drawn as a distinct path element with stroke and fill styling defined in CSS.

Apr 4, 2022
Loading thumbnail…

Country map using d3.js

This example displays a choropleth map of India, with each state rendered as a green SVG path against a black background. It uses D3’s `geoMercator` projection and `geoPath` generator to create the geographic outlines. State boundaries are drawn from a TopoJSON file fetched from a GitHub repository, processed with the `topojson.feature` function. The map is built entirely with SVG elements, and the overall shape is outlined using a sphere path, while state paths are appended dynamically after the data loads.

Apr 4, 2022
Loading thumbnail…

Social Network Graph

This visualization displays a social network graph using a force-directed layout. Nodes represent individuals, and lines depict connections between them, with each node labeled by name. The code uses `d3.forceSimulation` with `d3.forceLink` for the edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to keep the graph centered. The network data is loaded as JSON from a GitHub gist, and the SVG rendering updates node and link positions dynamically as the simulation runs.

Apr 4, 2022
Loading thumbnail…

Family tree using d3.js

This example displays a family tree as a node-link diagram rendered in SVG, with color-coded nodes indicating generational depth and curved paths connecting parents to children. The visualization uses d3.stratify() to structure flat parent-child data and d3.tree() to compute node positions within an 850x300 layout. Circles represent individuals labeled with names, while the code manually constructs cubic Bézier path strings for links and applies level-based fill colors via a custom getColor function.

Apr 4, 2022
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the Iris dataset, animating through different variable pairings on the x-axis every seven seconds. Using the `csv` loader with inline row parsing, it maps petal width, sepal width, petal length, and sepal length against sepal length, with circles colored by species via a custom switch. The chart is built with a configurable `scatterPlot` function leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering SVG and updating through `setInterval`.

Mar 28, 2022
Loading thumbnail…

Simple Area Chart

This example shows a simple area chart mapping “Marks Obtained” on the x-axis against “No. of Students” on the y-axis, with an unfilled, semi-transparent purple region beneath a stroked upper boundary. It uses D3 v7’s `scaleLinear`, `area` generator, and `axisLeft`/`axisBottom` to render axes and the path within an SVG. The hardcoded dataset of 21 x/y pairs is drawn directly, with axis labels added as rotated text.

Mar 28, 2022
Loading thumbnail…

Simple Line Chart

This visualization displays a simple line chart mapping student marks (x-axis) against the number of students achieving those marks (y-axis), with axis labels clarifying the relationship. The chart is rendered as an SVG element using D3 v7 within a React-adjacent HTML page. The code uses `d3.scaleLinear` to map data coordinates to pixel positions, `d3.line()` to generate the path, and the `axisLeft` and `axisBottom` functions from D3 to draw labeled axes. Data is provided as a static array of x/y pairs, and the line itself is stroked in orange with no fill.

Mar 28, 2022
Loading thumbnail…

Simple Pie Chart

This example shows a simple pie chart displaying market share values for five smartphone companies, with each segment labeled by its numeric value and accompanied by a legend showing company names. The chart is rendered as an SVG using D3.js v5, with data defined inline as JavaScript objects. It uses the `d3.pie()` generator to compute segment angles and the `d3.arc()` function to draw the donut-shaped segments, which have an inner radius, outer radius, and padding between arcs. Color encoding relies on `d3.scaleOrdinal` with the `d3.schemePastel2` palette, and legends are manually appended as SVG groups with rectangles and text elements.

Mar 28, 2022
Loading thumbnail…

Simple Scatter plot

A simple scatter plot displays the Iris dataset, mapping petal width on the x-axis against sepal length on the y-axis. Purple semi-transparent circles represent individual data points, with axes labeled "Sepal Length" and "Petal Length." The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` to construct the scales and axes, and SVG circles for rendering. Data is loaded as CSV from a GitHub gist and parsed with D3's `csv` method.

Mar 28, 2022
Loading thumbnail…

Simple bar chart

A simple bar chart displays the total medal counts for the top ten countries from the `ice6.csv` dataset. Purple, semi-transparent rectangles represent each country’s total, with country names on the y-axis and a numeric scale on the x-axis. The visualization is built with D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The SVG is rendered from a `bundle.js` file, with the `csv` function to load data and `axisLeft`/`axisBottom` to draw the axes.

Mar 7, 2022
Loading thumbnail…

Data Summary using HTML and D3

This example displays a summary of data loaded from a CSV file using D3.js and HTML. The page presents the data within a stylized layout featuring custom SVG illustrations of a lamp and a flower, which are rotated and positioned using SVG transforms. The code uses D3 v5 to load and process the CSV data, then displays summary information in the page’s heading. The CSS provides a gradient background and floating layout for the left and right SVG panels, while the central message area shows the data summary.

Feb 26, 2022
Loading thumbnail…

Smiley Face

This example renders a stylized smiley face as an SVG graphic using D3.js. The face is composed of a yellow circle with eyes, spectacles, a mouth, and a red tongue. The code uses d3-selection to append SVG elements and d3-shape’s `arc()` generator to create the round spectacle frames, the mouth arc, and the tongue shape. Rectangles, rotated via SVG transforms, form the right eye and the bridge of the glasses.

Feb 20, 2022