S

Sheshidharreddy

@Sheshidharreddy·53 public vizzes

Loading thumbnail…

Network chart of five people

This example shows a network graph of seven people divided into four groups, with nodes positioned by a force-directed layout and connected by green links whose thickness reflects link weight. The code uses the older `d3.layout.force` API to simulate physics and drag interaction, rendering circles and labels as SVG elements styled with brown strokes and large text. Data comes from a local `data.json` file, and the visualization runs within a minimal React setup, as referenced by the accompanying README link.

Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualizes three generations of ancestral relationships using a hierarchical layout. The SVG-based chart renders named individuals as colored circles, with light blue, light gray, dark gray, and teal encoding generation depth. D3’s `d3.stratify()` converts the flat parent-child data into a hierarchy, which `d3.tree()` lays out on an 800×300 grid. Animated paths draw connections between nodes over 1.5 seconds, while circles fade in with a 700-millisecond transition. The code uses D3 v6’s selection, transition, and scale-free drawing APIs to produce the final graphic.

Loading thumbnail…

ICE-8 America Map

This interactive map displays the fifty United States as an SVG visualization, with each state rendered as a light green path that darkens on hover. The map uses a TopoJSON dataset loaded from a GitHub gist and projects it using d3.geoAlbersUsa with d3.geoPath for geographic path generation. State names appear as tooltips via appended title elements. The visualization relies on D3 v5 for data binding and TopoJSON’s feature conversion to extract state geometries from the encoded topology.

Loading thumbnail…

Fork of Network chart

This interactive network chart displays seven named nodes connected by weighted links, with node groups distinguished through a force-directed layout that positions circles and labels on a tan background. The visualization uses d3.layout.force to simulate physics-based placement, allowing users to click and drag nodes across the SVG canvas. Data comes from an external graphFile.json containing node names and link weights, which are rendered as dark blue lines of varying thickness and green circles with 15px strokes.

Loading thumbnail…

Fork of Fork of ICE-8: Family Tree

This visualization presents a family tree using a D3 hierarchical layout, rendered as an animated SVG diagram. The code constructs the tree structure with `d3.stratify` and `d3.tree`, then draws links and rectangular node boxes with smooth transitions. Text labels fade in sequentially based on node depth, while the dataset explicitly lists parent-child relationships ranging from "John" to multiple descendants. Using d3.v6 within a plain HTML/JavaScript setup, the example demonstrates basic tree layout, path animations, and staged text rendering without external styling frameworks.

Loading thumbnail…

world map for Topojson data

This example displays a world map rendered as filled green countries on a light blue sphere, using Natural Earth projection. It loads TopoJSON data from a GitHub gist and converts it to GeoJSON with `topojson.feature`. The map is drawn as SVG paths using `d3.geoPath` with `d3.geoNaturalEarth1`, while `d3.json` fetches the remote dataset. Country boundaries appear with subtle black strokes, and the sphere outline is generated from a generic GeoJSON sphere object.

Loading thumbnail…

Fork of Map of India with D3 - chloropleth map

This choropleth map displays the states of India, each filled with a distinct color from the D3 categorical palette and labeled with its name. The visualization uses the `d3.geoPath` and `geoMercator` projection to render the TopoJSON data from a remote GitHub source, with state boundaries drawn as SVG paths. Labels are positioned at each state's centroid, and the map is rendered on an SVG canvas using D3 v5.

Loading thumbnail…

Fork of America Map

This visualization displays a choropleth map of the United States with state names overlaid, using cyan to fill each state and a maroon highlight on hover. The map is rendered as SVG, with geographic data sourced from a GitHub-hosted CSV file. The code leverages d3's `geoAlbersUsa` projection, `geoPath`, `feature` from topojson, and `select` to generate state paths and position labels at their centroids.

Loading thumbnail…

ICE 7 Area chart for car sold

This area chart visualizes the number of car units sold per year, with a blue filled area beneath a curved line. The chart uses D3 v5 within a React framework, rendering as SVG. It employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and both `d3.line` and `d3.area` generators with `curveBasis` smoothing. Data is loaded from a CSV file and parsed with `d3.csv`.

Loading thumbnail…

Line chart for the cars sold

This line chart shows the number of car units sold per year, with time on the x-axis and units on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to draw the path. Data is loaded from a CSV file using `d3.csv` and parsed to create date objects for the temporal axis. The chart includes axis labels, a title, and styled grid lines.

Loading thumbnail…

ICE-7 Reusable D3 Scatter Plot from sheshidhar reddy

This interactive scatter plot visualizes the Iris dataset, displaying the relationship between petal and sepal measurements for different species. The visualization cycles through different variable pairings every five seconds, showing how the data distribution changes across dimensions. Built with D3.js, the example uses `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, while SVG circles represent individual data points colored by species. The data is loaded from a GitHub-hosted CSV file, and the animation automatically updates the axes and marks to explore different attribute combinations.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization shows US cancer cases from 2009 to 2022 using a combined line and area chart, with the line stroke in black and the area fill in purple. The code uses D3 v5 (d3.line, d3.area, d3.scaleLinear, d3.axisBottom, d3.axisLeft) with cubic basis curve interpolation (curveBasis) to smooth the chart. Data is loaded from a CSV file via d3.csv, with numeric parsing for cases and year. The SVG renders axes with gridlines, axis labels, and a title.

Loading thumbnail…

Fork of ICE-7:Area Chart

This example visualizes nuclear usage from 2010 to 2020 as a combined line and area chart, with the red line tracing the trend in units over time and an indigo fill beneath the curve. It uses D3 v5 via the `d3` module, employing `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisLeft`/`axisBottom` for tick marks. The chart loads CSV data from a Gist, parsing the year and unit columns, and renders to an SVG with custom-styled axes and labels.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart displays automobile sales in India from 1999 to 2012, with the x-axis showing the year and the y-axis showing electronic sales figures. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, with d3.axisBottom and d3.axisLeft for the axes, and a d3.line generator to draw the path. SVG elements are used for rendering, and the data is loaded from a CSV file via d3.csv. The chart includes labeled axes and a title, styled through an external CSS file.

Loading thumbnail…

Fork of ICE 7 Line Chart

A line chart displays sales of cars in India from 2009 to 2019, with the x-axis representing the year and the y-axis showing units sold. The visualization uses D3 v5 with an SVG rendering. It loads CSV data from a GitHub gist, parsing the date and numeric units. The chart employs D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs. Styling is applied through a linked CSS file, with red grid lines, axis labels, and a thick red line path representing the trend.

Loading thumbnail…

ICE-7 pie chart

This pie chart visualizes the number of car units sold for different car models, with each slice colored distinctly and accompanied by a legend showing the car name and its corresponding value. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to generate the SVG paths, while data is loaded asynchronously from a CSV file via `d3.csv`. The rendering includes a centered pie with a 200-pixel outer radius, and the legend displays colored rectangles and text labels positioned to the right.

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This visualization presents a pie chart of the top ten cricketers and their total runs, with each slice’s area proportional to the player’s run count. The chart uses D3 v5’s `pie` and `arc` generators to compute the segments, and a `scaleOrdinal` with the `schemeCategory10` palette for slice colors. A legend on the right lists each player’s name and formatted run total, using `format('.5~g')`. Data is loaded from a local JSON file via `d3.json`, rendered as SVG paths.

Loading thumbnail…

Fork of Pie Chart

This visualization shows 2022 US auto sales by brand as a pie chart with a legend displaying brand names, percentage of total sales, and sales volumes in thousands. Built with d3 v5, it loads CSV data from a GitHub gist, parses the data, and uses `pie()`, `arc()`, and `scaleOrdinal()` to generate SVG path segments with distinct colors. The chart appends legend rectangles and text elements, formatting percentages and values with `format('.4~g')`. The sales values are summed to calculate percentages, and the rendering is driven by an async `getData()` function.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

The visualization is a pie chart showing the top 10 countries with the highest number of deaths attributed to air pollution in 2020. Each slice is annotated with its corresponding value in thousands, and a legend on the right pairs each country name with its death count. The chart is built using D3 v5, leveraging the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs for slice generation, coloring, and layout, with data fetched as CSV from a GitHub Gist. The SVG canvas is populated programmatically via `d3.select`, and text labels are positioned using the arc centroid.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization displays the top 10 countries by deaths in 2020 attributed to air pollution, using a pie chart with colored sections and an accompanying legend. The chart is rendered as an SVG using d3 v5, with data fetched from a CSV via `d3.csv` and parsed. The code uses `d3.pie` and `d3.arc` to generate segments, `d3.scaleOrdinal` for color mapping, and `d3.format` for tick labels showing death counts in thousands. Each slice includes a label and the legend pairs country names with values.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris flower dataset, cycling through four feature combinations on the x-axis (petal width, sepal width, petal length, sepal length) while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a legend and dynamic axis labels. Built with D3 v6, it uses `d3.csv` for data loading, `scaleLinear` for scales, and `setInterval` to animate axis changes. A reusable `scatterPlot` module handles the SVG rendering, with custom circles and text annotations.

Loading thumbnail…

Fork of Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each data point colored by species (green, purple, or red). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering circles as SVG elements. Sepal length and width are also read from the data, though they are not used in the plot’s geometry, and axis labels are added as text elements.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis every two seconds. The chart uses SVG circles colored by species (setosa, versicolor, and virginica) to reveal clustering patterns in the flower measurements. Built with D3 v6, the example demonstrates a reusable scatter plot module that separates axis rendering from data point positioning. The code imports specific D3 functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the visualization. The plot animates by updating the x-value mapping through a `setInterval` loop, while the y-axis remains fixed on sepal length.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

The scatter plot visualizes the Iris dataset, with points colored by species (blue, red, yellow) and axes labeled for sepal and petal measurements. It uses D3.js (scaleLinear, extent, axisLeft, axisBottom) to map data to coordinates. An animation cycles the x-axis between four measurement columns every two seconds, dynamically re-rendering the SVG. Data is loaded from a GitHub-hosted CSV file, and the plot is built with a reusable custom scatterPlot component.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, using petal width and sepal length as the x and y axes, with points colored by species (setosa, versicolor, virginica). The visualization is built with D3 v6, using the `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` APIs to render axes and a legend. A JavaScript `setInterval` cycles through four column pairings every two seconds, animating the plot to show different variable combinations while the SVG circles update smoothly. The data is loaded from a GitHub Gist CSV file and parsed into numeric fields.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This example shows an animated scatter plot of the Iris dataset, cycling through four numeric attributes every two seconds. Each point is colored by species (blue, red, or yellow). The visualization uses D3 version 6 features, including `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to map data coordinates. The reusable `scatterPlot` function updates the x-axis and circle positions via `setInterval`, rendering in SVG on a black background with a white axis and labels.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris Dataset as an animated scatter plot, cycling through four different variable pairings every two seconds. The plot demonstrates a reusable D3 chart pattern, where the `scatterPlot` function encapsulates scales, axes, and circle rendering. Using d3.scaleLinear for positioning, d3.axisLeft and d3.axisBottom for ticks, and d3.join for efficient circle updates, the SVG animation smoothly transitions between petal width, sepal width, petal length, and sepal length on the x-axis. Data loads asynchronously via d3.csv from a GitHub Gist.

Loading thumbnail…

3D chart

This example visualizes car sales data as an interactive 3D bar chart, with each bar representing a car model and its height corresponding to the number of units sold. The chart is rendered using the d3-x3d library, which bridges D3.js with X3DOM for 3D graphics in the browser. The code loads CSV data from a GitHub gist, parses it with D3’s `csv` function, and constructs the chart by calling `d3.x3d.chart.barChartMultiSeries()`. The visualization uses D3 v5 and React, with the chart placed in an HTML div via the `#chartholder` selector.

Loading thumbnail…

Fork of ICE-6 Sheshidhar reddy cars

This bar chart shows the top 10 car models by unit sales, with each bar's length proportionally scaled to the number of units sold. The visualization uses React and D3 v5, with the `csv` function fetching data from a GitHub-hosted CSV file and `scaleBand` and `scaleLinear` mapping the categorical car names and numeric unit counts to pixel coordinates. The SVG rendering draws blue rectangle bars, axis ticks, and labels, while the `max` function determines the x-axis domain. The page title "Top car sales" frames the chart for the viewer.

Loading thumbnail…

Fork of ICE-6 Sheshidhar reddy cars

This bar chart shows the top 10 car models by unit sales, with each bar's length proportionally scaled to the number of units sold. The visualization uses React and D3 v5, with the `csv` function fetching data from a GitHub-hosted CSV file and `scaleBand` and `scaleLinear` mapping the categorical car names and numeric unit counts to pixel coordinates. The SVG rendering draws blue rectangle bars, axis ticks, and labels, while the `max` function determines the x-axis domain. The page title "Top car sales" frames the chart for the viewer.

Loading thumbnail…

Fork of ICE-6 Sheshidhar reddy cars

This bar chart shows the top 10 car models by unit sales, with each bar's length proportionally scaled to the number of units sold. The visualization uses React and D3 v5, with the `csv` function fetching data from a GitHub-hosted CSV file and `scaleBand` and `scaleLinear` mapping the categorical car names and numeric unit counts to pixel coordinates. The SVG rendering draws blue rectangle bars, axis ticks, and labels, while the `max` function determines the x-axis domain. The page title "Top car sales" frames the chart for the viewer.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example visualizes car manufacturer sales data for the first six months of the year as an interactive 3D bar chart. The chart displays multiple manufacturers across the months of January through June, with the height of each bar representing the sales value. The visualization is built using D3.js v5 and the d3-3d library, which renders the chart in 3D space using the X3DOM framework. The code loads CSV data from a GitHub gist and uses D3's `csv` parsing function to transform the raw data into the multi-series format expected by the `d3.x3d.chart.barChartMultiSeries()` component.

Loading thumbnail…

Untitled

An interactive 3D bar chart displays floating cubes of varying heights on a grid, rendered as SVG paths with animated transitions. Dragging rotates the entire scene around its origin, sorting faces and text labels for correct depth perception. The visualization uses the d3-3d plugin for cube geometry and projection, with d3.drag handling user interaction and d3.transition animating position updates.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example displays multi-series bar charts in 3D, comparing car manufacturer sales across six months using data from a CSV file. The visualization leverages D3.js v5 for data parsing and scales, while the d3-3d library handles the 3D bar geometry, and d3-x3d with X3DOM renders the scene in the browser. The code uses `d3.csv` to load the data, `scaleLinear` for value mapping, and the `barChartMultiSeries` chart component to generate the 3D bars directly in the `#chartholder` div.

Loading thumbnail…

Fork of dataset

This chart displays the top 20 stocks on the Brazilian B3 exchange by trading volume, using a horizontal bar chart. The data, loaded from a local CSV file, is parsed and scaled with d3.scaleLinear and d3.scaleBand. Axes are generated with d3.axisLeft and d3.axisBottom, and the chart uses SVG rectangles for bars. A button in the HTML triggers a color-change function from a separate local ES6 module, though the effect is not visually implemented.

Loading thumbnail…

Fork of Fork of dataset

This bar chart displays the top 20 most heavily traded stocks on the Brazilian B3 exchange, with horizontal bars ranked by trading volume. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG. Data is loaded from a CSV file via `d3.csv` and parsed into numeric values. The chart includes a title, axis labels, and a button element whose click behavior is partially implemented in a separate ES6 module.

Loading thumbnail…

Fork of dataset

This example renders a horizontal bar chart of trading volumes for Brazilian stocks (B3) using D3 v5. It loads data from a CSV file, parses the `qtde` column as numeric values, and maps `Codigo` labels along a band scale. The visualization uses `scaleLinear`, `scaleBand`, and `axisBottom` with `format('.3s')` to display abbreviated values, while bars are appended as SVG rectangles. A button in the HTML triggers a message element, though its interaction is minimal.

Loading thumbnail…

Fork of dataset

This example renders a horizontal bar chart of trading volumes for Brazilian stocks (B3) using D3 v5. It loads data from a CSV file, parses the `qtde` column as numeric values, and maps `Codigo` labels along a band scale. The visualization uses `scaleLinear`, `scaleBand`, and `axisBottom` with `format('.3s')` to display abbreviated values, while bars are appended as SVG rectangles. A button in the HTML triggers a message element, though its interaction is minimal.

Loading thumbnail…

ICE-6 Sheshidhar reddy cars

This visualization displays the top 10 car models by sales units using a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, with scales created using d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Data is loaded asynchronously from a CSV file using d3.csv, which parses the numeric units field. The chart includes custom axis ticks and gridlines drawn with SVG line and text elements, while all layout and margin calculations are handled manually in the React render method.

Loading thumbnail…

ICE-6 Assignment Sheshidhar reddy shaga

A horizontal bar chart displays the top 20 car models by price, sorted by an unspecified categorical variable. The visualization uses D3's `scaleBand` and `scaleLinear` to map car names to the y-axis and price values to the x-axis, with red gridlines and green bars rendered as SVG rectangles. Built with React and D3 v5 within a ReactDOM-rendered SVG, data is fetched from a CSV file provided via a Gist URL, and axis tick labels are generated using `xScale.ticks()`.

Loading thumbnail…

Fork of ICE 6 - Likith Chowdary Nuthi

This bar chart displays the gold medal counts for the top 10 countries from a CSV dataset of Olympic medal records. The visualization uses D3.js version 5 within a React application, employing `scaleBand` for the categorical country axis and `scaleLinear` for the numeric gold medal axis. The SVG output renders orange bars with green gridlines and axis labels. Data is loaded asynchronously using D3’s `csv` function, and React’s `useState` and `useEffect` hooks manage the data loading and rendering process.

Loading thumbnail…

ICS-5 Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width to axes while coloring points by species. The SVG rendering uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a CSV via `d3.csv`, with circles positioned using `cx` and `cy` attributes and colored through a species-based switch statement. The plot fills the browser window, with tick labels enlarged to 24 pixels.

Loading thumbnail…

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

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019, using React and D3 v5. The code fetches CSV data from a GitHub gist and renders SVG marks with React components, while D3’s `scaleBand`, `scaleLinear`, `csv`, and `max` handle data loading and scaling. Axes are drawn manually from `xScale.ticks()` and y-scale domains, with bars encoded by rectangular marks. The React `useState` and `useEffect` hooks manage asynchronous data loading before rendering the chart.

Loading thumbnail…

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

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019, using React and D3 v5. The code fetches CSV data from a GitHub gist and renders SVG marks with React components, while D3’s `scaleBand`, `scaleLinear`, `csv`, and `max` handle data loading and scaling. Axes are drawn manually from `xScale.ticks()` and y-scale domains, with bars encoded by rectangular marks. The React `useState` and `useEffect` hooks manage asynchronous data loading before rendering the chart.

Loading thumbnail…

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

This visualization displays COVID-19 case counts for the top 20 countries using horizontal bars rendered as SVG rectangles. The chart maps country names along the y-axis with a D3 scaleBand and case numbers along the x-axis with a scaleLinear. React manages the component state and lifecycle, fetching CSV data from a GitHub gist via d3.csv. Axes are manually constructed by mapping over tick values to generate line and text elements. The bars are colored green through CSS, with red gridlines marking x-axis tick positions.

Loading thumbnail…

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

This example shows a bar chart of COVID-19 case counts for the top 20 countries, using the d3.csv loader to fetch data and React hooks (useState, useEffect) to manage asynchronous loading. It renders an SVG with green rectangles scaled by d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The code also manually generates axis ticks and labels using d3.ticks and inline SVG elements, avoiding higher-level axis components. The visualization updates its dimensions through computed innerHeight and innerWidth margins.

Loading thumbnail…

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

This example displays a horizontal bar chart of COVID-19 case counts for 20 countries using React and D3 v5. The visualization maps each country to a green rectangle, with bar lengths proportional to population values fetched from a remote CSV file. It uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and renders gridlines with axis ticks directly as SVG elements. The React component manages data state with `useState` and `useEffect`, while D3 handles scaling and tick generation.

Loading thumbnail…

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

This visualization displays COVID-19 case counts for the top 20 countries using horizontal bars rendered as SVG rectangles. The chart maps country names along the y-axis with a D3 scaleBand and case numbers along the x-axis with a scaleLinear. React manages the component state and lifecycle, fetching CSV data from a GitHub gist via d3.csv. Axes are manually constructed by mapping over tick values to generate line and text elements. The bars are colored green through CSS, with red gridlines marking x-axis tick positions.

Loading thumbnail…

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

This bar chart displays the top 10 most populous countries from a 2019 CSV dataset, using horizontal bars to compare population sizes. Built with React and D3 v5, the visualization renders SVG marks and channels, with x and y scales created via `d3.scaleLinear` and `d3.scaleBand`. The code loads data using `d3.csv`, maps population values, and generates SVG rectangles, axis ticks, and labels through React components, supported by `d3.axisLeft` and `d3.axisBottom` for coordinate reference.

Loading thumbnail…

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

This chart displays the top 10 most populous countries in 2019 as a horizontal bar chart, ranking them by population value. The visualization uses React functional components with the useState and useEffect hooks to fetch CSV data, while D3’s scaleBand and scaleLinear handle the spatial mapping of country names and population counts to SVG rectangles. Rendering occurs as pure React elements, with D3’s axis utilities replaced by manually drawn tick lines and labels. The x-axis scale is derived from the maximum population in the dataset, and the chart updates dynamically after the CSV loads.

Loading thumbnail…

ICS-5 - TO load the dataset and dispaly the more details

This example presents a concise summary of a used car dataset, displaying key statistics such as file size, row count, and column count in plain text. It loads the data from a GitHub-hosted CSV file using D3 v7’s `d3.csv` method, then formats the output with `d3.csvFormat`. The page is built with HTML, styled using CSS, and includes a static welcome SVG image. The code demonstrates a straightforward data-loading workflow, with the dataset details rendered inside a `<pre>` element for clarity.

Loading thumbnail…

Fork of Tweak a Face Assignment by Enze Liu

This example displays a panda face constructed from SVG primitives, including arcs for the eyes, nose, mouth, and ears, ellipses for eye sockets, and circles for the face and flush. The visualization is built with React and D3.js v6, using `d3.arc()` to generate path data for the facial features, positioned via SVG transform attributes. The face is centered within a 960 by 500 viewport, with each element manually placed to create a symmetrical, cartoon-like appearance.

Loading thumbnail…

Fork of homework smiley face

This visualization displays a large smiley face composed of SVG shapes, rendered in a React component. It uses D3 v7’s `arc` generator to create the mouth path with specified inner and outer radii, while circles and lines build the eyes, pupils, eyebrows, and hair. All elements are positioned within a translated group, centered on a 960×500 canvas. The face uses a white fill with black strokes, accented by green pupils and purple irises, and is rendered entirely as static SVG markup.