Skip to main content
Log in
K

Kanishka33

@Kanishka33·16 public vizzes

Loading thumbnail…

Length vs Age scatter plot

This scatter plot displays the relationship between shark length and age, revealing no clear trend between the two variables. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes. Circles representing individual data points are positioned using the `xScale` and `yScale` functions, with data loaded from a local CSV file. The chart includes labeled axes, a title, and a grid-like appearance created by tick lines extending across the plot area.

Jun 5, 2020
Loading thumbnail…

Scatter Plot of Gender vs Length

This scatter plot shows the relationship between shark gender and length, revealing that male sharks tend to have a higher average length than females. The visualization uses d3.csv to load the data and renders circles positioned with d3.scalePoint for the categorical gender axis and d3.scaleLinear for the numerical length axis. SVG elements are drawn with d3.axisBottom and d3.axisLeft, including grid lines and custom tick formatting via d3.format.

Jun 5, 2020
Loading thumbnail…

Customizing Axis

This example demonstrates a bar chart that visualizes the relationship between sex and a numeric measurement from a CSV dataset, highlighting the customization of axis scales and formatting. The chart uses D3’s `scaleBand` for the categorical y-axis and `axisLeft` to render it, while the x-axis is created with `axisBottom` and a custom tick format that converts large numbers using `format(".3s")`. The code sets specific margins, removes default domain lines, and applies CSS styles for tick labels and grid lines, all within an SVG rendered via React.

Jun 5, 2020
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes genderwise comparison of sharks, showing the frequency distribution of male and female observations from a CSV dataset. The chart uses SVG rendering with D3.js v5, employing `d3.scaleLinear` for the y-axis, `d3.scaleBand` for categorical x-axis positioning, and `d3.axisLeft`/`d3.axisBottom` for gridlines and ticks. Interactive hover effects trigger `transition` animations, highlighting divergence percentages via appended text and a dashed limit line.

Jun 5, 2020
Loading thumbnail…

Column Chart

This column chart visualizes gender-based frequency data from a CSV file, displaying two bars for Female (8) and Male (32) categories. The chart uses d3.csv for data loading and d3.scaleBand with d3.scaleLinear for positioning, rendering bars as SVG rectangles. Interactive features include mouseover tooltips that show values and click alerts, enabled through chart configuration flags. Axis labels appear for both dimensions, with d3.axisBottom and d3.axisLeft generating the scales.

Jun 5, 2020
Loading thumbnail…

Scatter Plot of Eye_Diameter vs Jaw

The scatter plot shows the relationship between Eye_Diameter and Jaw size for sharks, with no clear trend between the two variables. Each point represents a shark, with eye diameter plotted on the y-axis and jaw size on the x-axis. The visualization uses D3.js (v5) with scaleLinear, extent, axisLeft, axisBottom, and csv loading to process the data and render the SVG. Circles are semi-transparent blue, and the chart includes labeled axes, grid lines, and a title, with data sourced from the provided data.csv file.

Jun 5, 2020
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between numeric measurements—including Length, Eye Diameter, and Jaw—across different countries. Two dropdown menus dynamically select which columns appear on the x- and y-axes, triggering a re-render of the visualization. Built with D3.js v5, it uses the library's `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, along with custom dropdown and scatter plot modules. Circles animate into position using `transition().duration(2000).delay()`, while axis labels update to reflect the chosen variables. Data comes from a local CSV file.

Jun 5, 2020
Loading thumbnail…

Scatter Plot w. 1 Ordered Attribute

This scatter plot displays the relationship between fish length and sex, with the ordered attribute "Length" on the x-axis and the categorical "Sex" on the y-axis. It uses D3 v5’s `scaleLinear` and `scalePoint` to map data to SVG coordinates, with `axisBottom` and `axisLeft` for gridlines. The data is loaded from a CSV file using D3’s `csv` method, and circles are appended to an SVG group with a fixed radius.

Jun 4, 2020
Loading thumbnail…

Average_Length vs Age scatter plot

This scatter plot displays the relationship between the average length and age of sharks, revealing no clear trend between the two variables. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for ticks, and `extent` to set the domain from the CSV data. Circles represent each data point with a fixed radius and semi-transparent green fill. Axis labels and a title are added using SVG text elements within the margin-defined plot area.

Jun 4, 2020
Loading thumbnail…

Scatter Plot w. 1 Ordered Attribute

This scatter plot displays the relationship between length and age for a dataset of 39 items, with points distributed across a linear scale on both axes. The visualization positions circles based on their numeric values for each attribute, using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the coordinate system and gridlines. The code loads data from a remote CSV via `d3.csv`, parses numeric fields, and renders the chart as SVG within a React component, adding axis labels and a title to clarify the comparison.

Jun 4, 2020
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the relationship between age and length for a dataset of 40 observations. A dropdown menu allows users to switch between different stimulus maps, which appear as background images with city-specific resolutions loaded from a CSV file. Users can hover over individual data points to see detailed tooltip information including fixation duration and coordinates. The visualization uses D3 v5 with SVG rendering, featuring animated k-means clustering via the `kmeans` algorithm with `d3.scaleOrdinal` for cluster colors, and axes that adapt to the selected image dimensions.

Jun 4, 2020
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking fixation data across different city map stimuli. Users select a city from a dropdown menu, which filters the data and displays fixation points as blue circles overlaid on the corresponding city image. The visualization uses D3.js with an SVG renderer, incorporating d3.scaleLinear for axes, d3.scaleOrdinal from d3-scale-chromatic for color coding, and interactive tooltips showing user, coordinates, fixation duration, and description. The background image resolution is mapped to the coordinate system using data from a separate CSV file.

Jun 4, 2020
Loading thumbnail…

Let's make a face using D3.js

This example visualizes a bar chart of country data from a CSV file, with horizontal bars representing lengths per country. The chart uses D3.js v5 to load the data, scales the lengths linearly, and positions the countries with a band scale. Rectangles are appended to an SVG container, with the chart area offset by margins. The code relies on D3’s `csv`, `scaleLinear`, `scaleBand`, and `select` APIs, and renders directly to SVG.

Jun 4, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects, with population values converted to thousands. The visualization highlights custom D3 axes: the bottom axis uses a linear scale with tick formatting that abbreviates large numbers (replacing "G" with "B"), while the left axis removes its domain and tick lines for a cleaner look. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, rendering as SVG with styled tick text and labels.

Jun 4, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized, including removing default domain lines, adding a descriptive axis label, and formatting tick labels with the `format` function to abbreviate large numbers (e.g., converting billions to ’B’). The visualization uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart.

Jun 4, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can adapt to browser window resizing. It fills the entire viewport with an SVG element and redraws a pair of intersecting green lines to form an X, ensuring the graphic always spans the current width and height. The code uses a `redraw()` function that reads the container’s `clientWidth` and `clientHeight` to set the SVG’s dimensions, then updates the line coordinates. A global `window.addEventListener("resize", redraw)` triggers the redraw, while CSS positioning with `position: fixed` keeps the chart container flush with the page edges.

Jun 3, 2020