N

NeepaB

@NeepaB·34 public vizzes

Loading thumbnail…

Fork of Selecting a Year on a line chart

This example shows a fork of a line chart that selects a year to display. It reads movie data from a CSV file, parsing the date and count columns, and renders the visualization as an SVG. The code uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to draw the line. It is built within a React framework, though the current implementation focuses on data preparation and chart setup.

Loading thumbnail…

Selecting a Year on a line chart

This example shows a multi-line chart tracking earthquake counts across four U.S. regions (Midwest, Northeast, South, and West) from 2010 to 2015. The code uses D3 v5 with SVG rendering and animation, loading data from a CSV file via `d3.csv`. It employs `d3.nest()` to aggregate counts by year and region, then draws separate colored lines using `d3.line()` and `d3.scaleTime()`/`d3.scaleLinear()`. A legend and axis labels are added, with the visualization built using the margin convention and React as the framework.

Loading thumbnail…

Temperature in San Franscisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas’s “Sense Your City” dataset. A smooth curve, generated with d3.line and curveBasis, traces temperature over time using d3.scaleTime and d3.scaleLinear for the axes. The SVG rendering includes labeled axes, gridlines, and a title. Data is loaded via d3.csv, parsed with new Date and unary plus, and rendered using d3 v5 with explicit axis and margin configurations.

Loading thumbnail…

Line Chart with Multiple Lines_a

This line chart displays one week of temperature data for San Francisco, sourced from Data Canvas’s “Sense Your City” dataset. Multiple city lines are plotted over time, with a color legend distinguishing each location, and the lines use a basis curve for smooth rendering. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, and `line` to generate SVG paths. Axes include tick marks and labels, while a title and legend clarify the chart’s content.

Loading thumbnail…

Q4

This visualization shows earthquake counts by US state from 2010 to 2015, using an interactive heatmap with tiles colored on a yellow-to-dark-red scale. A dropdown menu filters the display by earthquake intensity category, and hovering over a tile reveals the state, year, and exact count via a tooltip. The code transforms the wide CSV data into long format, then uses d3.scaleBand for axes, d3.scaleLinear for color, and d3.nest to group data by category. The SVG rendering includes an animated legend, and the visualization is built with React and D3 v5.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using a logarithmic-free linear scale for the x-axis and categorical bands for country names. The visualization customizes axes by removing default domain lines and tick marks, applying a tick format that abbreviates large numbers (e.g., "G" for billions) and adding styled axis labels and a title. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` APIs, rendering to SVG with data loaded from a CSV file.

Loading thumbnail…

Untitled

This example shows a bar chart of monthly values over time, with each bar representing a data point from a CSV file. The chart displays dates on the x-axis and dollar values on the y-axis, using rotated tick labels for readability. It employs D3.js version 3.5.17, specifically `d3.scale.ordinal`, `d3.scale.linear`, `d3.svg.axis`, and `d3.csv` to load and render the data as SVG rectangles. The bars are styled in steelblue and the axes include custom margins and formatting.

Loading thumbnail…

Selecting a Year on a line chart

This interactive line chart displays population changes over time for multiple world regions, using a vertical black line to mark a user-selected year. Moving the mouse across the chart updates the selected year, which is reflected in the line’s position. The visualization is built with D3 v5, using `d3.line` for the paths, `d3.axisBottom` and `d3.axisLeft` for axes, and a `mousemove` event listener on a transparent overlay rect to trigger year changes. Data comes from UN population estimates and medium variant projections, rendered as SVG.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple colored lines tracing each region’s trajectory from 1950 to 2100. The chart uses a time scale for the x-axis, a linear scale for population, and an ordinal color scale with a custom legend. D3’s `nest()` and `scaleOrdinal` group and color the series, while `d3.line` with `curveBasis` smooths the paths. Data comes from UN population estimates and medium-variant projections, melted into a tidy format for plotting as SVG.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for multiple cities in San Francisco, sourced from Data Canvas - Sense Your City. Lines are rendered in SVG using d3.line and d3.curveBasis to smooth the series, with colors assigned via d3.scaleOrdinal and a categorical color scheme. Axes use d3.axisLeft and d3.axisBottom, while a custom colorLegend function draws circles and labels for the city names, and the data is loaded with d3.csv.

Loading thumbnail…

Circles on a Map

This visualization displays a world map with semitransparent circles overlaid on each country, sized proportionally to population data from 2018. The map renders using d3.geoNaturalEarth1 projection and d3.geoPath, while circle sizes are scaled with d3.scaleSqrt. Zooming is enabled via d3.zoom. The code includes color and size legends built with reusable functions, and loads data from a CSV and TopoJSON world atlas using d3.csv and topojson.feature.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays 392 cars from the UCI Machine Learning repository, with dropdown menus letting users select which numeric attributes to compare on the x and y axes. The visualization uses d3.csv for data loading, d3.scaleLinear, d3.extent, and d3.axisLeft/axisBottom for scales and axes, while a custom dropdownMenu module handles the interactive selection. Circles animate into position over two seconds via d3.transition with staggered delays, rendered as SVG with semi-transparent red fill.

Loading thumbnail…

Choropleth Map with Interactive Filtering.js

This choropleth map visualizes countries’ economic classifications using color-coded regions, with an interactive legend enabling users to filter which categories remain highlighted. The map pairs an ordinal color scale with a natural Earth projection via `d3.geoPath`, while a `d3.zoom` handler controls pan and zoom. Clicking a legend option dims non-matching countries and emphasizes the selection, using `d3.scaleOrdinal` and `schemeSpectral`. Data comes from TopoJSON world-atlas shapes merged with TSV attributes, rendered as SVG paths.

Loading thumbnail…

Choropleth Map.js

This choropleth map colors countries by their economy classification using an ordinal color scale with a spectral palette. A hover effect highlights individual countries, and a custom legend displays the color categories. The visualization loads world geometry from TopoJSON and joins it with tabular TSV data, rendered as SVG paths via `d3.geoPath` and a natural Earth projection. Interactive pan and zoom are enabled through `d3.zoom`, while the legend and map styling are built with D3’s selection and data-join methods.

Loading thumbnail…

Color and Size Legends.js

Two reusable D3 legend components demonstrate how to encode data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend uses `scaleSqrt` with tick marks to represent numeric values. Both render as SVG groups with circles and text labels, updating through D3's data join pattern. The examples show how legends can be built using `selection.call` with custom functions and `merge` for enter/update transitions.

Loading thumbnail…

World Countries Tree.js

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with each country name rendered as text nodes. The tree layout uses d3.tree and d3.hierarchy to structure the data from a JSON file, while d3.linkHorizontal generates curved paths connecting parent and child nodes. The visualization supports pan and zoom interactions via d3.zoom, and is rendered as SVG with custom styling for text shadows and a Playfair Display font.

Loading thumbnail…

Art Tree.js

Art Tree.js renders a hierarchical dataset of world geography as a horizontal tree diagram, with nodes representing continents, regions, and countries connected by curved links. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` path generator to position nodes and draw edges within an SVG canvas. Data is loaded asynchronously from a JSON file via `d3.json` and processed through `d3.hierarchy`. The layout adapts to the full browser viewport by setting the SVG dimensions to the document’s client width and height.

Loading thumbnail…

Blank Canvas.js

A blank, full-viewport SVG canvas displays a single rounded rectangle with softly curved corners. The visualization demonstrates a minimal D3.js v5 setup, using `select` to bind the SVG element and dynamically sizing it to the browser window's client dimensions. It sets the rectangle's width and height to match the viewport, with a corner radius of 40 pixels. The example serves as a clean starting point for building more complex visualizations, with styling applied through an external stylesheet that fixes the body and hides overflow.

Loading thumbnail…

Cheap tricks for interaction.js

This example shows an interactive world map where individual countries are highlighted in red on hover, with a zoomable natural Earth projection. The visualization loads geographic data from the world-atlas package, including both topojson geometry and a TSV file containing country names. Using D3’s geoPath and geoNaturalEarth1 projection, it renders countries as SVG paths; the zoom feature relies on D3’s zoom event handler to adjust the group’s transform. Country names are joined from the TSV data based on ISO numeric codes.

Loading thumbnail…

Lets make a world map with D3.js

This example shows a natural Earth projection world map, with countries filled in light green against a dark blue sphere, rendered as SVG paths. The code uses D3 v5’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the country outlines, while the TopoJSON library’s `feature` method extracts country geometries from the world-atlas dataset hosted at unpkg. The map is displayed on a 960x500 SVG canvas, with strokes added to differentiate country borders.

Loading thumbnail…

Bowl of Fruit-Hover to Select.js

A dynamic bowl of fruit shows apples and lemons as colored circles that animate in size and position, with a black stroke highlighting the currently hovered fruit. The visualization uses D3 v5 and SVG, with `scaleOrdinal` mapping fruit types to colors and radii. Mouseover and mouseout events trigger a selection state, while transitions animate the circles' entry, exit, and updates as fruits are eaten or replaced over time.

Loading thumbnail…

Bowl of Fruit-Click to Select.js

An interactive fruit bowl displays apples and lemons as colored circles, with a single click selecting a fruit and highlighting it with a black stroke. The visualization uses d3-scale's `scaleOrdinal` to map fruit types to colors and radii, while d3-transition animates circle entry, exit, and position changes over one second. d3-selection handles data joins and click events, and the code demonstrates dynamic updates through timed mutations that remove fruits or change an apple to a lemon.

Loading thumbnail…

Bowl of Fruit-General Update Pattern.js

A bowl of fruit demonstrates the D3 general update pattern, showing how data joins manage enter, update, and exit selections. Apples and lemons appear as colored circles with labels inside a rectangle bowl drawn with SVG. Using `scaleOrdinal` for color and radius, the visualization responds to timed data changes: removing fruit, replacing an apple with a lemon, and filtering items. Each render calls `fruitbowl`, which uses `.enter()`, `.merge()`, and `.exit()` to handle dynamic updates smoothly.

Loading thumbnail…

15_Bowl of Fruit - click to select - Interactions with unidirectional dataflow

This example demonstrates interactive selection within a small SVG scene of colored circles. The D3.js program uses a unidirectional dataflow, where a selected fruit's ID is passed to a click handler that updates the program state before re-rendering. Animated transitions using `transition.duration()` grow new fruit circles upon entry, shrink them on exit, and apply a black stroke to the currently selected fruit. The visualization also reacts to timers that remove or modify fruit items.

Loading thumbnail…

World Population Area Chart

This visualization displays global population growth over time using a filled area chart, with the x-axis representing years and the y-axis showing population in billions. The chart uses D3 v5's `scaleTime`, `scaleLinear`, and `area` generator with a basis curve to create a smooth, maroon-filled region beneath the trend line. Axes are rendered via `axisBottom` and `axisLeft`, with grid lines and custom tick formatting converting gigayears to billions. Data comes from a CSV file loaded via `d3.csv`, containing world population figures by year through 2015.

Loading thumbnail…

Temperature in San Franscisco Area Chart

This area chart shows one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The chart uses an SVG rendering with a maroon filled area beneath a smoothed curve created via `d3.area` with `curveBasis`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while scales use `scaleTime` and `scaleLinear`. Data is loaded from a CSV file using `d3.csv`, with timestamps parsed as `Date` objects and temperatures converted to numbers.

Loading thumbnail…

Temperature in San Franscisco Scatter Plot

This scatter plot displays one week of temperature data in San Francisco, using time on the x-axis and degrees Celsius on the y-axis. The data originates from Data Canvas’s "Sense Your City" project. The visualization is rendered with D3 v5, using `scaleTime` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG circles for data points. The code loads the dataset via `csv()` and applies margins, axis labels, and a title.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning repository’s auto-mpg dataset. Each red, semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis, with a dashed grid from the axis tick marks. Built with D3 v5 and rendered as SVG, the code uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to map the data and draw labeled axes. The plot is generated by fetching the CSV and converting its numeric fields before rendering.

Loading thumbnail…

Scatter Plot

This scatter plot displays population counts for the top 10 most populous countries, using the vertical axis for country names and the horizontal axis for population values. It loads data from a CSV file using d3.csv and renders circles with d3.scaleLinear and d3.scalePoint. Axes are generated with d3.axisLeft and d3.axisBottom, including tick marks that extend across the chart. Population values are formatted in billions using d3.format. The visualization is built with D3 v5 and rendered as SVG.

Loading thumbnail…

Make a Bar Chart

This bar chart displays the population of the top 10 most populous countries, with each bar’s length proportional to population in thousands and countries listed on the vertical axis. Using D3 v5, the code loads data from a CSV, applies linear and band scales to map values to pixel coordinates, and renders an SVG with axes and steel-blue rectangles. The visualization relies on `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 module imports.

Loading thumbnail…

Lets make a face with D3.js

A cartoon face is drawn using SVG shapes: a yellow circle forms the head, two circles become eyes, and rectangles serve as eyebrows. The D3.js library is used to select the SVG canvas, position elements with coordinate transformations, and draw the mouth using the `arc` API. The eyebrows animate, moving upward and returning to their original position via chained `transition().duration()` calls. The face is centered within a 960 by 500 pixel SVG viewport, and the code is structured for React using D3 v5.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. Styling is applied through a linked CSS stylesheet, using classes like `.lines` to set stroke properties and selectors such as `.lines path` for path-specific appearance. The SVG itself uses transform attributes for scaling and translation, while inline styles and presentation attributes (e.g., `fill`, `stroke-width`) define individual shape colors and outlines. No JavaScript libraries are used; the visualization relies solely on static SVG markup and cascading style rules.

Loading thumbnail…

HTML Cars Report

This gallery example demonstrates a static HTML report listing cars with prices under $2,200, showing filtered vehicle data as plain text. The visualization reads car data from a JSON array defined in `cars.js`, where each car includes year, make, model, and price fields. The React component `index.js` uses JavaScript array methods (`filter` and `map`) to process the data and formats each entry into a string with the `formatCar` function, outputting results into a page element via `document.getElementById`. The presentation relies on CSS styling in `style.css` for monospace font and red highlight on specific list items.

Loading thumbnail…

HTML Cars Report

This gallery example demonstrates a static HTML report listing cars with prices under $2,200, showing filtered vehicle data as plain text. The visualization reads car data from a JSON array defined in `cars.js`, where each car includes year, make, model, and price fields. The React component `index.js` uses JavaScript array methods (`filter` and `map`) to process the data and formats each entry into a string with the `formatCar` function, outputting results into a page element via `document.getElementById`. The presentation relies on CSS styling in `style.css` for monospace font and red highlight on specific list items.