B

BVNPK001

@BVNPK001·19 public vizzes

Loading thumbnail…

ICE8 Social Network Graph d3

This example shows a force-directed social network graph with ten named nodes connected by weighted links. The visualization uses d3.layout.force from d3.v4 to position nodes and links in an SVG canvas, with circle radius fixed at 11 pixels and link stroke width scaled by the square root of each connection’s weight. Node labels appear to the right of each circle, and all elements are draggable via the built-in force.drag interaction. The code loads node and link data from a network.json file and applies CSS-defined colors for links, text, and circles.

Loading thumbnail…

ICE8 Family Tree

This interactive visualization displays a multi-generational family tree, using colored circular nodes to represent each family member and curved paths to show parent-child connections. The chart is built with D3.js v5, employing the `d3.stratify()` and `d3.tree()` layout functions to structure the data and position nodes. Node colors vary by depth, with red for the root, blue for the first generation, green for the second, and yellow for the third. The tree is rendered as an SVG, with labels placed next to each node to identify individuals.

Loading thumbnail…

ICE8 USA Map

This visualization displays a choropleth map of the United States, with state boundaries drawn as SVG paths. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render geographic features from TopoJSON data loaded from the us-atlas repository. Each state shape is colored with a default fill, and hovering changes the fill color via CSS. State names appear as tooltips using SVG `title` elements, sourced from the TopoJSON feature properties.

Loading thumbnail…

ICE8 World Map with Topojson data

This example displays a world map using natural Earth projection, with countries rendered as filled paths and a stylized sphere outline. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via a CDN, then converts the data using the `feature` function from TopoJSON. The visualization is built with React and D3 v5, leveraging `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths. Country fills alternate between teal and red strokes, while the sphere background uses a light cyan fill.

Loading thumbnail…

ICE 7 Area Chart

This area chart displays the number of accidents in the USA from 2010 to 2020, with the year on the x-axis and accident counts on the y-axis. Using D3 v5, the visualization draws both a yellow smoothed line and a green filled area beneath it via the `line` and `area` generators with `curveBasis`. The SVG chart includes labeled axes, red gridlines, and parses CSV data from a GitHub gist. The code employs `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `extent` to map the data.

Loading thumbnail…

ICE 7 Pie Chart

This pie chart visualizes the distribution of student marks, displaying each student's name and their corresponding percentage share of the total. The visualization fetches its data from a CSV file hosted on GitHub and renders the chart as an SVG using D3 v5. The code employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the pie segments and color them, with labels and a legend showing the percentage values and names. The chart is built using the `select` and `append` API to construct the SVG elements.

Loading thumbnail…

ICE7 Pie Charts

This chart displays the marks of individual students as a pie chart, with each slice representing one student and the arc length proportional to their marks. A legend to the right identifies each student by name and their corresponding mark value. The visualization is built using D3 v5, employing the `pie` layout function to compute arc data, `arc` for generating SVG path definitions, `scaleOrdinal` with a category10 color scheme, and data loaded asynchronously from a JSON file via `json()`.

Loading thumbnail…

ICE 7 Line Chart

The ICE 7 Line Chart visualizes the number of accidents in Texas over time as an orange line on an SVG canvas. It uses D3 v5 (imported via `d3` object) to load a CSV dataset from a GitHub gist, parse years with `d3.timeParse`, and render axes with `axisBottom` and `axisLeft` functions. The chart displays a time-scaled x-axis and a linear y-axis with gridlines, and the line is drawn using the `line()` generator with `scaleTime` and `scaleLinear` for coordinate mapping.

Loading thumbnail…

ICE-7 Pie Chart

This example displays a pie chart of student grade data, showing each grade category as an arc with a proportional segment, and includes labels for the values and a legend identifying countries. The chart uses D3.js to fetch the CSV data, compute the pie layout using the `pie` function, and render the arcs and text with `arc` and `scaleOrdinal` for colors. The code also organizes the visualization with SVG `g` elements and uses a color array to differentiate the sections.

Loading thumbnail…

ICE7 Reusable Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, using petal width and sepal length as its primary axes—though a `setInterval` loop cycles through all four measurement columns every two seconds to animate the chart. The code builds a reusable `scatterPlot` function with d3.scaleLinear, axisLeft, and axisBottom, while the main script imports data via d3.csv and assigns colors with d3.scaleOrdinal. Rendering uses SVG circles with annotations for axes and legends. The example demonstrates d3.v6 reusable chart patterns and animated data transitions.

Loading thumbnail…

ICE6 Iris Dataset Scatter Plot

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Each point is colored by species—blue for setosa, red for versicolor, and black for virginica. The code uses d3.csv to load the data, d3.scaleLinear and d3.extent to set scales, and d3.axisLeft and d3.axisBottom to render axes. Although sepal length and width are parsed, they are not used for positioning; circles are drawn via SVG with a fixed radius.

Loading thumbnail…

ICE-6: Rendering Marks and Channels

This example visualizes the grades of 20 students as horizontal bars in a bar chart, with student names on the y-axis and grade values on the x-axis. It uses React and D3 v5, importing specific functions like `scaleBand`, `scaleLinear`, `max`, and `csv` from the d3 module. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG elements, including custom ticks with green grid lines and blue-bordered orange rectangles for each bar.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example draws a simplified emoji-style face with a yellow circular head, black outline, asymmetric eyes, and a curved mouth, centered within a 960×500 SVG canvas. The visualization is built with React and D3 v7, using d3.arc to generate the mouth path and SVG circles for the head and eyes. Static styling comes from inline CSS that removes page margins, and the entire composition is grouped and translated to the canvas center.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This fork of ICE-5 demonstrates how to load and parse CSV data using D3.js version 7 within a React framework. The page displays a heading and a message container, rendering SVG graphics that include decorative illustrations. The code uses `d3.csv` to fetch and parse data, though the specific dataset is not visible in the provided files. A prominent red-styled pre element serves as the output area for displaying parsed data results.

Loading thumbnail…

11525657_ICE5

This example demonstrates basic data loading and parsing with D3. It fetches a CSV file from a GitHub gist using `d3.csv`, then displays the file size, row count, and column count in a large, styled text element. A static ornamental SVG image is also embedded on the page. The visualization uses D3 v7 within a plain HTML page, with styling applied via CSS to highlight the parsed data summary.

Loading thumbnail…

smiley

A yellow smiley face rendered in SVG, with black outlined eyes and a curved mouth, is centered against a blank background. The visualization is built with React and D3’s `arc` generator to construct the mouth path, while circles are used for the face and eyes. The component sets explicit pixel dimensions and positions all elements relative to a central group, demonstrating a straightforward mapping of geometric primitives to a familiar icon.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

A yellow circular face with two black eyes and an open mouth is rendered as an SVG graphic using React and D3. The code defines the facial features as geometric primitives: a yellow circle for the head, two smaller circles for eyes, and a D3 arc generator for the mouth. D3's `arc` function creates the mouth path with specified inner and outer radii and angular ranges. The entire face is centered by applying a `transform` translation to a group element, and the visualization is mounted into the DOM via `ReactDOM.render`.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

A yellow circular face with two black eyes and an open mouth is rendered as an SVG graphic using React and D3. The code defines the facial features as geometric primitives: a yellow circle for the head, two smaller circles for eyes, and a D3 arc generator for the mouth. D3's `arc` function creates the mouth path with specified inner and outer radii and angular ranges. The entire face is centered by applying a `transform` translation to a group element, and the visualization is mounted into the DOM via `ReactDOM.render`.

Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes a smiley face using React and D3, rendered as scalable vector graphics (SVG). The face is composed of a yellow circle with a black stroke, two eye circles, and a curved smile path generated with `d3.arc`. The React component manages the SVG elements, while inline JavaScript expressions handle positioning, sizing, and the arc's start and end angles. The visualization demonstrates basic React and D3 integration, with D3 loaded from a CDN and React rendering the SVG output.