nkrpyate

@nkrpyate·12 public vizzes

Untitled

This stacked bar chart displays the composition of groups across three subgroups, with each group’s total broken into color-coded segments. The visualization uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.stack to compute the stacked values from CSV data. Groups are plotted as rectangles filled with a d3.scaleOrdinal palette, rendered as SVG elements within a fixed-width canvas. The chart is built using d3.v4, reading data from a remote raw GitHub URL.

Oct 23, 2020

Loading thumbnail…

Let's Make a Face with D3.js

This example demonstrates how to construct a cartoon face using SVG shapes and D3.js. The code initializes a basic SVG canvas and utilizes D3’s core selection and manipulation methods to draw features like eyes, a nose, and a mouth with simple geometric forms. The visualization relies on D3 v5 loaded from a CDN, with the page structure built in plain HTML and styled via CSS. The face appears as a static composition, showcasing how D3 can create playful, data-driven graphics beyond typical charts.

Oct 16, 2020

Loading thumbnail…

Customizing Axes

This example shows how to customize the axes of a bar chart built with D3.js, displaying the names of people alongside counts of work items in progress and planned. The chart uses `d3.select` and `d3.csv` to load data from `data.csv`, rendering bars in SVG with a stylesheet that adjusts tick text, line colors, and axis labels. The code defines axis label and title font sizes, demonstrating manual styling of the scales and axes.

Oct 16, 2020

Loading thumbnail…

Let's make a face

A blank red SVG canvas fills the browser window, its background set via D3’s `style` method. The code selects the SVG element with `d3.select` and applies the red fill, but no additional shapes or data are drawn. The example demonstrates a minimal D3 v5 setup within a React context, using a simple SVG element and inline JavaScript to produce a monochrome visual placeholder.

Oct 16, 2020

Loading thumbnail…

Pie Chart

This example shows a blank SVG canvas with a steel blue background, sized 600 by 500 pixels, rendered using D3 v5 within a React framework. The code selects the body element to append the SVG, setting its width, height, and background color via chained D3 methods. Although titled "Pie Chart," the visualization does not yet display any pie slices or data, serving as a minimal starter template for building a chart. The rendering relies on standard SVG attributes set through D3’s selection API.

Oct 16, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for a dataset of cars, with each car represented as a semi-transparent red circle. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to construct the axes. Data is loaded from a CSV file via `d3.csv`, and numeric fields are parsed before rendering. Axis labels and a title are added as SVG text elements, with tick marks and gridlines customized through the axis’s `tickSize` method.

Oct 16, 2020

Loading thumbnail…

Temperature in SF Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes. Red semi-transparent circles represent individual car observations, while formatted tick labels and axis annotations clarify the data ranges. The code loads data via `csv` from a remote URL and applies numeric type coercion before rendering.

Mar 10, 2020

Loading thumbnail…

Cars Scatter Plot

Mar 9, 2020

Loading thumbnail…

Customizing Axes

This visualization displays a horizontal bar chart ranking the top 10 countries by population, using a custom-tuned axis to improve readability. The code uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom with a custom tick formatter that converts large numbers into abbreviated units like "B" for billions. Data loads from a CSV file via d3.csv, with population values multiplied by 1000. The chart also includes gridlines, a title, and styled sans-serif text.

Mar 9, 2020

Loading thumbnail…

Let's Make a Face with D3.js

This example builds a stylized face from basic SVG shapes—a yellow circle for the head, two eyes, animated eyebrows, and an arc-based mouth—centered within an SVG canvas. The code uses D3.js v5 selections and the `arc` generator to construct the mouth path, while `transition()` animates the eyebrows in a looping up-and-down motion. React serves as the hosting framework, and rendering relies on SVG elements with D3’s declarative attribute chaining.

Mar 3, 2020

Loading thumbnail…

HTML Starter

This example presents a minimal HTML page that displays the text “Hello HTML” in large, centered type. It uses a plain HTML document with embedded CSS to style the body, setting a font size of 13em and text alignment to center. The page provides a bare-bones starting point for web-based projects, demonstrating the fundamental structure of an HTML document without any JavaScript or external libraries.

Mar 2, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using both inline attributes and CSS. It shows circles, rectangles, lines, and paths arranged in groups, with the `transform` attribute scaling, translating, and nesting elements. The code uses React to render the SVG structure and applies visual properties like fill, stroke, and stroke-width through CSS classes, such as `.lines`, to control line styling and rounded joins.

Feb 28, 2020