prachow

Fork of visualizing the Africa map

This example displays a map of African countries, rendered as orange SVG paths with black borders on a sky-blue background. It uses d3.geoNaturalEarth1 for projection and d3.geoPath with a d3.geoTransform to render simplified TopoJSON data loaded from a GitHub gist. The map redraws on window resize, adjusting the projection via fitExtent to fit the updated viewport dimensions. The code applies topojson.presimplify to prepare the geographic data before rendering.

Mar 28, 2023

My Social Network Visualization

This social network visualization displays connections between people, with pink circular nodes named and linked by orange lines whose thickness indicates relationship weight. The node-link diagram uses D3.js v4’s force-directed layout (`d3.layout.force`) to position nodes through a physics simulation with gravity, distance, and charge parameters, while supporting drag interaction. The SVG rendering is built using `d3.select` and `d3.json` to load the data from a local `network.json` file, with force ticks updating link coordinates and node transforms during animation.

Mar 27, 2023

Fork of visualizing the world map

This visualization renders a world map using D3.js (v5) and TopoJSON, with countries displayed as green-filled paths with black outlines on a blue background. A sky-blue rectangle with a yellow stroke frames the map, created via the `geoEquirectangular` projection and `geoPath` method. The code loads country boundary data from the `world-atlas` package hosted on jsDelivr, converts the TopoJSON features to GeoJSON using the `topojson` library, and renders each country’s path into an SVG element.

Mar 27, 2023

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

This example shows a horizontal bar chart of population data for 20 countries, rendered as SVG within a React component. It uses React hooks (`useState`, `useEffect`) to asynchronously load CSV data via `d3.csv`, then maps that data to visual marks manually with JSX. Axes are constructed using `d3.scaleBand` and `d3.scaleLinear`, while tick marks and labels are generated by iterating over `d3` scale domains and ticks. The chart highlights bars and gridlines with colored strokes, drawing from a remote GitHub-hosted dataset.

Mar 19, 2023

Reusable scatter plot with different symbols

This example presents a scatter plot of the Iris dataset, using different symbol shapes and colors to distinguish the three plant species based on petal width and sepal length. The visualization is built as a reusable D3 component with a configured margin, scales, and axes. The code imports D3’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols` APIs to map data values to chart positions and marker types, while `csv` loads the remote dataset. Rendered as SVG, the plot resizes to fit the window and includes custom tick styling.

Fork of DV ICE7- Area Graph

This area graph visualizes India’s GDP from 2009 to 2022 using a smooth curve. The chart plots years on the x-axis and GDP values on the y-axis, with axes formatted and labeled accordingly. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to render SVG elements. Data is loaded from a CSV file via `csv()`, with GDP converted to numeric values before rendering.

IndiaGDP of Area Chart

This area chart displays India’s GDP values from 2009 to 2022, with a black line and green filled area over time. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, and `line` generators with `curveBasis` to render the SVG. The data is loaded via `csv` from a gist, with axes formatted using `axisLeft` and `axisBottom`, and styled through custom CSS for labels and gridlines.

Fork of ICE-7 Fork of Area Chart

This area chart visualizes CO2 emission values from 1960 to 1973, using a pink filled area beneath a black smooth curve to show trends over time. The chart includes labeled axes for year and value, with gridlines and tick formatting. Built with D3 v5, it uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.area` with `d3.curveBasis` to generate the SVG path.

Fork of ICE7_Area_chart

This area chart shows India's GDP over time, with a smooth curve filling the space beneath the line in purple. The visualization uses D3 version 6 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while `axisBottom` and `axisLeft` create labeled axes with gridlines. Data is loaded asynchronously from a remote CSV file. The chart includes custom axis labels, tick formatting that abbreviates large GDP values, and a title.

IndiaGDP from 2009 to 2022 Line Chart

This line chart displays India’s GDP from 2009 to 2022, with years on the x-axis and GDP values on the y-axis. Using d3.scaleTime and d3.scaleLinear, it maps data from a CSV file loaded via d3.csv. The chart includes axis labels, a title, and a green line path generated with d3.line. Grid lines are styled via CSS, and the SVG is centered in an HTML page with D3 v5.

Literacy rate of visualization in Pie Chart

This pie chart displays the literacy rates of Southern Indian states, with each slice representing a state and its corresponding percentage. The visualization uses D3.js (v5) to render the chart as SVG, employing the `pie` and `arc` functions to generate the segments, `scaleOrdinal` for color mapping, and `arcGenerator.centroid` to position state labels. A legend with colored swatches and percentage values accompanies the chart. Data is loaded from a remote CSV file using D3's `csv` method, and formatting of the tick labels is handled with `format`.

Fork of Fork of ICE 7 Area Chart

This example shows India’s GDP from 2000 to 2008 using a combined line and area chart, with the line tracing annual values and the area beneath it filled in aqua. The visualization is built with D3 v5, using `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisBottom` and `axisLeft` for labeled ticks. Data is loaded as CSV from a GitHub gist, and the SVG output includes gridlines, axis labels, and a blue title. The chart highlights trends while stacking the area to emphasize magnitude.

GDP rate in Line Chart

This line chart visualizes India's GDP from 2010 to 2022, with the x-axis showing years and the y-axis displaying GDP values. The visualization uses D3.js v5 within a React framework, rendering as an SVG. It loads CSV data via `d3.csv` from a GitHub gist, then uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes. A `d3.line` generator creates the orange GDP trend line, with custom CSS styling for labels and the title.

Fork of ICE-7(Line Chart)

This example visualizes India's GDP over time using a line chart, with the x-axis mapping years and the y-axis representing GDP values. The chart includes labeled axes, a title, and gridlines to aid readability. Built with React and D3 v5, it loads CSV data from a GitHub gist via `d3.csv`, then uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the SVG rendering. The code applies custom CSS for styling, including tick labels, axis colors, and the indigo stroke of the line path.

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length for three species. The plot encodes species identity through distinct D3 symbols, including a custom square symbol, and uses D3’s `scaleLinear` for axes and `scaleOrdinal` for symbol mapping. Data is loaded via `d3.csv` and rendered as SVG paths, with axes generated using `axisLeft` and `axisBottom`.

Fork of Reusable D3 Scatter Plot

This interactive scatter plot animates through columns of the Iris dataset, cycling between petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses a reusable D3 chart pattern with `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles that update their x-positions as the data dimension changes. Built with D3 v6, it loads CSV data from a GitHub Gist and employs a join pattern for smooth transitions.

Mar 11, 2023

Penguins Dataset scatter fork

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length against body mass for individual penguins. Each circle is colored by species (purple for Adelie, red for Gentoo, blue for Chinstrap) and uses non-standard `rx` and `ry` attributes to encode bill dimensions as elliptical shapes. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scales, and d3.axisLeft/axisBottom for the axes. The SVG renders with explicit width and height from the browser window, and includes custom axis labels and an italic cursive font.

Mar 8, 2023

Female Birth Rates Of states in United states

A horizontal bar chart displays the top 15 U.S. states by female teenager birth rate, with each bar's length proportional to the state's rate. The visualization uses React for the component structure and D3 v5 for data loading via `d3.csv`, scaling with `d3.scaleBand` and `d3.scaleLinear`, and rendering SVG bars and tick labels. The chart reads data from a gist-hosted CSV file, styling the page with a green background and blue grid lines.

Mar 8, 2023

Student Performance in exam ICE5

This example presents a text-based summary of student exam performance data, displaying the dataset’s size in kilobytes, row count, and column count. The page fetches the data from a remote CSV file using `d3.csv` and `d3.csvFormat`, then writes the metadata into a `<pre>` element. The interface includes a link to the raw dataset and a decorative background image, with the summary styled in green text.

Mar 2, 2023

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

A smiling yellow face animates against a black background, with blue rectangular eyebrows that bounce upward and downward, a red-outlined mouth, white teeth that rotate side to side, and a tongue. The code builds the face using D3.js v5 selections and the `d3.arc` shape generator, appending SVG circles, rects, and paths to a 1000x500 canvas. Multiple `transition().duration()` calls drive the eyebrow movement and teeth rotation, while static elements like eyes, nose, and mouth are positioned via SVG transforms.

Feb 23, 2023

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

A yellow smiley face with animated eyebrows, teeth, and a tongue is rendered in SVG. The face uses D3.js v5 selection methods to construct circles, rectangles, and arc-generated paths for its features. Eyebrows and teeth move through chained transitions that alter their transforms over two-second intervals, while the mouth and tongue remain static. The code displays fundamental DOM manipulation, importing `select` and `arc` from D3.

Feb 23, 2023

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

A smiling face drawn with D3.js animates by repeatedly moving its eyebrows up and down. The visualization demonstrates fundamental DOM manipulation by building the face from SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Using D3 v5 and the `select` API, the eyebrows are animated with chained `transition` calls, each lasting two seconds, to create a looping motion.

Feb 22, 2023