Skip to main content
Log in
V

Vishwa246

@Vishwa246·13 public vizzes

Loading thumbnail…

Chloropleth Map

This interactive chloropleth map displays world countries colored by income group, with a legend showing the categorical color scale. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render geographic boundaries from TopoJSON world data loaded via topojson.feature, while country names and income values come from a TSV file merged by ISO code. Users can pan and zoom using d3.zoom, and hovering highlights countries in red via CSS. The ordinal color scale employs d3.scaleOrdinal with the d3.schemeSpectral palette, and a custom colorLegend component renders circles and text labels.

May 10, 2020
Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries organized by continent and subregion, loaded from a nested JSON data structure. The tree layout uses d3.tree and d3.hierarchy to position nodes, with curved links generated by d3.linkHorizontal. Text labels scale in size based on depth, and the entire diagram supports pan and zoom interactions via d3.zoom. The SVG rendering applies a custom color to paths and a white text shadow for legibility.

May 9, 2020
Loading thumbnail…

Art Tree

This hierarchical tree chart displays a global geographic classification, starting with "World" and branching through continents and subregions down to individual countries. The visualization uses a horizontal link-and-node layout, with the root node on the left and child nodes extending rightward. Built with D3 v5, the implementation calls `d3.tree` and `d3.hierarchy` to structure the data, then uses `d3.linkHorizontal` to generate the curved SVG paths connecting nodes. The data is loaded from a JSON file, and the chart renders as an SVG element that fills the viewport.

May 9, 2020
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map using a natural Earth projection, where countries render as light green polygons with black outlines on a blue sphere. Users can pan and zoom through the map, and hovering over any country highlights it in red while displaying its name in a tooltip. The visualization uses d3.zoom for interaction, d3.geoPath with d3.geoNaturalEarth1 for map projection, and topojson to convert TopoJSON data from the world-atlas package. Country names come from a TSV file matched by ISO numeric codes.

May 9, 2020
Loading thumbnail…

Let's make a map with D3.js!

This map visualizes global country boundaries by projecting the Natural Earth 110m dataset onto a blue sphere using the Natural Earth projection. The code employs D3.js v5's `geoPath` and `geoNaturalEarth1` for geographic rendering, while TopoJSON’s `feature` function extracts country features from the world-atlas JSON. Each country is drawn as a light-green SVG path with subtle black stroke opacity, with the sphere outline added separately.

May 8, 2020
Loading thumbnail…

World Population Area Chart

This visualization displays world population trends over time as a smooth area chart, with the population values shown on the y-axis and years on the x-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with a `curveBasis` generator, rendering to an SVG. Data is loaded via `d3.csv` from a VizHub dataset, with the area path filled in maroon and labeled axes using custom tick formatting.

May 7, 2020
Loading thumbnail…

Temperature in Sanfrancisco Area Chart

This visualization shows a week of temperature measurements in San Francisco using a smooth area chart, with time on the x-axis and temperature on the y-axis. The chart includes labeled axes and a title, rendered as an SVG within a React-based framework. The code employs d3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` functions, using `curveBasis` for the smoothed line. Data is loaded from a remote CSV file containing timestamp and temperature values.

May 7, 2020
Loading thumbnail…

Temperature in Sanfrancisco Line Chart

This line chart visualizes a week of temperature data in San Francisco, with timestamps on the x-axis and temperature on the y-axis. The chart uses D3 v5 to scale data with `scaleTime` and `scaleLinear`, draw axes via `axisBottom` and `axisLeft`, and render a smooth curve using the `line` generator with `curveBasis`. Data is loaded as CSV and parsed into dates and numbers. The SVG rendering includes grid lines, axis labels, and a title, with styling applied via CSS classes.

May 7, 2020
Loading thumbnail…

Temperature in Sanfrancisco Scatter PLot

This scatter plot visualizes one week of San Francisco temperatures, with time on the x-axis and temperature on the y-axis. The code uses d3.csv to load data and d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render an SVG chart with labeled axes and circular points. The visualization includes a title and axis labels, with margins and a fixed circle radius for the temperature readings.

May 7, 2020
Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a single vehicle. The visualization uses D3.js version 5 to load CSV data, create linear scales for both axes, and render circles as SVG elements. Axis labels and tick marks are generated using d3.axisLeft and d3.axisBottom, while the chart includes a title and uses red semi-transparent circles to show data density. The React framework structures the page, and the code applies d3.scaleLinear with nice domain padding for cleaner axis ranges.

May 5, 2020
Loading thumbnail…

Bar graph with customised axis

This example visualizes the top 10 most populous countries using a horizontal bar graph, with bars rendered as SVG rectangles and a customized axis. The graph displays population values on the x-axis and country names on the y-axis, with data loaded from a CSV file. The code leverages D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the scales and axes, while `format` is used to abbreviate tick labels (e.g., converting billions to "B"). Custom styling is applied via CSS classes for ticks, labels, and the title.

May 3, 2020
Loading thumbnail…

Bar graph using D3 with ES6

This example displays a horizontal bar chart of population sizes for ten countries, using data from a CSV file. The visualization is rendered as SVG within a React framework, with D3 v5 handling the scales and axes. Specifically, `d3.scaleLinear` maps population values to bar widths, while `d3.scaleBand` positions each country along the y-axis, with `d3.axisLeft` and `d3.axisBottom` generating the tick marks. Bars are appended as `rect` elements, colored steelblue via CSS, and the data is loaded asynchronously using `d3.csv`.

May 1, 2020
Loading thumbnail…

Cars Report self

This example displays a report of cars priced under $2,000, formatted as a list of year, make, model, and price. It uses asynchronous data loading via a custom `getCars` promise that resolves after a 2-second delay, then generates the text output with the `generateReport` function. The result is rendered into the `#message-element` using the DOM's `getElementById` and `textContent` property, with a loading message shown initially.

May 1, 2020