Skip to main content
Log in
V

venkatajayanth03

@venkatajayanth03·29 public vizzes

Loading thumbnail…

Untitled

This example displays a map of Japan rendered as SVG paths, with each prefecture drawn as a black shape outlined in white. The visualization uses d3.geoMercator projection with a clip extent and centers the map at coordinates [140, 30] with a scale of 700. It loads GeoJSON data via topojson’s feature method, applies a categorical color scale, and supports zooming and panning through d3.zoom. The map’s styling and layout are defined in an external stylesheet, and the data comes from a remote gist.

Jul 10, 2022
Loading thumbnail…

social network graph

This example shows a small social network graph with seven nodes representing business departments and external groups, connected by weighted links. The visualization uses D3 v4’s `d3.layout.force` (the pre-v4 force API) to position nodes in an SVG canvas, with node labels and circular marks styled via CSS. Link thickness is set with `stroke-width` based on the `weight` property from the JSON data, and nodes are draggable via `force.drag`. The data comes from an external `graphFile.json` file, rendered as SVG lines and circles.

Jul 10, 2022
Loading thumbnail…

team network

A force-directed network diagram shows friendship ties among eight people, with nodes representing individuals and directed links labeled by relationship type. The graph is rendered as an SVG using D3 v6, driven by `d3.forceSimulation` with link, charge, collision, and centering forces. Node positions update on each tick, and users can drag nodes via `d3.drag` to rearrange the layout. Node hover states and arrowhead markers on links enhance readability. Data comes from a local `data.json` file, and the visualization uses a single blue color scale for all nodes.

Jul 10, 2022
Loading thumbnail…

Operation Tree

This example shows a collapsible operation tree for electric vehicle modes, with color-coded nodes distinguishing normal and fault operation modes alongside their sub-modes. Users can click nodes to expand or collapse child branches, triggering animated transitions as nodes reposition. Built with D3 v5, the visualization uses `d3.tree` and `d3.hierarchy` for layout and `d3.linkHorizontal` for curved links, while `d3.zoom` enables panning and zooming. Nodes are rendered as SVG rectangles with labels, and data comes from a static JavaScript object defining the hierarchical structure.

Jul 10, 2022
Loading thumbnail…

operation tree

This example visualizes a hierarchical tree from JSON data, with nodes represented as colored boxes and links connecting them. The data uses a recursive structure with node names, types, and labels, and each node carries a link object indicating direction. The visualization is built with D3 version 3, using `d3.layout.tree()` to compute the tree layout and SVG for rendering. It also incorporates jQuery for DOM interaction, arrow definitions, and zooming and dragging behavior via `d3.behavior.zoom`. The tree structure is color-coded by node type, with tooltips available for additional details.

Jul 10, 2022
Loading thumbnail…

Untitled

This visualization displays a choropleth map of the United Kingdom using an Albers projection, with distinct colors for England, Scotland, Wales, and Northern Ireland, while hiding the Republic of Ireland. It renders subunit boundaries with dashed strokes and labels for each region, alongside place points and their labels. The code uses D3.js v3 with `d3.geo.albers`, `d3.geo.path`, and `topojson` to load and project geospatial data from a `uk.json` file, generating an SVG output within a React framework.

Jul 9, 2022
Loading thumbnail…

Untitled

This example presents a choropleth map of the world, coloring each country according to its economic classification. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1()` and renders SVG paths with `d3.geoPath`. Country boundaries are stroked in black, and hovering turns a country black. The code merges TopoJSON geometry with TSV data, and colors are assigned using `d3.scaleOrdinal` with a reversed `d3.schemeSpectral` palette, where the legend is not shown. Data is sourced from the `world-atlas` package and a custom TopoJSON file.

Jul 9, 2022
Loading thumbnail…

Fork of Jayanth

This visualization displays all countries of the world on a natural Earth projection, rendered as light green SVG paths with black outlines against a blue background. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate the geographic shapes from TopoJSON data. The country boundaries come from the world-atlas dataset, loaded asynchronously via d3.json and converted to GeoJSON features using the topojson.feature function.

Jul 7, 2022
Loading thumbnail…

Jayanth

This visualization displays a world map with all countries rendered in light green against a medium blue background using the Natural Earth projection. The map is drawn as SVG paths generated through `d3.geoPath` with a `geoNaturalEarth1` projection, processing TopoJSON data from the world-atlas package. Country boundaries are outlined in black, and the code fetches geographic data via `d3.json` before extracting features with `topojson.feature`. The example relies on D3 v5 and the topojson library to project and render the complete set of world nations.

Jul 7, 2022
Loading thumbnail…

Map

This example demonstrates the flexibility of D3 and React by rendering an interactive world map with adjustable projections. Users can switch between various projection types, such as mercator, orthographic, and equirectangular, while modifying scale, rotation, center, and other properties. The map displays country boundaries alongside a graticule, with controls for border width, dash pattern, background color, and an invert toggle. The visualization uses `topojson` for country data, `d3-geo` for projections and geographic shapes, and React to manage the user interface.

Jul 7, 2022
Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes two distinct data series from a CSV file fetched via D3’s `d3.csv` function. Each series is rendered as a set of markers in three-dimensional space, using the Plotly.js `scatter3d` trace type, with the first trace appearing as the default marker style and the second using a green color and custom marker properties. The plot is displayed in a `myDiv` container using `Plotly.newPlot`, with margins set to zero. The data is sourced from a GitHub Gist, and the visualization relies on both D3 version 3.5.17 and Plotly 2.9.0.

Jul 7, 2022
Loading thumbnail…

Jayanth

This example shows one day of top lottery sales across U.S. states using a 3D bar chart. The chart uses the Highcharts library with the highcharts-3d module to render a depth-enhanced bar plot. Each series represents a state, with multiple data points positioned along the x-axis categories, including lottery names like Florida Lotto and Powerball. The y-axis is labeled "Lottery Sales" and the title indicates the data is for a single day. The code configures chart options with enabled 3D perspective and stacking, and builds the chart via the jQuery-based `$('#container').highcharts()` API.

Jul 6, 2022
Loading thumbnail…

Area Chart

This area chart displays the growth of Android users from 2008 to 2017. The visualization uses a smooth curve to draw both the line and the filled area beneath it, with axes labeled "Year" and "Users". Built with D3 v5, the code leverages `scaleLinear`, `line`, `area`, and `curveBasis` to generate the SVG paths. Data is loaded from a CSV file via `csv`, with the y-axis formatted using `format('.3s')`.

Jul 3, 2022
Loading thumbnail…

Line Chart

This line chart visualizes vehicle sales in Texas from 1999 to 2012, using a time-scaled x-axis for years and a linear y-axis for sales figures sourced from a CSV file. Built with React and D3 v5, the SVG rendering uses `scaleTime`, `scaleLinear`, `line`, and `axisBottom`/`axisLeft` APIs to draw the path, gridlines, and labeled axes. The chart includes a title, rotated y-axis label, and brown stroke styling, with data loaded via `d3.csv`.

Jul 3, 2022
Loading thumbnail…

Piechart

This pie chart visualizes lottery ticket sales in Texas for a single day, displaying five categories with counts ranging from 390 to 3,597. Each slice’s arc length encodes the count value, with distinct colors assigned via `d3.scaleOrdinal`. The chart includes value labels positioned using the `d3.arc` centroid method and a legend listing names and counts. Data loads asynchronously from Lottery.csv using `d3.csv`, with counts parsed to numbers before `d3.pie` computes the angular layout.

Jul 3, 2022
Loading thumbnail…

Untitled

A donut chart displays the percentage distribution of five lottery games, with each sector labeled and separated by white strokes. The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to generate colored slices from the CSV data, rendering text labels via the arc centroid API. The SVG chart is sized to 500 by 400 pixels, with a legend positioned in the upper left.

Jul 3, 2022
Loading thumbnail…

Untitled

This example shows browser usage statistics for January 2017 as a donut chart, with each slice labeled by browser name and colored via a categorical scale. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the arc paths, and `d3.scaleOrdinal` for the color mapping. Data from the local CSV file `lottery.csv` is loaded with `d3.csv`, and the chart is rendered as SVG within a React-compatible HTML page. The title appears as static text, while slice labels are positioned using `label.centroid`.

Jul 3, 2022
Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers by runs scored using a pie chart, with a legend detailing each player’s name and run total. It loads data from a local JSON file and renders SVG paths via the D3 v5 `pie` and `arc` generators. The chart encodes run values as slice angles and uses `scaleOrdinal` with `schemeCategory10` for fill colors, while legends are built with appended SVG groups and text elements.

Jul 3, 2022
Loading thumbnail…

Untitled

This example displays a scatter plot of breakfast cereals, mapping calories on the x-axis against protein content on the y-axis, with each point colored by manufacturer. It uses d3.scale.linear for axis scaling, d3.svg.axis for axes, and d3.scale.category10 for categorical color assignment. A custom HTML tooltip appears on mouseover, showing the cereal name and its values. The data is loaded from a CSV file using d3.csv.

Jul 3, 2022
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart displays the number of COVID-19 cases for the top 20 countries, using a horizontal bar mark with length encoding the case count. Built with React and D3 v5, the visualization renders as SVG and uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `d3.csv` to load the data from a GitHub-hosted CSV file. The code explicitly draws axis ticks and gridlines, while `ReactDOM.render` mounts the chart into the DOM, and the title "Corona Cases" is provided in the HTML.

Jun 26, 2022
Loading thumbnail…

Bar Graph using D3.js

This example displays a bar chart of students’ final exam marks, with student names on the x-axis and marks on the y-axis. The visualization loads data from a CSV file (`marksheet.csv`) using `d3.csv`, then creates the chart with D3 v7’s `scaleBand` and `scaleLinear` for axes, and appends SVG `<rect>` elements for bars. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`, along with a title. The rendering is entirely SVG-based, with hardcoded margins and a fixed canvas size.

Jun 26, 2022
Loading thumbnail…

Fork of Climate change

This bar chart visualizes the distribution of global land temperatures by country, showing the frequency of data points across temperature ranges in Celsius. Using the p5.js library, the sketch loads CSV data from a GitHub repository and sorts the raw temperature values into 2,500-point buckets. The preprocessing function calculates bucket spans and counts, then renders horizontal bars with labeled axes, tick marks, and a rotated y-axis title. The visualization reveals the overall shape and concentration of temperature records across different climate zones.

Jun 26, 2022
Loading thumbnail…

Scatterplot for ICE6

A scatterplot visualizes the relationship between character Strength and Height, addressing whether taller characters are inherently stronger. Each circle represents a Marvel character, with position encoding both attributes, fill color indicating alignment (good, bad, or neutral), and radius scaled by total power score. The visualization supports brushing interactions on the x-axis to filter data. Built with React and D3 v5, it uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.brush functions, rendering as SVG with animated transitions.

Jun 25, 2022
Loading thumbnail…

Untitled

This bar chart displays monthly electricity consumption for a two-year period, using green and blue bars to represent different billing accounts. The visualization loads data from a local CSV file and renders an SVG graphic using D3.js version 3.5.17. The code employs d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for tick marks and labels. Month and year values are parsed with d3.time.format, while the vertical axis label is rotated using SVG transforms.

Jun 25, 2022
Loading thumbnail…

Fork of Years and Experience Barchart

A bar chart displays the relationship between years of experience and salary, with pink rectangles on a green background inside an SVG canvas. It uses D3 v7 to load CSV data from a GitHub gist and renders axes with `d3.axisBottom` and `d3.axisLeft`. The chart maps experience values to a band scale for x-positioning and salary to a linear scale for height, with axis labels added as SVG text elements. The data is sourced from Stamen employees as of January 2022.

Jun 25, 2022
Loading thumbnail…

ICE 5: Loading and Parsing CSV Data with D3.js

This example demonstrates a simple air travel information page that loads a CSV dataset and displays its summary statistics. The page features a header, an airplane SVG image, and a text area showing the total dataset size in kilobytes, row count, and column count. Using D3.js version 7, the code fetches data from a GitHub gist via `d3.csv()`, formats it with `d3.csvFormat()`, and calculates the byte length by dividing by 1024. The interface is styled with custom CSS for a cohesive visual presentation.

Jun 22, 2022
Loading thumbnail…

ICE 5: Loading and Parsing CSV Data with D3.js

This example displays a web page titled "Welcome to Air Travel Information Centre" that loads CSV data from a remote URL and summarizes its contents. It first shows an airplane SVG image, then uses D3.js v7's `d3.csv` and `d3.csvFormat` functions to fetch and parse the airtravel.csv file, calculating the data size in kilobytes, row count, and column count, which are displayed in a large styled `<pre>` element. The page uses plain HTML, CSS for background and font styling, and JavaScript with D3.js to handle asynchronous data loading.

Jun 22, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js application that displays the text “Hello VizHub!” in the center of the page. It uses the `select` function from D3 v5 to target a `#message` div and set its content from a local ES6 module. The code also imports the D3 library via UNPKG and separates the message string into a modular `myMessage.js` file, showing basic module import patterns and styling with CSS.

Jun 21, 2022
Loading thumbnail…

Fork of homework smiley face

This example shows a cartoon smiley face built entirely from basic SVG shapes, rendered inside a fixed 960×500 coordinate space. The face consists of a brown circle, yellow eyes with black pupils, grey eyebrow lines, and a D3 arc used for the mouth. The code uses React 17 to define the component and renders it to the DOM, while D3 v7 provides the `arc` generator that computes the mouth’s path with a start and end angle. React handles the SVG elements declaratively, with `stroke-width` and positioning set via attributes.

Jun 18, 2022