Himanshu Chelani

@himanshuchelani·8 public vizzes

world map

This example renders a world map using SVG paths generated from geographic data. The map visualizes country boundaries from the World Atlas TopoJSON dataset, projected using a natural Earth projection. The code employs D3 v5’s `geoPath` and `geoNaturalEarth1` for path generation and projection, while TopoJSON’s `feature` method converts the TopoJSON topology into GeoJSON features. Each country is drawn as an SVG path, with styling defined through CSS classes for the sphere background and country fills.

Apr 8, 2020

Loading thumbnail…

general update pattern

This example demonstrates the D3.js general update pattern for smoothly transitioning SVG elements when data changes. The visualization shows a bowl of fruit that updates over time as apples are eaten or replaced with lemons, using setTimeout to trigger three sequential state changes. The code employs `d3.select`, `d3.range`, and a custom `fruitBowl` function (not shown) to render SVG shapes. D3 v5 and React are used, with the SVG viewport defined as 960×500 pixels. The example illustrates how to handle data additions, removals, and modifications while maintaining consistent visual representation.

Apr 8, 2020

Loading thumbnail…

area chart

This area chart visualizes global population by year, using a smooth, filled curve to show the trend over time. The chart is rendered as an SVG within a React application, using D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with a `curveBasis` to generate the path. The data is loaded from a CSV file containing world population figures by year, with axis labels and a title annotated on the plot.

Apr 8, 2020

Loading thumbnail…

line

This line chart visualizes temperature variations in San Francisco over a week. The SVG renders a smooth curve using d3.line with curveBasis, plotting timestamps against temperature values. Axes are created with d3.axisBottom and d3.axisLeft, including gridlines and rotated axis labels. The data is loaded from a CSV file, parsed for temperatures and dates, then scales are set using d3.scaleTime and d3.scaleLinear.

Apr 8, 2020

Loading thumbnail…

both axis quantative Scatter PLot

This scatter plot visualizes the relationship between horsepower and weight for various car models, using a dataset of auto-mpg specifications. The visualization employs quantitative scales on both the x and y axes, with car data points rendered as semi-transparent red circles. Built with D3 v5 and React, the code utilizes `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for tick generation, and `extent` to compute data domains. The SVG rendering includes axis labels and a title, with data loaded from a CSV file hosted on VizHub.

Apr 7, 2020

Loading thumbnail…

Scatter PLot

This scatter plot displays the population of the top 10 countries, with each circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for scales, and d3.axisLeft and d3.axisBottom with custom tick formatting to abbreviate large numbers. Circles are rendered as SVG elements with a fixed radius, and the chart includes gridlines generated by tick sizes, all within a React-based setup using d3.v5.

Apr 7, 2020

Loading thumbnail…

Custamization of axis

This example shows a horizontal bar chart of the top 10 countries by population, with a customized axis that formats large population values into abbreviated units like "B" for billions. The chart uses d3.scaleLinear and d3.scaleBand for positioning, while d3.axisLeft and d3.axisBottom render the axes with custom tick formatting via d3.format. The implementation loads data from a CSV file, removes default axis domain lines, and adds labels for the population axis and chart title.

Apr 7, 2020

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of population figures for ten countries, with country names on the vertical axis and population values encoded as bar lengths on the horizontal axis. The chart is rendered as SVG using D3 v5. The code imports the data from a CSV file and uses D3's `scaleLinear` and `scaleBand` to map population and country names to coordinates, while `axisLeft` and `axisBottom` generate the chart’s axes. The bars are drawn as `rect` elements, and the population values are multiplied by 1,000 during data loading.

Apr 6, 2020