N

norangai

@norangai·19 public vizzes

Loading thumbnail…

area chart

This example shows an area chart of visual acuity data, with a gradient fill transitioning from green through yellow to red based on y-values. The chart encodes data points as white circles positioned along the area’s upper boundary, each with a title tooltip displaying its value. Built with D3 v5, the visualization uses `d3.scaleLinear` for both x/y positioning and color mapping, an `area()` generator with `curveMonotoneX` for the shape, and SVG `linearGradient` definitions to color the fill. A simple SVG rect outlines the plot area.

Loading thumbnail…

HK map

This visualization shows a map of Hong Kong using D3 v5 with SVG rendering. The map displays geographic boundaries through a projection and path generator, with the region outlined against a minimal white background. The code relies on d3.geoPath to convert GeoJSON data into SVG paths, while the page layout uses a simple 960x500 pixel SVG canvas with hidden overflow. The visualization imports D3 from a CDN and structures the map using standard D3 mapping techniques, though the specific data source file is not included in the provided files.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature in degrees Celsius in San Francisco, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to SVG coordinates, with d3.axisBottom and d3.axisLeft for axes. A filled area path is generated using d3.area with curveBasis, styling the region in steelblue. Data is loaded via d3.csv and parsed into Date and numeric objects before rendering.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature variations over time using the Data Canvas Sense Your City dataset, loaded via d3.csv. The React-based application renders an SVG with a natural curve path (d3.line with curveNatural) linking data points, while d3.scaleTime and d3.scaleLinear map timestamps and temperature values to axes. The axes, built with custom React components, display weekdays and temperature labels using d3.timeFormat. The chart omits individual data point markers, emphasizing the smooth curved trend line with a teal stroke styled through CSS.

Loading thumbnail…

Line Plot with menu

This interactive line plot displays eyeSight data over time, with a dropdown menu to toggle between the S and C data columns. Users can also append new data points via a form that accepts a year, S value, and C value, which are then added to the dataset and trigger a re-render. The visualization is built with D3 v5, using `csv` to load data, `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `transition().duration(1000)` to animate the line path update. The menu is constructed using a custom `dropdownMenu` component that appends `option` elements to a `select` element.

Loading thumbnail…

Line Plot with menu

A line plot displays monthly price data for two columns, with a dropdown menu above the chart to switch which column is rendered on the y-axis. The menu, built via a custom `dropdownMenu` component, triggers the `scatterPlot` component on change, which uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `curveBasis` to draw the smoothed path. Animated transitions of 1000 milliseconds update the line when a new column is selected, using SVG rendering.

Loading thumbnail…

Making Car Scatter Plat with menu

This interactive scatter plot visualizes the relationship between vehicle weight and horsepower using the auto-mpg dataset. A dropdown menu allows users to select which column from the data serves as the x-axis variable, dynamically updating the visualization. Built with D3 v5, the chart uses SVG rendering and a reusable `dropdownMenu` component, employing `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct axes and plot circles with a fixed radius. The scatter plot component handles data transformation and redrawing on menu selection.

Loading thumbnail…

Making Car Scatter Chat

A scatterplot of the auto-mpg dataset displays the relationship between vehicle weight and horsepower, with each semi-transparent orange circle representing an individual car. The chart includes labeled axes, a title, and gridlines for readability. Built with D3 v5, the visualization uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to map the data, while circle elements are appended to an SVG canvas. The code loads the CSV data from a VizHub dataset and parses numeric fields before rendering.

Loading thumbnail…

Temp Scatter Chat

This visualization charts temperature over time in San Francisco, using a smooth orange line to connect a continuous series of points across a grid-backed scatter plot. The chart displays axis labels for Time and Temperature, with a title referencing auto-mpg data. Built with d3.v5, it loads CSV data via `d3.csv`, transforms timestamps and numeric values, then renders an SVG using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and a line generator with `curveBasis`.

Loading thumbnail…

Making Scatter Chat

This scatter plot displays the population of the top ten most populous countries as circles positioned along a categorical y-axis and a linear x-axis. The chart uses d3.csv to load population data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisBottom and d3.axisLeft to render axes. Custom tick formatting converts numbers to abbreviated labels using d3.format, with circles drawn as SVG elements.

Loading thumbnail…

Making BarChart

This example shows a horizontal bar chart of the top 10 most crowded countries, ranked by population on a linear scale. The code uses D3 v5 to load CSV data, apply a linear scale for the x-axis and a band scale for the y-axis, and render SVG rectangles for bars. It formats tick labels with `d3.format` to abbreviate large numbers (e.g., "G" replaced with "B") and draws gridlines using the axis’s tick size.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the population of the top 10 most populous countries, with each country positioned along the y-axis and its population along the x-axis. The visualization uses D3.js scales (scaleLinear and scalePoint), axes (axisBottom and axisLeft), and SVG rendering. Data is loaded from a CSV file containing automobile specifications, though the code maps population and country fields for display.

Loading thumbnail…

something

A yellow SVG circle fills the frame, while a smaller black circle moves from above to rest at the lower center via a two-second `transition.attr` animation. The code uses D3 v5’s `select` and `arc` imports, though only `select` and the `svg.append('circle')` API render the static and animated shapes, with the transition changing the `cy` attribute.

Loading thumbnail…

Hello VizHub

This example displays a large, colorful greeting message against a dark background using the D3.js library. The page shows "Hello VizHub!" as static text within a centered div, demonstrating basic DOM selection and text manipulation through D3's `select` method. The code imports the message from a local ES6 module and applies styling via external CSS with a Google Fonts import. It relies on D3 v5 and HTML, CSS, and JavaScript files without any data source or interactive behavior.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates drawing primitive geometric shapes—circles, rectangles, lines, and a custom path—using SVG elements directly in an HTML document without any JavaScript library. CSS rules in an external stylesheet apply stroke styling, with a class selector setting line color and width. A `<g>` element uses the `transform` attribute to translate and scale a grouped collection of shapes, while inline presentation attributes assign fills and strokes. The SVG canvas is 960 by 500 pixels, and CSS sets the body to a monospace font with hidden overflow.

Loading thumbnail…

Untitled

Two hardcoded circles are drawn on an SVG canvas from an array of radius, center, and color values. D3.js binds the data and appends the circle elements via `selectAll` and `enter`, setting their attributes for position and fill. A “Randomize” button, when clicked, recomputes the `cx` and `cy` coordinates using `Math.random()`, shifting the circles within the 300-by-300 pixel space. The visualization demonstrates basic D3 data joins and event-driven updates without external data sources.

Loading thumbnail…

Line Chart with Multiple Lines

The visualization displays a week of temperature readings from multiple global cities as a multi-series line chart, with each city represented by a distinct colored line derived from the D3 `schemeCategory10` ordinal scale. It uses D3 v5’s `scaleTime` and `scaleLinear` for the time and temperature axes, and constructs the smooth curves via `line()` with `curveBasis`. The data is loaded from a CSV dataset provided by Data Canvas - Sense Your City, and a custom `colorLegend` component annotates the city names.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth, colored line from the d3 category10 scale, with a color legend and labeled axes for time and temperature. The visualization is built with d3.v5, using `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `nest`, and SVG rendering. The data is loaded from a CSV file and parsed before plotting.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes one week of temperature data from Data Canvas - Sense Your City across multiple global cities. It shows time on the x-axis, temperature in degrees Celsius on the y-axis, and encodes city as color, with lines sorted by their final temperature value. The visualization uses d3.scaleLinear, d3.scaleTime, d3.scaleOrdinal, d3.line, and d3.curveBasis to render a smooth path for each city. A custom color legend, rendered as an SVG group, is positioned in the upper-right corner using the colorLegend function.