Skip to main content
Log in
P

pcbt1125

@pcbt1125·21 public vizzes

Loading thumbnail…

Making a bar chart with D3.js

This example shows a horizontal bar chart of country populations using D3.js v5, with data loaded from a CSV file and rendered as SVG rectangles. The chart uses `d3.scaleLinear` for the x-axis population scale and `d3.scaleBand` for the categorical y-axis, with `d3.axisLeft` and `d3.axisBottom` to draw the axes. Population values are formatted by multiplying the raw CSV numbers by 1000, and the bars are styled with a steelblue fill.

Nov 18, 2019
Loading thumbnail…

Let's make a face with D3.js

This example shows a horizontal bar chart of population data for ten countries, using D3.js v5 with SVG rendering. The chart displays population values on the x-axis and country names on the y-axis, with steel-blue bars sized proportionally. The code uses `d3.csv` to load the data, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for axes. The dataset is drawn from the included CSV file, with population values multiplied by 1000.

Nov 6, 2019
Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions worldwide, with point size encoding yield magnitude and color distinguishing the responsible country. A linked histogram below shows the annual count of nuclear events, supporting time-brushing to filter deployments by year. The visualization uses D3 scales for sizing and coloring, geoNaturalEarth1 projections with geoPath for the world map, brushX for temporal filtering, and React components for dropdown menus filtering by purpose and deployment type. Hovering reveals location details, while clicking displays additional metadata.

Nov 6, 2019
Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data using React and D3.js (v5), presenting four coordinated views: a line chart of weekly ILI percentages overlaid by year, a bar chart ranking states, a color-coded US map, and a scatter plot correlating patient totals with ILI percentages. Users can switch between value attributes (ILI percentage, total, providers, total patients) and field attributes (state, year, week) via dropdown menus, with the bar chart supporting adjustable state counts. The map leverages `geoAlbersUsa` and `geoPath` for state rendering with sequential color scaling, while brushless hover interactions and legends enable highlighting and filtering across all views.

Nov 6, 2019
Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions worldwide, with point size encoding yield magnitude and color distinguishing the responsible country. A linked histogram below shows the annual count of nuclear events, supporting time-brushing to filter deployments by year. The visualization uses D3 scales for sizing and coloring, geoNaturalEarth1 projections with geoPath for the world map, brushX for temporal filtering, and React components for dropdown menus filtering by purpose and deployment type. Hovering reveals location details, while clicking displays additional metadata.

Nov 6, 2019
Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions worldwide, with point size encoding yield magnitude and color distinguishing the responsible country. A linked histogram below shows the annual count of nuclear events, supporting time-brushing to filter deployments by year. The visualization uses D3 scales for sizing and coloring, geoNaturalEarth1 projections with geoPath for the world map, brushX for temporal filtering, and React components for dropdown menus filtering by purpose and deployment type. Hovering reveals location details, while clicking displays additional metadata.

Nov 6, 2019
Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions worldwide, with point size encoding yield magnitude and color distinguishing the responsible country. A linked histogram below shows the annual count of nuclear events, supporting time-brushing to filter deployments by year. The visualization uses D3 scales for sizing and coloring, geoNaturalEarth1 projections with geoPath for the world map, brushX for temporal filtering, and React components for dropdown menus filtering by purpose and deployment type. Hovering reveals location details, while clicking displays additional metadata.

Nov 6, 2019
Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions worldwide, with point size encoding yield magnitude and color distinguishing the responsible country. A linked histogram below shows the annual count of nuclear events, supporting time-brushing to filter deployments by year. The visualization uses D3 scales for sizing and coloring, geoNaturalEarth1 projections with geoPath for the world map, brushX for temporal filtering, and React components for dropdown menus filtering by purpose and deployment type. Hovering reveals location details, while clicking displays additional metadata.

Nov 6, 2019
Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions worldwide, with point size encoding yield magnitude and color distinguishing the responsible country. A linked histogram below shows the annual count of nuclear events, supporting time-brushing to filter deployments by year. The visualization uses D3 scales for sizing and coloring, geoNaturalEarth1 projections with geoPath for the world map, brushX for temporal filtering, and React components for dropdown menus filtering by purpose and deployment type. Hovering reveals location details, while clicking displays additional metadata.

Nov 6, 2019
Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions worldwide, with point size encoding yield magnitude and color distinguishing the responsible country. A linked histogram below shows the annual count of nuclear events, supporting time-brushing to filter deployments by year. The visualization uses D3 scales for sizing and coloring, geoNaturalEarth1 projections with geoPath for the world map, brushX for temporal filtering, and React components for dropdown menus filtering by purpose and deployment type. Hovering reveals location details, while clicking displays additional metadata.

Nov 6, 2019
Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions worldwide, with point size encoding yield magnitude and color distinguishing the responsible country. A linked histogram below shows the annual count of nuclear events, supporting time-brushing to filter deployments by year. The visualization uses D3 scales for sizing and coloring, geoNaturalEarth1 projections with geoPath for the world map, brushX for temporal filtering, and React components for dropdown menus filtering by purpose and deployment type. Hovering reveals location details, while clicking displays additional metadata.

Nov 6, 2019
Loading thumbnail…

Let's make a Barchart with D3.js!

This bar chart displays the population of the ten most populous countries, using a horizontal layout with country names on the y-axis and population counts on the x-axis. The data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while styling sets the bars to steelblue. The chart updates dynamically when the CSV data is parsed and processed.

Nov 5, 2019
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

Nov 5, 2019
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

Nov 4, 2019
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined features is rendered in SVG, and its eyebrows animate upward and back down over four seconds. Built with D3 v5, the example uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to move the eyebrow group. The face is centered via a translated `g` element, with eye spacing, radius, and eyebrow dimensions defined as constants. No external data is loaded; all shapes are constructed programmatically from hard-coded values.

Nov 3, 2019
Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face is built from SVG shapes, with two eyes, animated eyebrows, and a semi-circular mouth, all centered on a blank canvas. The code constructs the face using D3.js version 5 selection and arc methods, positioning elements via translations and attributes. Eyebrows transition between two vertical offsets over two seconds each, creating a repeated raising-and-lowering motion. The visualization demonstrates basic SVG drawing and transition animations without external data.

Nov 3, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and styling using CSS. It displays circles, rectangles, lines, and paths on a 960x500 canvas, with shapes scaled and translated using SVG transform attributes. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while CSS classes such as `.lines` control stroke properties. Colors and fills are applied both inline and through stylesheets, showcasing how SVG and CSS combine to create static vector graphics.

Nov 2, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and styling using CSS. It displays circles, rectangles, lines, and paths on a 960x500 canvas, with shapes scaled and translated using SVG transform attributes. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while CSS classes such as `.lines` control stroke properties. Colors and fills are applied both inline and through stylesheets, showcasing how SVG and CSS combine to create static vector graphics.

Nov 2, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling. It shows circles and rectangles positioned directly on an SVG canvas, with colors applied through presentation attributes like `fill="red"` and inline styles, as well as a `<g>` group that applies a shared `fill="blue"` to multiple shapes. The code uses native SVG elements (`circle`, `rect`, `g`) with a `transform` attribute for translation, plus an external stylesheet for global page styling. No data source or dynamic behavior is present; all shapes are static and defined directly in the HTML markup.

Nov 1, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup that renders a single static message, “Hello VizHub!”, centered on the page. The visualization highlights how D3’s `select` method targets an HTML element, while the text content comes from an ES6 module export. It uses D3 v5, loaded via CDN, and applies custom styling from an external stylesheet with the Ubuntu font. No data is loaded; instead, the code shows basic DOM manipulation and module import structure within a VizHub project.

Nov 1, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup that renders a single static message, “Hello VizHub!”, centered on the page. The visualization highlights how D3’s `select` method targets an HTML element, while the text content comes from an ES6 module export. It uses D3 v5, loaded via CDN, and applies custom styling from an external stylesheet with the Ubuntu font. No data is loaded; instead, the code shows basic DOM manipulation and module import structure within a VizHub project.

Oct 31, 2019