UVarshaReddy

@UVarshaReddy·25 public vizzes

Country map

This example displays a map of Pakistan rendered as a single SVG path. It loads world country boundaries from a TopoJSON file via `d3.json` and uses the `topojson-client` library to extract the specific country geometry. The map is projected using `d3.geoMercator()` with a fixed size, and the resulting path is drawn with `d3.geoPath`. The visualization is created by appending the path to an SVG element, demonstrating a straightforward use of D3’s geographic projection and rendering capabilities.

Jul 22, 2023

Loading thumbnail…

Map of the United States

A map of the United States displays the country's boundary as a GeoJSON layer over an OpenStreetMap tile base. The example loads state boundaries from `us-states.geojson` and renders them using Leaflet’s `L.geoJSON` and `L.tileLayer` APIs. It demonstrates integrating Leaflet with a plain HTML page, centering the view on the nation at zoom level four, and fetching geographic data asynchronously. The code includes D3 imports and local ES6 modules but uses only Leaflet for the actual mapping.

Jul 22, 2023

Loading thumbnail…

World Map

This example displays an interactive world map using Leaflet, with countries rendered as yellow polygons with black borders. The map initializes with a global view centered on [0,0] at zoom level 2. It fetches GeoJSON country boundaries from a GitHub-hosted world dataset and adds them to the map using Leaflet’s `L.geoJSON` method. The page also imports D3.js and local ES6 modules, though their primary role is demonstrated separately in the accompanying code structure.

Jul 22, 2023

Loading thumbnail…

Tree Visualization

This example displays a static, hierarchical tree layout with the root node "WEATHER" branching into three seasonal categories, each with three child nodes. It uses the D3.js v5 library with a `d3.tree()` layout and custom aggregation via `d3.hierarchy()` to structure the data. The visualization renders as SVG, applying distinct fill colors and geometric shapes (circles, rectangles, and ellipses) to each tree depth, with curved links drawn as SVG paths using cubic Bézier commands. Node labels are positioned dynamically based on whether they have children.

Jul 22, 2023

Loading thumbnail…

World Map with d3.js

This example renders a world map as an SVG using D3.js version 7. It applies a Mercator projection via `d3.geoMercator` and draws country boundaries with `d3.geoPath`, styling each path with a gray fill and dark stroke. The map loads GeoJSON country data from a remote GitHub repository using `d3.json`, and the visualization is contained within an HTML page that imports D3 from a CDN. The code demonstrates basic map projection and data binding in a simple, static geographic visualization.

Jul 22, 2023

Loading thumbnail…

World Map Visualization

A world map visualization colors each country according to a numeric value from an external CSV dataset. The example uses D3 v6 with a Mercator projection via `d3.geoMercator` and `d3.geoPath` to render GeoJSON country boundaries as SVG paths. Country fill colors are determined by a sequential blue color scale, while missing data appears gray. The code demonstrates loading remote TopoJSON and CSV files with `d3.json` and `d3.csv`, and includes an ES6 module import for a simple message.

Jul 22, 2023

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot visualizes the relationship between a person’s age and one of two scores, toggling between Score1 and Score2 every two seconds. It loads data from a local CSV file, using D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` functions. The visualization is rendered as SVG circles with axes and labels, updating dynamically via a timer. It highlights the use of local ES6 modules and the D3 `select` API for chart construction.

Jul 22, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two scores from a psychology dataset, plotting each data point as a steelblue circle. The x-axis represents Score1 and the y-axis represents Score2. The visualization loads data from a remote CSV file using d3.csv and creates linear scales with d3.scaleLinear to map data values to screen coordinates. D3 axes are generated for both dimensions, and the chart includes a title and axis labels. The code uses D3 v6 to select SVG elements and bind data for rendering.

Jul 22, 2023

Loading thumbnail…

World Map Visualization

This example renders a world map using D3.js and SVG, showing country boundaries as light blue shapes with white strokes. It loads GeoJSON world map data from a remote repository and applies a Mercator projection to convert geographic coordinates into screen positions, with the map centered on the canvas. The visualization demonstrates key D3 features such as `d3.geoMercator`, `d3.geoPath`, and loading external data via `d3.json`, alongside ES6 module imports from a local file. The map is drawn by binding the GeoJSON features to SVG `path` elements, with styling applied via inline attributes.

Jul 22, 2023

Loading thumbnail…

Social Network Graph

A social network graph displays five people as circular nodes connected by five undirected edges, with labels identifying each person. The visualization uses D3 v5’s `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to position nodes and links dynamically. Hardcoded data defines the nodes and links, and the SVG container updates on each simulation tick to draw lines, circles, and text labels.

Jul 22, 2023

Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot built with D3 v6, displaying Iris flower measurements with petal length on the x-axis and sepal length on the y-axis. The visualization loads CSV data from a GitHub repository and uses a custom `scatterPlot()` function that encapsulates scales, axes, and labels through a configurable API with methods like `.width()`, `.data()`, and `.xValue()`. The SVG rendering includes axis labels and animated circle elements, showing how D3's modular functions enable flexible, reusable chart components.

Jul 21, 2023

Loading thumbnail…

Untitled

A constant stream of randomly generated scatter plots replaces itself every three seconds, with each frame plotting fifty circles at random coordinates, sizes, and colors. The visualization uses D3’s `select` and `join` methods to update circle and text elements in an SVG canvas. A static title and rotated axis labels accompany the shifting data, demonstrating dynamic data binding and animation via `setInterval`.

Jul 21, 2023

Loading thumbnail…

Bubble Chart

A bubble chart displays the relationship between cost of living and population across five countries, with circle size encoding population and position encoding both variables. The example loads D3 v6 via UNPKG and uses SVG rendering. It constructs linear scales for the x- and y-axes, a square-root scale for circle radii, and an ordinal color scale from `d3.schemeCategory10`. Axis components are generated with `d3.axisBottom` and `d3.axisLeft`, and country labels are added as SVG text elements.

Jul 21, 2023

Loading thumbnail…

Scatter Plot of Birds on a Tree

This example shows a scatter plot tracking the number of birds observed in a tree at five different times throughout the morning, with each point colored by its time label. The visualization is built with D3 v6, using `d3.scalePoint` for the categorical time axis, `d3.scaleLinear` for the count axis, and `d3.schemeCategory10` for point colors. SVG circles and text labels are positioned via `cx`/`cy` attributes, and `d3.axisBottom` and `d3.axisLeft` render the axes.

Jul 21, 2023

Loading thumbnail…

Scatter Plot of Birds on a tree

This scatter plot visualizes the number of birds observed on a tree at five different times of day, from 8:00 AM to 12:00 PM. Each red circle represents a single observation, with its horizontal position determined by time and its vertical position by the bird count, which is also labeled directly above each point. The chart uses D3 v6’s `scalePoint` for the categorical time axis and `scaleLinear` for the numeric bird count, with axes generated via `axisBottom` and `axisLeft`, all rendered as SVG elements within a 600 by 400 viewBox. The data is hardcoded in the HTML file, and the visualization is built entirely with D3's low-level selection and append methods.

Jul 21, 2023

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the distribution of product categories—Formal, Casual, and Shoes—across four clothing brands. Each brand’s total value is segmented into three colored bars, with a legend identifying each category. The chart uses D3 v7’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `selectAll` to render the grouped rectangles as SVG. The dataset is hardcoded, and colors are assigned via an array of hex codes.

Jul 21, 2023

Loading thumbnail…

Medicine Inventory Chart

This example shows the quantity of five medicines in a bar chart, with yellow bars representing each inventory level and value labels placed above them. The implementation uses D3 v6 to build the SVG visualization, employing d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to render the chart axes. Static data is hardcoded in the HTML, and the chart includes rotated x-axis labels for readability. The code demonstrates core D3 data-joining patterns with selectAll, enter, and append to create the bars.

Jul 21, 2023

Loading thumbnail…

Country Map with d3.js

This example displays a world map using D3.js, coloring individual countries based on sample population data. It shows a Mercator projection of the globe, with the United States and China shaded according to the provided values. The visualization constructs the map by appending SVG paths from GeoJSON data to the chart. It relies on D3 APIs including `d3.geoMercator`, `d3.geoPath`, `d3.json`, `d3.scaleLinear`, and `d3.extent` to handle the projection, rendering, and color encoding, with a domain from data values mapped to a light-to-dark color range.

Jul 20, 2023

Loading thumbnail…

Reusable Scatterplot

A reusable scatterplot function visualizes calorie intake against body weight for five individuals, encoding each person as a violet circle with a text label. The chart constructs an SVG renderer using D3 v6, employing `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for gridlines. The data is hardcoded as an array of objects with person, weight, and calories fields, and the function accepts both the dataset and a container selector, demonstrating a modular approach to D3 chart creation.

Jul 20, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, using a smooth curve to connect data points and a light green fill beneath the line to emphasize the area. The visualization is rendered as an SVG using d3.v5, with axes, tick labels, and a rotated axis label styled via CSS. Data is loaded from a CSV file and parsed into Date objects for the time-scaled x-axis, while the y-axis uses a linear scale. The chart is built using d3's scaleTime, scaleLinear, line, area, and curveBasis functions.

Jul 9, 2023

Loading thumbnail…

Network Graph

This social network graph displays a set of named individuals and their “Friend with” connections. The visualization uses D3's `forceSimulation` API, combining `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the circular nodes. Rendered with SVG, nodes are draggable and turn green on hover; links use arrow markers. Node and link data are loaded from a local `graph.json` file.

Jul 9, 2023

Loading thumbnail…

MuscleCars tree

This example visualizes a hierarchical tree of muscle car models—from the root "Muscle Cars" down to brands like Ford and Dodge, and their specific models such as Mustang, Torino, Charger, Challenger, Hellcat, and SRT. The tree uses colored rectangular nodes for different type levels and includes a zoom-and-drag interface. It renders as an SVG using D3 v3’s `d3.layout.tree` for layout and `d3.behavior.zoom` for interaction, with node and link styling from custom CSS. The data is loaded from a static JSON file via `d3.json`.

Jul 9, 2023

Loading thumbnail…

Activity 8 Country

This example displays a single-country map of India projected with the Mercator projection. It fetches world country boundaries from the world-atlas TopoJSON data, extracts the India feature, and renders it as an SVG path using D3's geoProjection and geoPath APIs. The visualization demonstrates loading D3 v5 and topojson-client from CDNs, and fitting the map to a 960 by 500 pixel canvas.

Jul 9, 2023

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON. It renders country boundaries from the world-atlas dataset (countries-110m.json) as SVG paths via d3.geoPath and d3.geoEquirectangular projection. Zoom and pan interactions are enabled through d3.zoom, which applies SVG transforms. The map colors landmasses light green with indigo strokes and turns them maroon on hover, demonstrating local ES6 module imports and D3’s data join pattern.

Jul 9, 2023

Loading thumbnail…

Activity 7

This bar chart displays population figures for 30 countries in 2020, with countries listed on the vertical axis and population values on the horizontal axis. The visualization uses D3 v5 scales and React components to render SVG rectangles, with blue tick lines and green bars on a clean background. Data loads from a remote CSV file, and population values are converted from thousands using a custom row parsing function. The chart includes formatted axis labels using D3's format utility, converting values like "1.2B" for billions.

Jul 9, 2023