Skip to main content
Log in
J

jeelong

@jeelong·28 public vizzes

Loading thumbnail…

Making a bar chart

A bar chart displays population estimates for twelve countries, sorted by country name along the y-axis and population magnitude along the x-axis. The visualization uses React with D3 v5, rendering SVG rectangles scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`, while axes are generated via `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed into numeric values before rendering.

Jun 6, 2021
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The SVG rendering uses d3.scaleLinear with extent-derived domains, d3.axisBottom and d3.axisLeft for axes, and d3.csv to load the auto-mpg dataset. The circles have a fixed radius with red fill and partial opacity, while axis labels and title are styled via CSS classes. Grid lines are drawn using tickSize to span the inner chart area.

Aug 11, 2020
Loading thumbnail…

Make a face

A stylized yellow face is drawn in SVG, with black-outlined circles for eyes and a curved arc path for a mouth. The eyebrows, rendered as rectangles, animate vertically in a looping up-and-down motion using chained `transition()` calls. Built with React and D3 v5, the code uses `select` to target the SVG and `arc()` to generate the mouth's path, while the face is centered via a group transform.

Jul 20, 2020
Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move the mouse across the chart to select a different year, updating the line’s position. The line chart uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.curveBasis for rendering, while d3.nest groups data by region. A d3.Ordinal scale with schemeCategory10 colors each line, and a custom colorLegend component displays the categories. Data comes from UN population estimates and medium variant projections, processed with d3.csv and d3.timeParse.

Jul 19, 2020
Loading thumbnail…

Melting data from Multiple Lines

This example visualizes population trends over time for various global regions, with multiple lines displayed simultaneously to facilitate comparison. The data is presented using a line chart, where each line represents a different region and is color-coded according to a categorical scheme. The visualization is built using React and D3 v5, leveraging D3's `nest` and `line` functions to structure and render the data. The underlying dataset is sourced from UN population estimates, processed into a tidy format by the `loadAndProcessData` function.

Jul 19, 2020
Loading thumbnail…

Several City Chart

This visualization displays a week of temperature readings from multiple cities, using a multi-line chart to compare trends over time. Each city is represented by a colored path, with a categorical color scale and a legend identifying each location. The chart is built with React and D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveBasis` for smooth paths. Data is loaded via `d3.csv` from a remote dataset, and the rendering uses SVG with nested groups for axes and a custom color legend function.

Jul 18, 2020
Loading thumbnail…

Circles on a map

This example shows world population estimates for 2018, using circles sized by population on a natural Earth projection. Countries lacking data are colored pink, while those with data are gray and hover to teal. The visualization uses D3’s `geoPath` to render the map and `scaleSqrt` for circle radii, with a size legend built via D3’s `scaleOrdinal` and custom legend modules. Data is loaded from a CSV and a TopoJSON atlas, processed with `topojson.feature`, and rendered as SVG within a React starter.

Jul 12, 2020
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore relationships between different car attributes from an auto-mpg dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes for comparison. Built with D3.v5 and React, the visualization uses SVG elements and a transition animation to smoothly reposition data points when the selection changes. The code leverages D3 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` for the axes.

Jul 12, 2020
Loading thumbnail…

Choropleth map with Interactive clicking

A choropleth map of world countries colored by income group, with an interactive legend that filters and highlights selected categories. The map uses a Natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, rendered as SVG paths from TopoJSON world-atlas data. Clicking a legend tick toggles a color value, reducing opacity of non-matching countries and dimming the globe sphere. Zooming via `d3.zoom` and `d3.event` allows pan and scale; the legend is built with ordinal `d3.scaleOrdinal` and the `schemeSpectral` color scheme.

Jul 11, 2020
Loading thumbnail…

Choropleth map

This choropleth map colors countries by income group, with a hover effect that highlights each nation and a legend displaying the categorical color scale. Built with React, it uses D3 v5 APIs including `geoNaturalEarth1` for projection, `geoPath` for rendering country boundaries, and `scaleOrdinal` with `schemeSpectral` for color mapping. World shape data comes from the world-atlas TopoJSON dataset, and the view supports zooming through `d3.zoom`. The legend is generated by the custom `colorLegend` module.

Jun 27, 2020
Loading thumbnail…

Color and Size Legend

Two custom legend components demonstrate how to encode data through color and size. The color legend uses a D3 ordinal scale with four fruit categories, while the size legend uses a square-root scale with five tick values. Both legends are rendered as SVG groups using reusable functions that handle enter/update/exit selections. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and selection methods like `merge` and `attr` to position circles and text labels with consistent spacing.

Jun 24, 2020
Loading thumbnail…

Countries Tree

This visualization displays a hierarchical tree of countries organized by continent and subregion, rendered as an SVG with horizontal links and text labels. The example uses D3 v5’s `tree` layout, `hierarchy`, `linkHorizontal`, and `zoom` APIs to generate and interactively pan and scale the structure. Data from `data.json` feeds the hierarchy, with font size varying by depth and leaf nodes left-aligned while parent nodes are centered.

Jun 21, 2020
Loading thumbnail…

Blank Canvas

An empty SVG canvas fills the browser viewport with a single rounded rectangle, creating a blank slate for visualization. The example demonstrates a minimal React setup where D3 v5 selects the root SVG element and sets its dimensions to match the window. Using the `d3.select` API, the code appends a `rect` element with a 40-pixel corner radius to the SVG, styling it as a softly rounded full-screen backdrop. The rendering relies solely on SVG primitives, with no data binding or interaction logic present.

Jun 21, 2020
Loading thumbnail…

Cheap trick for interaction map

This example shows an interactive world map with country boundaries drawn in light green over a blue sphere. Hovering highlights a country in red, while zooming and panning are supported through a zoom behavior that applies transformations to the map group. The map uses D3 v5’s geoNaturalEarth1 projection and geoPath with TopoJSON data from the world-atlas package, with country names loaded from a TSV file and displayed via SVG title tooltips.

Jun 21, 2020
Loading thumbnail…

Lets make a Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to generate the map geometry. Geographic data comes from the World Atlas TopoJSON file, loaded via `d3.json` and converted to GeoJSON with `topojson.feature`. The complete React-based visualization is built with D3 v5 and TopoJSON v3, with styling applied through CSS classes.

Jun 21, 2020
Loading thumbnail…

Bowl of fruit Hover to Select

Five fruit circles render in an SVG as apples and lemons; hovering one highlights it with a black stroke while the previous selection clears. The React and D3 v5 code uses a `scaleOrdinal` for color and radius, and enters, updates, and exits circles with a 1000-millisecond `transition`. The example demonstrates data joins by removing, changing, and filtering fruit items while animating circle size and position.

Jun 21, 2020
Loading thumbnail…

Bowl of fruit Click to Select

A bowl of fruit visualization demonstrates animated selection and data updates. Five circles representing apples and lemons move horizontally, with the selected fruit highlighted by a black stroke. The view uses d3.select and d3.range to generate initial data, with scaleOrdinal mapping fruit types to colors and radii. Fruit removal, type changes, and interactive clicking trigger transitions via d3.transition().duration, animating circle positions and sizes over one-second intervals. The implementation uses React, SVG rendering, and D3 v5.

Jun 21, 2020
Loading thumbnail…

Bowl of fruit Click to Select

Five circles represent fruit in a bowl, starting as red apples and transitioning to a yellow lemon, with the ability to click any fruit to select it. The visualization uses D3 v5 data joins with `transition` to animate circle radii on entry and exit, while `scaleOrdinal` maps fruit types to colors and sizes.

Jun 21, 2020
Loading thumbnail…

Bowl of fruit just Enter & Exit

A red circle represents each apple in a bowl of fruit. The visualization initially shows five apples in a horizontal row, then removes one after a one-second delay. The example demonstrates enter and exit animations using D3 v5's selection API, where `selectAll('circle').data(fruits)` handles the data binding, `.enter().append('circle')` creates the circles, and `.exit().remove()` deletes the departing apple. The React and D3 code is straightforward, relying on pre-defined SVG dimensions.

Jun 20, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth over time using a maroon filled path with a smooth curve. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis` to render the SVG path. Axes are drawn with `axisBottom` and `axisLeft`, while population labels use `format` to abbreviate billions. Data comes from a CSV file loaded via `csv` containing yearly world population figures.

Jun 20, 2020
Loading thumbnail…

Area Chart

This area chart displays daily temperature readings in San Francisco, filled with a maroon gradient beneath a smooth curved line. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, with axes generated by d3.axisBottom and d3.axisLeft. d3.area with the curveBasis interpolation shapes the filled region. Data loads from a CSV file hosted on VizHub, and the SVG rendering includes labeled axes and a title.

Jun 20, 2020
Loading thumbnail…

Line Chart

This line chart displays temperature measurements in San Francisco over time, with the timestamp on the x-axis and temperature on the y-axis. The visualization uses D3 v5 scales, axes, and a line generator with curveBasis smoothing to create a curved path. SVG rendering handles the display, while data is loaded as CSV from an external source. The chart includes labeled axes, grid lines, and a title, with styling applied via external CSS.

Jun 17, 2020
Loading thumbnail…

Temperature in SanFrancisco

This visualization displays daily temperature measurements in San Francisco over time, with each point representing a single day’s temperature. The chart uses a scatterplot with circular markers to show the relationship between date and temperature. The code leverages D3 v5’s `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and the `axisBottom` and `axisLeft` helpers to render gridlines and ticks. Data is loaded from a CSV file, with timestamps parsed into `Date` objects and temperatures converted to numbers. SVG is used for rendering, with a clean layout featuring styled axis labels and a title.

Jun 17, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the world's ten most populous countries, with each circle positioned along the x-axis by population value and along the y-axis by country name. The visualization is rendered as an SVG using React and D3 v5, with the data loaded from a CSV file. The code implements scales and axes through `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft`. Population tick labels are formatted using `d3.format` with the custom `.replace('G','B')` transformation.

Jun 16, 2020
Loading thumbnail…

Customising Axis

A horizontal bar chart displays the populations of the world's most populous countries, sorted by rank. The example customizes both axes: the y-axis removes domain lines and ticks, while the x-axis formats population values with d3.format and replaces "G" with "B" for billions. Built with D3 v5 in React, it uses scaleLinear, scaleBand, axisBottom, and axisLeft to render SVG elements, with data loaded from a CSV file.

Jun 16, 2020
Loading thumbnail…

Shapes with SVG and CSS

A grid of SVG shapes demonstrates the effects of CSS styling and SVG transform attributes. Circles and rectangles appear in default black, explicit red and green fills, and a light blue group with black strokes. CSS class rules on a `<g>` element apply black stroke styling to lines and paths, with a custom path color and rounded line joins. The React starter code and inline SVG markup render the static composition.

Jun 14, 2020
Loading thumbnail…

Cars HTML Report

This example displays a plain HTML report listing three used cars with their model years and prices, emphasizing one entry in red via a CSS class. The page relies on static markup in index.html and external styling from styles.css, which sets a large monospace font and applies the red highlight to the Nissan Leaf. No JavaScript, React components, or data-fetching logic are present; the visualization is purely a styled document render.

Jun 14, 2020
Loading thumbnail…

Jevsan Starter

This example displays a report of used cars priced under $2,000, formatted as a multi-line text block in a large font. It shows a filtered list of Honda, Nissan, Ford, and Chevrolet vehicles with their year, make, model, and price. The React app imports car data from a JSON array, applies a price filter, maps each entry through a custom `formatCar` function, and joins the results with newlines using `generateReport`. The final output is injected into the DOM via `document.getElementById` and `textContent`, with no external visualization libraries.

Jun 14, 2020