Skip to main content
Log in
D

data-inside

@data-inside·14 public vizzes

Loading thumbnail…

React 301 (state)

This example demonstrates React state management within a class component, rendering a simple question-and-answer display. The App component holds state via `this.state` and updates the rendered text. It also maps over an array of joke objects, using conditional logic and inline styles to toggle visibility and color based on whether a question exists. The code imports React and uses `ReactDom.render` to mount the app to the DOM. While the repository references a population dataset, the actual visualization is not implemented in the provided files, which focus solely on React component interactions.

Dec 11, 2020
Loading thumbnail…

React 101

This React 101 example demonstrates a hands-on teaching environment for the React library, showcasing functional components and props through a simple todo list. The header component (`Header.js`) dynamically changes its greeting and text color based on the current hour of the day, while the main list renders three todo items from a static `todosData` array. The app uses `ReactDOM.render()` to mount the root `App` component, which combines `Header`, `TodoItem`, and `Footer` components, with each `TodoItem` receiving its data via React props. Styling is applied through a linked CSS file, and the example leverages React 16.13.1 from unpkg.

Dec 11, 2020
Loading thumbnail…

React 201

This example demonstrates how React components render a list of jokes, conditionally displaying questions and answers from a static dataset. It uses React’s `map` method to transform joke objects into `Joke` components, with inline styles dynamically hiding questions and graying answer text when a question is absent. The code imports React and ReactDOM to mount the `App` component, while jokes are sourced from a local `jokesData.js` file. The visualization also references population data from World Population Prospects 2017, though that dataset is not used in the visible rendering.

Dec 10, 2020
Loading thumbnail…

Knowledge Graph

A force-directed knowledge graph visualizes the relationships between software components, grouping nodes into five teams and coloring them accordingly. The graph uses `d3.forceSimulation` to position nodes and links, with arrowheads defined via SVG markers to indicate directional dependencies. Each node is labeled with its name and full descriptor, while edges are differentiated by link type. The layout includes a titled subgraph area, and the rendering is done with D3 v5 in an SVG container, using a predefined color scale and manually specified data.

Dec 5, 2020
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using a categorical ordinal scale with the Spectral scheme. It loads world geometry from TopoJSON and joins it with TSV metadata, then renders the map with d3.geoPath and a Natural Earth projection. The visualization includes an interactive color legend built with custom SVG components, and supports zooming and panning through d3.zoom. Hovering highlights individual countries in red, and tooltips display each country’s name and economic group.

Dec 3, 2020
Loading thumbnail…

World countries tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a left-to-right layout. The code employs D3 v5’s `tree` and `hierarchy` functions to compute node positions, with `linkHorizontal` generating curved paths between parent and child nodes. Each country name is rendered as SVG text, with font size decreasing by depth level, on a zoomable canvas via D3’s `zoom` behavior. The data is loaded from a local JSON file, and the styling uses a Google Font (`Nerko One`) with a white text shadow for legibility.

Nov 30, 2020
Loading thumbnail…

Blank Canvas

A dynamic fruit bowl demonstrates D3's enter, update, exit, and merge patterns through animated transitions. Circles and labels appear, resize, and reposition as fruit types change, using `scaleOrdinal` for color and radius, and `transition.duration` with delays for smooth motion. Object constancy is maintained via data-bound IDs, while exiting elements shrink and fade out. The SVG rendering relies on d3.v6 and standard selection methods.

Nov 30, 2020
Loading thumbnail…

World Map hover version

This example displays an interactive world map rendered with SVG, featuring countries that change color when hovered over. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to draw geographic shapes from TopoJSON data, while country names are loaded from a TSV file. Users can pan and zoom the map using D3’s `zoom` behavior, and a CSS hover effect highlights each country in red. The map includes a blue sphere background representing the Earth’s outline.

Nov 30, 2020
Loading thumbnail…

Line Chart w/ d3, react

This line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time. The React component uses d3-scale functions like scaleTime and scaleLinear to map data to SVG coordinates, while d3.line with curveNatural draws the smoothed path. Axis components are custom React elements that render d3 ticks, and the useData hook loads the CSV asynchronously with d3.csv.

Nov 19, 2020
Loading thumbnail…

Scatter Plot 101

This scatter plot shows the relationship between horsepower and weight for cars from the auto-mpg dataset, with red semi-transparent circles marking each vehicle. The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load data, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to generate gridlines. Axis labels and a title are added as text elements, while margins and padding position the chart within the 960×500 SVG canvas.

Nov 19, 2020
Loading thumbnail…

Scatter Plot with Menus:

This scatter plot visualizes data on automobiles from the UCI Machine Learning Repository’s Auto MPG dataset, allowing the user to map any column to the X and Y axes via dropdown menus. Built with D3 v5, it renders axes and animated circles (transitioning over two seconds) as SVG. The implementation uses the `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component to handle interactive selections.

Nov 19, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v6 with SVG rendering to position circles along categorical y-axis points and a linear x-axis. It employs `d3.scaleLinear`, `d3.scalePoint`, `d3.axisLeft`, and `d3.axisBottom` to create the chart, with population values formatted from thousands to billions using `d3.format`. Background grid lines extend from both axes, and the data is loaded asynchronously via `d3.csv`.

Nov 18, 2020
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The D3 v6 code imports `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to construct the visualization. It customizes the x-axis by using a formatter that converts large numbers to abbreviated units and replaces the default "G" suffix with "B". Axis grid lines extend across the chart, while the y-axis labels and domain lines are removed, and the chart is rendered as SVG.

Nov 18, 2020
Loading thumbnail…

Shapes with SVG and CCS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. The code uses raw SVG elements within an HTML document, applying inline attributes like `fill` and `stroke` alongside a CSS class (`.lines`) to control appearance. A `<g>` element groups shapes with shared transform and style properties, while the SVG `scale` transform enlarges the entire drawing. No JavaScript libraries are used; rendering relies solely on SVG and CSS.

Nov 14, 2020