T

Tejaswi@3271

@Tejaswi221·20 public vizzes

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the relationship between petal length and sepal length for Iris flower species, with each point colored by species (setosa, versicolor, virginica). The code loads data from a GitHub gist CSV file using d3.csv, then applies d3.scaleLinear and extent to map the values to screen coordinates. Axes are rendered with d3.axisLeft and d3.axisBottom, while circles are drawn as SVG elements with custom color encoding. The example demonstrates D3 v6 usage, including margin conventions, width/height from window dimensions, and labeled chart annotations.

Loading thumbnail…

Family Tree

This example displays a family tree as a hierarchical node-link diagram, with nodes colored by generation and green curved links connecting parents to children. The visualization renders in SVG and uses `d3.stratify()` to convert flat parent-child data into a hierarchy, then applies `d3.tree()` to compute the layout. Node circles, connecting paths, and name labels are appended to the SVG using data-bound selections, with custom bezier curves drawn for each link.

Loading thumbnail…

Social Network

A social network diagram displays twelve named individuals as circles, grouped into five clusters, with connecting lines representing weighted links between them. The visualization uses D3’s force layout to position nodes and edges, with link thickness scaled to the square root of the connection weight. Nodes are rendered as green circles with crimson outlines and labeled with names, while pink lines show relationships. The example loads data from a local JSON file and relies on D3 v4’s `d3.layout.force` and drag behavior to create the interactive, SVG-based graph.

Loading thumbnail…

Making Maps - Country Map with TopOJSON Data

This example displays a choropleth-style map of a country’s regions using D3.js geoMercator and geoPath projections, rendered as an SVG within a React application. The map draws region boundaries as dark strokes, fills each feature with an olive-green color, and overlays a yellow interior mesh to highlight shared borders. Data is fetched as TopoJSON from a public Gist, then converted to GeoJSON using the topojson library’s feature and mesh functions, demonstrating a complete pipeline from raw geodata to interactive map.

Loading thumbnail…

Making Maps:World Map with TOPOJSON Data Links

This example shows a world map with countries rendered in green and outlined in crimson, set against a blue spherical backdrop. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG paths. The map loads TopoJSON data from the `world-atlas` repository via `topojson.feature`, which converts the encoded country boundaries into GeoJSON for rendering.

Loading thumbnail…

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

This fork of “Let’s make a face with D3.js!” renders an interactive world map using a natural Earth projection. It displays country boundaries and labels sourced from the world-atlas TopoJSON dataset. Users can pan and zoom the map via the d3.zoom API, which applies transforms to the SVG chart group. The visualization demonstrates basic D3 selection, data binding, and path generation with d3.geoPath.

Loading thumbnail…

Line Chart

This line chart displays the profits of a company from 1955 to 2021, with the x-axis representing the year and the y-axis showing profit values. The visualization uses d3.scaleTime and d3.scaleLinear axes, with grid lines and axis labels styled via CSS. The line path is generated using d3.line and rendered as an SVG path with a blue stroke. Data is loaded from a CSV file hosted on GitHub Gist, parsed to convert the year into a Date object and profits into numbers, before being passed to the rendering function.

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, with points colored by species and rendered as different D3 symbols. The chart displays petal width on the x-axis and sepal length on the y-axis initially, then cycles through all four numeric columns every 15 seconds using `setInterval`. Built with D3 v3 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, `scaleOrdinal`, and `symbol`, the SVG visualization updates dynamically by calling the chart function again with new accessor functions.

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, encoding species with different D3 symbols and dynamically cycling through four measurement axes every 15 seconds. The reusable chart module uses D3 scales, axes, and ordinal symbol mapping to render animated SVG marks. Data loads from a GitHub Gist CSV, with transitions handled through repeated invocations of the scatter plot function.

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, mapping petal width against sepal length with distinct SVG symbols representing each species. Built with D3 v6 and React, the chart uses `scaleLinear`, `scaleOrdinal`, and the `symbol` generator to render data points. Every 15 seconds, the x-axis automatically cycles through different floral measurements (petal width, sepal width, petal length, sepal length) using a `setInterval` loop, dynamically updating the plot while axes and points animate via D3's join pattern.

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris flower dataset, mapping sepal and petal measurements across a Cartesian grid. Each data point is rendered as a distinct symbol from D3's `symbols` collection, with the species assigned via a `scaleOrdinal` function. The visualization is built using a reusable chart pattern with configurable accessors for width, height, data, axes, and margins. D3's `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` APIs handle the scaling, boundaries, and mark generation, while the `Share Tech` font styles the axis labels.

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes company profits in India from 2010 to 2021, with a smooth curved line and filled blue area beneath it. The chart uses d3.scaleTime and d3.scaleLinear for axes, while d3.line and d3.area with d3.curveBasis generate the path elements. Data is loaded from a CSV file via d3.csv, with dates parsed using d3.timeParse. The SVG rendering includes axis labels, gridlines via tickSize, and formatted profit values using d3.format.

Loading thumbnail…

Pie Chart

This pie chart displays the sales figures of various companies, with each slice sized proportionally and labeled with its value in thousands. It also includes a color-coded legend listing company names and corresponding sales amounts. The visualization uses D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `format` to generate the SVG segments and text, with data loaded via `csv` from a GitHub gist. Colors are assigned through a custom ordinal scale.

Loading thumbnail…

Population Area Chart

This area chart visualizes world population over time, using a smooth basis curve to fill the space beneath the line. The chart employs D3 v5’s `area` generator with `curveBasis`, along with `scaleTime` and `scaleLinear` for the axes. Population values are fetched from a CSV file and formatted using D3’s `format` to abbreviate billions. The visualization also includes labeled axes and a title, with styling applied via CSS classes.

Loading thumbnail…

ICE-06 Stylized Bar Chart

This bar chart displays the top 9 most profitable companies in 2019, using horizontal bars to compare profit values. The visualization loads CSV data via the `useData` hook and D3's `csv` method, scaling values with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Profit values are formatted in billions using `format('.4s')`. The chart renders as an SVG using React components, with styled axes and bars defined in CSS, and includes a tooltip on each bar showing the formatted profit value.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 9 most profitable companies in 2019, using horizontal bars ranked by profit value. Built with React and D3 v5, it renders as an SVG and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The `useData` hook loads a CSV from a GitHub gist, while custom `AxisBottom` and `AxisLeft` components generate styled tick marks with pink text and orange lines. Hovering over each bar reveals a native SVG tooltip showing the formatted profit value.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against sepal length for three iris species, each encoded with a distinct color. The visualization is rendered as an SVG using React and D3 v6. It loads the data from a CSV file with d3.csv, parses numeric fields, and applies d3.scaleLinear for the x and y axes, with d3.axisLeft and d3.axisBottom for ticks. Circles are created with D3’s data join, and the chart fills the full window size.

Loading thumbnail…

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

This example shows the top 9 most profitable companies as a horizontal bar chart using React and D3. It loads CSV data from a GitHub gist, converts profit values to numbers, and renders SVG bars with axes. The visualization uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and maps over tick values to create gridlines and labels. React manages the component state with `useState` and `useEffect`, while `ReactDOM.render` mounts the chart. Styling includes custom colored ticks and marks set via CSS classes.

Loading thumbnail…

ICE-5 : Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js version 7, displaying the dataset's size in kilobytes, row count, and column count on a webpage. The code fetches student data from a GitHub Gist URL using `d3.csv` and formats the results with `d3.csvFormat` to calculate data size. The interface includes a styled HTML page with CSS, featuring an `h1` header and a `pre` element that presents the parsed data summary. The visualization relies on JavaScript's asynchronous data loading capabilities to retrieve remote resources.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face. It draws a yellow circle as the face, two black eyes, and a brown nose and red mouth using D3's `select`, `append`, and `arc` APIs. The `arc` function generates SVG path data for the nose and mouth shapes. The code sets SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke` programmatically, and uses `translate` to position grouped elements. The face is rendered in an SVG canvas with a fixed width and height, and the background is set to aquamarine.