G

gopiganta

@gopiganta·17 public vizzes

Loading thumbnail…

Network graph of Social Connections

This example visualizes a small social network of seven people, showing connections as green lines whose thickness reflects link weight, with labeled purple nodes positioned by a force-directed layout. The graph uses a fixed JSON dataset with node names and group assignments, rendered as SVG. It leverages the D3 v4 `d3.layout.force` API to simulate physics, enabling nodes to be dragged and repositioned interactively. Link widths are set via `Math.sqrt(d.weight)`, and both circles and text labels are styled through CSS.

Loading thumbnail…

Family Tree

This interactive family tree visualization displays hierarchical relationships among individuals, with nodes color-coded by type and labeled links showing connections. The tree supports zooming, panning, and clicking nodes to expand or collapse branches. Built with d3.v3, it uses `d3.layout.tree` for layout, SVG elements for rendering, `d3.behavior.zoom` for interaction, and animated transitions. Data comes from a JSON file containing nested family members and their link attributes.

Loading thumbnail…

WorldMap with Topojson Data

A world map rendered with a light pink background and distinct filled landmasses, using topojson data from the world-atlas package. The visualization displays the globe with blue oceans and green countries, each outlined with faint black strokes. Built with D3 v5, the code uses `d3.geoPath` with a `geoNaturalEarth1` projection and the `topojson` library's `feature` method to process geographic data into SVG paths.

Loading thumbnail…

USA Map with TOPO JSON Data

This example presents a stylized map of the United States, displaying state boundaries and land masses with distinct colors for spheres and geographic regions. The visualization renders as an SVG and uses React to manage the component lifecycle. It loads geographic data from the US Atlas TopoJSON, converting it with `topojson.feature` and `topojson.mesh`, then projects it using `d3.geoAlbers` and `d3.geoPath`. Graticules are included via `d3.geoGraticule`, though not explicitly drawn in the component.

Loading thumbnail…

AT&T Annual Users

This visualization shows AT&T’s annual user counts from 2015 to 2021, combining a line chart and an area chart to emphasize trends. The SVG rendering uses d3.scaleLinear for both axes, d3.line and d3.area with curveBasis to generate smooth paths, and d3.axisLeft/axisBottom for tick marks. Users are plotted as raw numeric values from the CSV source, with tick labels formatted via d3.format. The area fill is colored, and axis labels are styled via CSS classes.

Loading thumbnail…

AT&T Annual Users

A line chart displays AT&T's annual user counts from 2015 to 2021, with the x-axis showing years and the y-axis showing users. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render an SVG. Data is loaded from a CSV hosted on GitHub Gist via `d3.csv`, with years parsed as `Date` objects and user counts converted to numbers. The chart includes labeled axes, a title, and a thick blue line path, with grid lines styled via CSS.

Loading thumbnail…

Pie_chart_Texas_Cities_density

A pie chart displays the top ten Texas cities by population density, with each slice sized proportionally to the city's density value and colored via a categorical scale. The chart renders in SVG using d3.pie and d3.arc, with the dataset loaded from a CSV via d3.csv. A legend lists each city and its density in thousands, formatted with d3.format. The visualization uses d3.scaleOrdinal for color assignment and d3.select to append the chart elements.

Loading thumbnail…

Reusable Scatter Plot with Iris Data

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (green for setosa, purple for versicolor, red for virginica). The code loads CSV data via `d3.csv`, uses `d3.scaleLinear` for axes, and renders circles as SVG marks. It also applies `d3.axisLeft` and `d3.axisBottom` for labeled scales, with axes and text styled via CSS. The plot is fully responsive, sizing to the browser window.

Loading thumbnail…

Fork of [TEST] Pie Chart

This donut chart visualizes credit rating distributions, with categories like "AAA Local" and "BBB- Internacional" shown as proportional arc segments. The D3 v5 code uses `pie()` to compute arc data, `arc()` for path geometry, and `scaleOrdinal()` for the color palette. A legend maps labels and percentage values, rendered via SVG rects and text elements, while data is loaded asynchronously from a JSON file using `json()`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot of the Iris Dataset, where points animate through different x-axis variables (petal width, sepal width, petal length, and sepal length) every two seconds via `setInterval`. It uses D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, `csv`, and `select` to render SVG circles with axes. The plot is built as a reusable function that updates its x-value mapping dynamically, demonstrating a configurable chart with a live cycling view of the dataset’s measurements.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This is a D3.js scatter plot visualizing the Iris Dataset, separating flower species by color (blue, red, black) based on petal length and width. The chart maps sepal dimensions to circle radii, creating variable-sized points. It loads data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` for scales, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Drawn as SVG circles with `d3.selectAll().join()`, it includes labeled axes for petal and sepal measurements.

Loading thumbnail…

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

This horizontal bar chart displays sales figures for ten retail item categories. The visualization loads data from a CSV file and renders it as an SVG. Using D3.js version 7, the code employs `scaleLinear` and `scaleBand` for the x and y axes, respectively, and `axisLeft` and `axisBottom` to generate the tick marks. Each category's bar length corresponds to its sales value, with the chart including axis labels for both dimensions.

Loading thumbnail…

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

This visualization displays the top 20 countries by population from a COVID-19 dataset, rendered as horizontal bars showing each country's confirmed case count for the date January 28, 2020. The React application uses D3's `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles, with gridlines and tick labels generated from the scales. The code loads data via `d3.csv` from a GitHub gist and uses React `useState` and `useEffect` hooks to fetch and process the data before rendering the chart.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes while coloring each point according to species. A second set of attributes, sepal length and width, is encoded as custom `rx` and `ry` properties on the SVG circles, though these do not affect the visual rendering since the `r` attribute is fixed. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to fetch data, scale axes, and render SVG marks.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js within a React framework, displaying the dataset’s structure in a simple text message. The visualization shows a dark-themed decorative illustration alongside the header, while the main content reports the file size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to calculate its size, then updates the DOM via `getElementById`. The chart’s SVG rendering includes custom vector graphics, but the focus is on data loading and parsing rather than graphical encoding.

Loading thumbnail…

ICE-5: Loading and Parsing CSV data

This example demonstrates the process of loading and parsing CSV data using D3.js. It fetches a remote CSV file containing US state capitals and populations via the `d3.csv` method, which asynchronously retrieves and parses the data. The visualization then displays the parsed dataset's size, row count, and column count as large text in a pre element, showcasing the data structure without additional graphical rendering. The code uses D3.js `d3.csv` and `d3.csvFormat` APIs to handle the data loading and formatting.

Loading thumbnail…

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

This example demonstrates how to build a smiley face using D3.js, with the ability to animate its eyebrows. It uses basic SVG elements—circles for the face and eyes, and a path generated by the `d3.arc` function for the mouth. The code sets up an SVG canvas and positions elements using translation and coordinate attributes. It relies on D3 v5’s selection and arc APIs to create the static face, which serves as a foundation for adding interactive or animated features.