S

siddu7147

@siddu7147·23 public vizzes

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the Penguin dataset, mapping `__year_resale_value` on the x-axis and `body_mass_g` on the y-axis, with points colored by penguin species using a custom marker function. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to render axes and scales, while SVG circles are positioned with the `join` pattern. Data is loaded asynchronously from a CSV via `d3.csv` and rendered inside a React app with an SVG canvas.

Loading thumbnail…

Social Network Graph

A social network graph visualizes six people connected by weighted links, with each person represented as a pink circle labeled by name. The force-directed layout positions nodes dynamically, and link stroke widths reflect relationship weights. The example uses d3.v4 with the legacy `d3.layout.force` API to simulate physics and render an SVG, loading data from the `graphFile.json` file. Nodes are draggable, and the tick handler updates link coordinates and node transforms.

Loading thumbnail…

Family Tree

This animated family tree visualizes the hierarchical relationships between animal species, using colored nodes to distinguish generations. The data is organized with `d3.stratify()` and laid out with `d3.tree()`, producing SVG paths that animate into position over 1.5 seconds. Node squares use a custom element with a `transition()` to grow to their final radius, while text labels display species names. All elements are rendered in SVG using D3 v6, with generation-specific fill colors and green animated connecting links.

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Loading thumbnail…

world map

This example presents a static world map of all countries rendered as SVG paths, using gray fill with black strokes on a yellow background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON with the `feature` function from topojson. The map is projected using `d3.geoNaturalEarth1`, and each country’s outline is drawn with `d3.geoPath` and `projection` assigned. The visualization relies on D3 v5’s `select`, `json`, and `geoPath` modules, with no interactivity or additional data encoding.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS and JavaScript to render a centered message. The page displays the text “Hello HTML!” in a large, bold font using an inline style with a `.message` class set to a font size of 13em. The code relies on standard HTML elements, an embedded `<style>` block for styling, and no external JavaScript libraries or frameworks. React is not used despite the metadata, and the visualization is static with no data or interaction.

Loading thumbnail…

scatter plots with different symbols

This scatter plot displays the Iris dataset, mapping petal width on the x-axis and sepal length on the y-axis. Three species markers use different D3 symbol shapes, generated with `d3.symbol` and `d3.symbols`. A `d3.scaleOrdinal` assigns symbols, while `d3.scaleLinear` handles axes, rendered with `d3.axisLeft` and `d3.axisBottom` in an SVG. The chart is built with a reusable `scatterPlot` function using D3 v6.

Loading thumbnail…

LineChart

This line chart visualizes earthquake statistics from 2000 to 2015, comparing the annual frequency of earthquakes across different magnitude ranges (5–5.9, 6–6.9, 7–7.9, and 8.0+) as four distinct colored lines. Built with D3 v5 and rendered as SVG, it uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for gridlines. Data is loaded from a CSV via `d3.csv`, with the chart including a legend and axis labels.

Loading thumbnail…

Fork of piechart ic7

This example shows global fruit production by country for 2019, displaying each nation’s total value as a slice of a pie chart with an adjacent legend listing country names and corresponding quantities. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the SVG paths, with `scaleOrdinal` mapping categories to a fixed color palette. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and the code formats the numeric values using `d3.format` before rendering the chart and legend inside an SVG container.

Loading thumbnail…

area chart

This area chart shows the number of visa slots in India from 2009 to 2019, with a black line tracing yearly values and an orange area filling beneath it. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render SVG elements. Scales are defined via `scaleTime` and `scaleLinear`, while axes are generated with `axisBottom` and `axisLeft`. Both line and area paths are drawn using `line` and `area` generators with `curveBasis` smoothing, and the data comes from a GitHub gist URL.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS and JavaScript to render a centered message. The page displays the text “Hello HTML!” in a large, bold font using an inline style with a `.message` class set to a font size of 13em. The code relies on standard HTML elements, an embedded `<style>` block for styling, and no external JavaScript libraries or frameworks. React is not used despite the metadata, and the visualization is static with no data or interaction.

Loading thumbnail…

Temperature In SanFrancisco : LineChart

This line chart displays worldwide earthquake counts from 2002 to 2015, split into four magnitude categories (5-5.9, 6-6.9, 7-7.9, and 8.0+), with each series drawn as a smoothly curved line in a distinct color. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to map the temporal and numeric data to SVG paths. The earthquake dataset is loaded from an external CSV file via `d3.csv`, and the chart renders with axes, gridlines, and a legend that adjusts its appearance after a delay.

Loading thumbnail…

Fork of Piechart ICE - 7 Rohith Arabati

This pie chart visualizes annual car sales by company in India, displaying each company's sales as a proportionally sized slice with labels in thousands and a color-coded legend. The chart uses D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` to generate SVG paths, with data loaded from a CSV file. The visualization also incorporates `format()` for axis tick formatting and renders text labels positioned via `arcGenerator.centroid()`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

The visualization displays the Iris dataset as a scatter plot, mapping petal width against sepal length for each specimen. The plot is built using the D3 library's scaleLinear, extent, and axis functions. The visualization is rendered as an animated SVG, cycling through all four data columns as the X-axis every two seconds. This reusable chart, created with a custom scatterPlot component, demonstrates the flexibility of D3's functional programming approach for data binding and layout.

Loading thumbnail…

Rendering Marks and Channels with React & D3

This example shows the IMDB ratings of the top 15 movies by number of votes as a horizontal bar chart. The visualization uses React to manage state and render SVG elements, while D3.js provides the scale functions (`scaleBand`, `scaleLinear`) and data loading via `d3.csv`. The bars encode the vote count through their width, with axis ticks and labels generated manually. Movie titles appear on the y-axis, and the data comes from a GitHub-hosted CSV file fetched asynchronously.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin data, mapping flipper length on the x-axis and body mass on the y-axis, with points colored by species (blue for Chinstrap, gray for Adelie, black for others). The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to fetch data from a GitHub gist, parse numeric fields, and render SVG circles with fixed radius. Axis labels are added as text elements, while circle attributes include unconventional `rx` and `ry` properties set to bill and flipper lengths, though these do not affect circle rendering.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot displays penguin measurements, with flipper length on the x-axis and body mass on the y-axis, colored by species (Adelie, Gentoo, and Chinstrap). The code uses D3 v5’s `csv` to load data, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Circle marks are drawn via SVG, with each point’s fill color mapped from species. The plot uses a fixed radius of 5 pixels, and the visualization adapts to the full browser window size.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork visualizes the Penguin Data set as a scatter plot, mapping flipper length to body mass while coloring each point by species (Adelie, Gentoo, or other) and encoding bill dimensions as `rx` and `ry` attributes on the circles. It uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render an SVG with circles, with styling applied via inline attributes.

Loading thumbnail…

Fork of Penguins Dataset Scatter Plot

This fork of the Penguins Dataset Scatter Plot displays each penguin as an ellipse-shaped point, mapping flipper length and body mass to the x- and y-axes while encoding bill length and depth as the rx and ry radii. The visualization uses D3 v6 with scaleLinear, extent, axisBottom, and axisLeft to render an SVG scatter plot. Data is loaded from a CSV via d3.csv, with species colored distinctly—Adelie in orange, Gentoo in red, and others in blue—across a full-screen canvas.

Loading thumbnail…

ICE-5 DV

This example uses D3.js to render a smiley face and animate its eyebrows through a sequence of `transition().duration()` calls. The face is drawn with SVG shapes—circles for the eyes and head, rectangles for eyebrows, and an arc path for the mouth—all positioned via a central `g` element. It also fetches a CSV file of laptop purchase data and displays dataset metadata, including size, row count, and column count, in a pre element.

Loading thumbnail…

ICE-5 DV

This example demonstrates a smiling face with animated eyebrows using D3.js v7. The page also displays metadata about a laptop-purchase dataset, loaded via `d3.csv` from a GitHub gist, reporting file size, row count, and column count. The SVG face is built with D3 selections, including circles for eyes, rectangles for eyebrows, and a path arc for the mouth. The eyebrows move vertically using chained `transition().duration()` calls to create a bouncing effect.

Loading thumbnail…

ICE-5 DV

This example shows an animated smiley face whose eyebrows move up and down. It demonstrates fundamental DOM manipulation and animation using D3.js v7. The code uses D3's `select`, `append`, and `transition` APIs to create and animate circles, rectangles, and an arc-based mouth. A separate, static dataset is loaded from a CSV file, and its metadata (size, row count, column count) is displayed in an HTML pre element, but this data is not visually encoded in the chart.

Loading thumbnail…

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

This example demonstrates a simple smiley face constructed entirely through D3.js v5 DOM manipulation. It uses `d3.select` and `.append` to create SVG circles and paths that form the face’s shape, eyes, pupils, tears, eyebrows, and mouth, with fixed coordinates and attributes set via `.attr`. The page loads D3 from a CDN and renders the face in a 960×500 SVG canvas, with static styling from a linked CSS file.